WindowsPhone 8.0 vs WindowsPhone 8.1:New DatePicker&TimePicker features(C#-XAML)

Introduction

In WindowsPhone 8.0 datepicker & timepicker controls are indireclty available from  Windows PhoneToolkit .But fortunately now both controls are direclty vailable from windows phone 8.1 sdk toolbox,so now no need for extra toolkit references ,as well as other paid controls.This post is explained about following new key properties, events,main features.

DatePicker:

• The first most wanted feature is now we can set MinYear and MaxYear for datepicker to displayed with longlistselector,as we can't set date range in windowsphone 8.0 datepicker.
• With new datepicker ,we can hide day ,month and year visibilty from datepicker,
• Now we can customize datepicker with ComboBox with separate columns for Day,Month,Year.as this option is not availalble from wp8.0 Toolkit.
• Now to set the Date value on the DatePicker, you use the Date Property rather than the Value property from the wp8.0 toolkit.
• New Datepicker allows to format values of Day,Month,Year.But unfortunately this is not working for phone. 
• Now we can set  CalendarIdentifier for date picker.which is specify's which calender system to used in current app.
• Now for the date changing ,we are going to use  DateChanged event instead of ValueChanged event from the wp8.0 toolkit.
• And finally one missing feature is ValueStringFormat from the Windows Phone Toolkit,which is useful for customizing format of diplay date on datepicker.

TimePicker:

Compare to new datepicker,timepicker has comes with very few following geat features .

• New TimePicker allows  ClockIdentifier property for  specifying clock should show a12HourClock and 24HourClock 
• Now we can set MinuteIncrement Property allows you to specify how many minutes the picker is allowed to be incremented by.
• Now for the time changing ,we are going to use TimeChanged event instead of ValueChanged event from the wp8.0 toolkit.
• Now to set the time value on the DatePicker, you use the Time Property rather than the Value property from the wp8.0 toolkit.
• Like datepicker,finally again one missing feature is ValueStringFormat from the Windows Phone Toolkit,which is useful for customizing format of diplay time on timepicker.

Building the Sample

• Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
• I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.

• This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

Description

Both are UI elements that will automatically provide you with a TextBox input and when the user selects it, the picker will display form where you can choose another date/time using infinite scrolling. DatePicker and TimePicker are UX controls that fit in the Windows Phone D esign Guidelines. 

1)how to use in Xaml:

In windowsphone 8 we need to reference the datepicker and timepicker with toolkit prepix like

XAML

<!-- Toolkit reference--> 
xmlns:toolkit1="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

XAML

                  <!-- Datepicker --> 
                <toolkit1:DatePicker  Name="datepicker" Header="DatePicker" ValueChanged="datepicker_ValueChanged"  > 
                    <toolkit1:DatePicker.HeaderTemplate> 
                        <DataTemplate> 
                            <TextBlock Text="Datepicker" Foreground="Green" FontSize="25"/> 
                        </DataTemplate> 
                    </toolkit1:DatePicker.HeaderTemplate> 
                     
                </toolkit1:DatePicker> 
   

XAML

               <!-- Timepicker --> 
                <toolkit1:TimePicker  Name="timepicker" Header="TimePicker" ValueChanged="timepicker_ValueChanged" > 
                    <toolkit1:TimePicker.HeaderTemplate> 
                        <DataTemplate> 
                            <TextBlock Text="TimePicker" Foreground="Green" FontSize="25"/> 
                        </DataTemplate> 
                    </toolkit1:TimePicker.HeaderTemplate> 
                </toolkit1:TimePicker>

In windowsphone 8.1 we need not to reference the datepicker and timepicker with toolkit prepix .so we can direclty use it with names as like

XAML

<!-- Datepicker --> 
            <DatePicker Padding="2"    Name="defaultdatepicker"  Header="Hint" DateChanged="datePicker_DateChanged"> 
                <DatePicker.HeaderTemplate> 
                    <DataTemplate> 
                        <StackPanel> 
                            <TextBlock Text="Default Datepicker" Foreground="Green" FontSize="24"/> 
                       </StackPanel> 
 
                    </DataTemplate> 
                </DatePicker.HeaderTemplate> 
            </DatePicker>

  

XAML

  <!-- Timepicker --> 
            <TimePicker Margin="2"   Name="timepicker12"  Header="TimePicker" TimeChanged="timepicker_TimeChanged" > 
                <TimePicker.HeaderTemplate> 
                    <DataTemplate> 
                        <TextBlock Text="TimePicker" Foreground="Green" FontSize="25"/> 
                    </DataTemplate> 
                </TimePicker.HeaderTemplate> 
            </TimePicker>

2)Timepicker time format( ClockIdentifier property) in XAML:

Now timepicker having very nice string property called ClockIdentifier which returns two time formats i.e,12HourClock and 24HourClock . 

XAML

<TimePicker ClockIdentifier="12HourClock"/> 
<TimePicker ClockIdentifier="24HourClock"/>

  

3)TimePicker time icrement display(MinuteIncrement) in C#:

 For example, 10 specifies that the TimePicker minute control displays only the choices 00, 10, 20, 40,50.

C#

timepickerobj.MinuteIncrement = 10;

 

4)TimePicker time changing event (TimeChanged) in C#:

Now for the time changing ,we are going to use TimeChanged event instead of ValueChanged event from the wp8.0 toolkit.

XAML

<TimePicker Name="timepicker" TimeChanged="timepicker_TimeChanged" />

C#

 private void timepicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e) 
        { 
            valuetxt.Text = "Value is: " + "" + timepicker.Time.ToString();//Getting timepicker time value with Time property. 
            
        }   

 5)Datepicker calender format( CalendarIdentifier) in XAML: 

  Now datepicke new property called 'CalenderIdentifier' is for set calender system to use like 

XAML

<DatePicker Padding="2"    Name="datepicker"  CalendarIdentifier="HijriCalendar"/>

 

6)Datepicker Month and Year visibility in XAML:

With new datepicker ,we can hide month and year visibilty from datepicker like, 

XAML

<DatePicker  MonthVisible="False" YearVisible="True"   Name="datepicker"  DayVisible="True" />

 

7)Datepicker MinYear and MaxYear Range c#:

So now we can set max and min range for datepicker, 

C#

datepickerrange.MaxYear = System.DateTime.Now; 
datepickerrange.MinYear = System.DateTime.Now.AddYears(-1);

 

8)DatePicker Datechanging event (DateChanged ) in C#: 

Now for the date changing ,we are going to use DateChanged event instead of ValueChanged event from the wp8.0 toolkit.

XAML

<DatePicker Name="datepicker"  DateChanged="datePicker_DateChanged"/>

C#

 private void datePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e) 
        { 
            valuetxt.Text = "Value is: "+""+defaultdatepicker.Date.ToString();//Getting datepicker date value with Date Propert. 
        }

 9)Customizing DatePicker with ComboBox in XAML:

Now we can customize datepicker with ComboBox with separate columns for Day,Month,Year.as this option is not availalble from wp8.0 Toolkit.

XAML

<Page.Resources> 
<Style TargetType="DatePicker"> 
 <!-- Resource --> 
</Style> 
</Page.Resources>

 

Source file at: NewDatePicker&TimePickerSample

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)