Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout

[SOURCE DOWNLOAD]

Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout

Webabcd


Introduced
Different from Windows Phone 8.1 's new controls

• Datepickerflyout-Date picker control
• Timepickerflyout-Time picker control

Example
1, demonstrate the application of Datepickerflyout
Datepickerflyoutdemo.xaml

<Page
    x:Class="Demo.Control.DatePickerFlyoutDemo"
    Xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Xmlns:local="using:Demo.Control"
    Xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    Xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">
            
            <Button Content="Show DatePicker" >
                <Button.Flyout>
                    <!--
                        Title - the title of the popup
                    -->
                    <DatePickerFlyout x:Name="datePicker" Title="Select Date" DatePicked="datePicker_DatePicked" Closed="datePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--For the DatePicker control, it is supported by both wp and windows. For details, see: http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <DatePicker Header="Date" Margin="0 10 0 0" />
            
            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page> 

DatePickerFlyoutDemo.xaml.cs

/*
 * DatePickerFlyout - Date Picker Control (wp only)
 * ShowAtAsync(FrameworkElement target) - Popup date picker control
 * Hide() - hide popup
 *
 * DatePicked - the event triggered by the user after selecting the date (click the "Finish" button)
 * Opening, Opened, Closed - Several events as the name suggests
 */

Using System;
Using Windows.Globalization;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Navigation;

Namespace Demo.Control
{
    Public sealed partial class DatePickerFlyoutDemo : Page
    {
        Public DatePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        Protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Date - the currently displayed date
            datePicker.Date = DateTimeOffset.Now.AddMonths(1);

            // MinYear - the smallest year allowed for the DatePicker control
            datePicker.MinYear = DateTimeOffset.Now.AddYears(-20);
            // MaxYear - the largest year allowed for the DatePicker control
            datePicker.MaxYear = DateTimeOffset.Now.AddYears(20);

            // YearVisible - whether to display the year selection box
            datePicker.YearVisible = true;
            // MonthVisible - whether to display the month selection box
            datePicker.MonthVisible = true;
            // DayVisible - whether to display the day selection box
            datePicker.DayVisible = true;

            // CalendarIdentifier - the calendar system used by the DatePicker control (Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, Taiwan, Thai, UmAlQura)
            datePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;

        }

        // Event triggered by the user clicking the "Complete" button
        Private void datePicker_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            // e.OldDate - original date
            // e.NewDate - new date
            lblMsg.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss");
            lblMsg.Text += Environment.NewLine;
        }

        // By combining the DatePicked event with the Closed event, you can determine if the user clicked the "Cancel" button or pressed the "Back button"
        Private void datePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
} 

2, demonstrate the application of Timepickerflyout
Timepickerflyoutdemo.xaml

<Page
    x:Class="Demo.Control.TimePickerFlyoutDemo"
    Xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Xmlns:local="using:Demo.Control"
    Xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    Xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">

            <Button Content="Show TimePicker" >
                <Button.Flyout>
                    <!--
                        Title - the title of the popup
                    -->
                    <TimePickerFlyout x:Name="timePicker" Title="Choose Time" TimePicked="timePicker_TimePicked" Closed="timePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--For the TimePicker control, it is supported by both wp and windows. For details, please refer to: http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <TimePicker Header="Time" Margin="0 20 0 0" />

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page> 

TimePickerFlyoutDemo.xaml.cs

/*
 * TimePickerFlyout - Time Picker Control (wp only)
 * ShowAtAsync(FrameworkElement target) - Popup time picker control
 * Hide() - hide popup
 *
 * TimePicked - the event triggered by the user after selecting the time (click the "Finish" button)
 * Opening, Opened, Closed - Several events as the name suggests
 */

Using System;
Using Windows.Globalization;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Navigation;

Namespace Demo.Control
{
    Public sealed partial class TimePickerFlyoutDemo : Page
    {
        Public TimePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        Protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Time - the time currently displayed by the TimePicker control
            timePicker.Time = new TimeSpan(16, 0, 0);

            // MinuteIncrement - the minute increment of the minute selection box (0, 15, 30, 45)
            timePicker.MinuteIncrement = 15;

            // ClockIdentifier - hour system, ClockIdentifiers.TwelveHour (12HourClock), 12-hour clock
            // timePicker.ClockIdentifier = ClockIdentifiers.TwelveHour;

            // ClockIdentifier - hour system, ClockIdentifiers.TwentyFourHour (24HourClock), 24-hour clock
            timePicker.ClockIdentifier = ClockIdentifiers.TwentyFourHour;
        }

        // Event triggered by the user clicking the "Complete" button
        Private void timePicker_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            // e.OldTime - original time
            // e.NewTime - new time
            lblMsg.Text = args.NewTime.ToString("c");
            lblMsg.Text += Environment.NewLine;
        }

        // By combining the TimePicked event with the Closed event, you can determine if the user clicked the "Cancel" button or pressed the "Back button".
        Private void timePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
} 

Ok
[SOURCE DOWNLOAD]

Different Windows Phone (51)-8.1 New controls: Datepickerflyout, Timepickerflyout