Windows Phone 8.1中日期和时间选择器DatePicker,TimePicker

灰太狼 2022-08-06 03:08 251阅读 0赞

开篇之前，推荐王磊老师的Windows 8.1中关于DatePicker和TimePicker的讲解

链接：[重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker][Windows 8.1 Store Apps _73_ - _ DatePicker_ TimePicker]

首先Windows Phone 8.1的这两个选择器的使用和在Windows 8.1中的使用差不多。

1.前台DatePicker和TimePicker标签的使用没什么太大的问题，其中Header属性其实就是给选择器起个名字而已

DateChanged和TimeChanged分别表示选中日期或者时间变化时触发的事件

2.对于日期格式的问题，可以通过微软自带的模板设置显示格式(这个有很多种组合方式，按需书写，需要自己多摸索

摸索，最好查看MSDN文档)

链接：[格式规范链接][Link 1]

3.对于Orientation属性的设置，我没有在wp中看出什么区别，不管设为Horizontal或者Vertical都是如下图显示的一样

![20141216202034090][]

![20141216202129845][]    ![20141216203250484][]    ![20141216203356546][]

4.在后台中可以对日期和时间选择器进行额外的设置和规定，以控制它的显示和行为

a.控件默认显示的日期是当天的日期，但我们可以对他进行控制，达到显示我们要求显示的日期

以下datePicker，datePicker1，datePicker3是前台DatePicker选择器的x:name属性值

方法一：datePicker1.Date = datePicker1.Date.AddYears(n);//控制显示的年份，n表示整数，最终年份显示为当前年

份加上n，可以正数可以负数

比如n=2，则当前2014+2=2016，显示2016年，如果n=-1,则是2012年

同理datePicker1.Date = datePicker1.Date.AddMonths(-2);和datePicker1.Date = datePicker1.Date.AddDays(3);，原

理一样

方法二：datePicker1.Date = DateTimeOffset.Now.AddYears(2);这个是依附你的机器时间来的，也就是说在你计算机

上的时间的基础上加减运算后显示日期

建议方法二少用，因为一旦以上两种方法混用，有时后者会对前者有影响。

比如之前设置为：

datePicker1.Date = datePicker1.Date.AddYears(2);

datePicker1.Date = DateTimeOffset.Now.AddMonths(2);

那么，年份设置会生效，依旧会显示当前年份，而不会再当前年份上加上2显示。而月份却可以正常加上2后显示

b.控制日期控件最大年份和最小年份显示的设定，但月份和日没有这样的设定！如下

datePicker.MinYear = datePicker.Date.AddYears(-4);     //控制控件允许的最小年份

datePicker.MaxYear = datePicker.Date.AddYears(4);     //控制控件允许的最大年份

或者：

datePicker.MinYear = DateTimeOffset.Now.AddYears(-4);   //控制控件允许的最小年份

datePicker.MaxYear = DateTimeOffset.Now.AddYears(4);   //控制控件允许的最大年份

以上两种方法区别都可以，第二种依附于计算机上的时间来设定的。直观一点的话，效果如下图所示：

![20141216211543340][]                                       ![20141216211556054][]

c.控制控件的Year,Month,Day选择框是否显示,默认是true(显示)，如果是以下情形，则如下图所示：

datePicker.YearVisible = false;  
datePicker.MonthVisible = true;  
datePicker.DayVisible = true;

![20141216211737688][]可以看出就剩月份和日可以选择了。三种任你组合！

d.设置日期控件的日历系统，为了效果明显一点，我这边设置日本的，因为日本的都是以天皇年号来的

datePicker3.CalendarIdentifier = CalendarIdentifiers.Japanese;//这边设为日本日历系统

![20141216212139187][]                        ![20141216212244899][]

那么还有关于时间选择器的就直接上代码，上面有注释

只要注意分钟最小分量的设定对时间点的影响就可以了，貌似小时和秒没有最小分量的设定！

//如果你控制控件显示的时间不是分钟选择框最小分量的整数倍，则分钟一栏从设置值自动调节到附近最接近最小分量值整数倍的那一数值
    //控制控件显示的时间
    timePicker.Time = new TimeSpan(3,22,0);
    //控制控件分钟选择框的最小分量
    timePicker.MinuteIncrement = 3;
    //控件时间选择控件是12小时制还是24小时制
    timePicker.ClockIdentifier = ClockIdentifiers.TwelveHour;//选择12小时制,也可以ClockIdentifiers.TwentyFourHour设置为24小时制

附上图更直观一些吧：注意我设置的是22分，但由于设置了分钟的最下分量为3，所以显示的时候实际显示的是21分

![20141216213338915][] 注意看这边分钟就是按3分钟为一单位：![20141216213140199][]

5.日期，时间改变触发的事件

private void datePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)
    {
         txtMsg.Text = e.NewDate.ToString("yyyy-mm-dd hh:mm:ss");
    }
    
    //格式规范链接：http://msdn.microsoft.com/zh-cn/library/ee372286.aspx
    private void timePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)
    {
         txtMsg1.Text = e.NewTime.ToString("g");
    }

思考，如果当前是12月，使用datePicker1.Date = datePicker1.Date.AddMonths(2);来控制控件显示月份，那么控件显

示的月份是2还是14呢？

显然14是不合常规，如果是的话怎么办呢，编程还是要不断动手不断动脑，问题要大量去实践才能解答。

以上就是我的一些认识和感悟，不一定都是对的，大家互相学习吧。

[Windows 8.1 Store Apps _73_ - _ DatePicker_ TimePicker]: http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html
[Link 1]: http://msdn.microsoft.com/zh-cn/library/ee372286.aspx
[20141216202034090]: /images/20220806/87a41817ae0e4a7381387f2d7b71cd1f.png
[20141216202129845]: https://img-blog.csdn.net/20141216202129845
[20141216203250484]: https://img-blog.csdn.net/20141216203250484
[20141216203356546]: /images/20220806/96aa4c13a7914c94a5eea99750ad2c42.png
[20141216211543340]: https://img-blog.csdn.net/20141216211543340
[20141216211556054]: /images/20220806/917a1efde4014003b8788d85410dc875.png
[20141216211737688]: /images/20220806/bafe7baeeaa946bab413f5d575bc910a.png
[20141216212139187]: https://img-blog.csdn.net/20141216212139187
[20141216212244899]: /images/20220806/e08a4008e9be40529526e69985f9c311.png
[20141216213338915]: https://img-blog.csdn.net/20141216213338915
[20141216213140199]: /images/20220806/6394667b9bfc4b4dba2fbbeea8083524.png