XAML - TimePicker

A TimePicker is a control that allows a user to pick a time value. The hierarchical inheritance of TimePicker class is as follows −

Properties

Events

Methods

Example

The following example shows the usage of TimePicker in an XAML application. Here is the XAML code to create and initialize a TimePicker with some properties.

<Page x:Class = "XAMLTimePicker.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAMLTimePicker" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <StackPanel Orientation = "Horizontal" Height = "60" Margin = "46,67,-46,641">
         <TimePicker x:Name = "arrivalTimePicker" Header = "Arrival Time" Margin = "0,1"/> 
         <Button Content = "Submit" Click = "SubmitButton_Click"
            Margin = "5,0,0,-2" VerticalAlignment = "Bottom"/> 
         <TextBlock x:Name = "Control1Output" FontSize = "24"/> 
      </StackPanel> 
   </Grid> 
	
</Page>

Here is the click event implementation in C# −

using System; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;

namespace XAMLTimePicker {
   public sealed partial class MainPage : Page {
      public MainPage() { 
         this.InitializeComponent(); 
      }
      private void SubmitButton_Click(object sender, RoutedEventArgs e) {
         if (VerifyTimeIsAvailable(arrivalTimePicker.Time) == true) {
            Control1Output.Text = string.Format("Thank you. Your appointment is set for {0}.",
               arrivalTimePicker.Time.ToString());
         } else {
            Control1Output.Text = "Sorry, we're only open from 8AM to 5PM.";
         }
      }
      private bool VerifyTimeIsAvailable(TimeSpan time) {
         // Set open (8AM) and close (5PM) times. 
         TimeSpan openTime = new TimeSpan(8, 0, 0); 
         TimeSpan closeTime = new TimeSpan(17, 0, 0);
		
         if (time >= openTime && time < closeTime) { 
            return true; // Open 
         }
         return false; // Closed 
      }
   }
}

When you compile and execute the above code, it will display the following output. When time is selected between 8 am to 5 pm, it will display the following message −

Otherwise, the following message will be displayed −

We recommend you to execute the above example code and experiment with some other properties and events.

Kickstart Your Career

Get certified by completing the course

Get Started