Post
Ask Question

Date Picker In Xamarin Forms Application For Android And UWP

The visual representation of a DatePicker is very similar to the one of Entry, except that a special control for picking a date appears in place of a keyboard.

Before reading this article, please go through the following article.

Reading this article, you will learn how to use DatePicker in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C#.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)
  3. Using Visual Studio 2015 Installer. Enable the Xamarin and C#/.NET while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank App (Xamarin.Forms Portable)-> Give a suitable name for your app (XamFormDatePick) ->OK.

UWP

Step 2

Now, create project “XamFormDatePick_Droid” …

UWP

Step 3

Choose the Target and Minimum platform versions for your Universal Windows Project.

UWP

Creating project “XamFormDatePick_UWP” ….

UWP

Step 4

After that, Visual Studio creates six projects and displays the GettingStarted.Xamarin Page. Now, we have to update the Xamarin.Forms reference for Portable Project and XamFormDatePick_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 5 - Add an XAML Page for Date Picker Demo.

 Right click XamFormDatePick(Portable) project, aelect ADD-> NewItem.

UWP

Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

UWP

Step 6

For DatePicker demo, add the following name space in DatePickDemo.xaml
  1. xmlns: sys = "clr-namespace:System;assembly=mscorlib"  
  2. Add Date Picker Tag and Label in DatePickDemo.xaml. <  
  3.     StackLayout >  
  4.     <  
  5.     Label x: Name = "lblTitle"  
  6. Text = "Date Picker in Xamarin Forms - Demo"  
  7. Font = "Large"  
  8. HorizontalOptions = "Center"  
  9. VerticalOptions = "CenterAndExpand" / >  
  10.     <  
  11.     DatePicker x: Name = "datepicker"  
  12. VerticalOptions = "CenterAndExpand"  
  13. Date = "{x:Static sys:DateTime.Now}" / >  
  14.     <  
  15.     /StackLayout>  
UWP

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormDatePick (portable) and set the Root Page.

UWP

Step 8

We will test Android and UWP. So, we can set multiple startup projects as XamFormDatePick.Droid and XamFormDatePick.UWP (Universal Windows).

UWP

Step 9 - Change the Configuration Manager settings
 
Go to Build -> Configuration Manager, un-check all the "Build" and "Deploy" options  except for Droid and UWP.

UWP

Step 10

Deploy your app in Local Machine. The output of the XamFormDatePick app is -

UWP

After clicking the Datepicker,

UWP

After picking the date,

UWP

Summary

Now, you have successfully created and tested DatePicker in Xamarin.Forms application using Visual C# and Xamarin.


Similar Articles