Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms組件套包，包含最快的圖表和網格。

點擊下載Essential Studio for Xamarin正式版

日期選擇是Essential Studio 2019第4卷中 Syncfusion的Xamarin.Forms組件列表中引入的新組件。日期選擇器是一個完全可自定義的組件，它提供了一個簡單而引人入勝的用戶界面，可為您的應用程序提供流暢和觸摸友好的體驗。該組件為所有平臺提供了通用的UI，可用于計劃、待辦事項和提醒應用程序。

在本文中，我將向您介紹此新的Date Picker組件中的可用功能。

格式化選擇器

Xamarin.Forms日期選擇器以四種預定義的日期格式顯示要從中選擇的日期值。日期選擇器組件還支持格式化列和標題的文本。以下代碼示例說明了在“日期選擇器”中加載的“yyyy MM dd”格式。

<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">

	             xmlns：x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             xmlns：local =“ clr-namespace：DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             xmlns：datepicker =“ clr-namespace：Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             x：Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	     <ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         <網格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             <datepicker：SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     格式=“ yyyy_MM_dd”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         </Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	     </ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	 </ContentPage></font></font><font></font>



	<font></font>

對話框和獨立

屏幕中元素的緊湊視圖是應用程序最重要的方面之一。日期選擇器具有獨立模式和對話框mod，該對話框將選擇器呈現在應用程序窗口的中心；它使應用程序在用戶界面中看起來更加令人印象深刻。

	<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	    xmlns：x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	    xmlns：local =“ clr-namespace：DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	    xmlns：datepicker =“ clr-namespace：Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	    x：Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         <網格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             <datepicker：SfDatePicker x：Name =“ datePicker”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     PickerMode =“對話框”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     格式=“ yyyy_MM_dd”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         <ButtonClicked =“ PickerButton_Clicked” ... /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	     </Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	 </ContentPage></font></font><font></font>

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">公共局部類MainPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    公共MainPage（）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    { </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        InitializeComponent（）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    私人無效PickerButton_Clicked（對象發送者，System.EventArgs e）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        this.datePicker.IsOpen = true;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font>

指定最小和最大日期

通過設置最大和最小日期以限制選擇超出該范圍的日期，可以為Date Picker加載指定的日期范圍。

	<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker：SfDatePicker MinimumDate =“ 03/29/2000”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         MaximumDate =“ 05/05/2021” ... /></font></font>

帶間隔的日期值

日期值可以在“日期選擇器”中的間隔中分別填充天、月和年。

 

	<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker：SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         DayInterval =“ 2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         MonthInterval =“ 2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         YearInterval =“ 2” ... /></font></font>

定制

您可以自定義標題、列標題、頁腳和日期值的顏色和字體。下面的代碼示例演示如何自定義選定值和未選定值以及字體。

	<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"> <datepicker：SfDatePicker PickerMode =“ Dialog”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         HeaderText =“選擇日期”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         HeaderBackgroundColor =“＃238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         HeaderTextColor =“＃FFFFFF”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         OKButtonTextColor =“＃238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         CancelButtonTextColor =“＃238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         UnselectedItemTextColor =“＃238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         ColumnHeaderBackgroundColor =“＃EBF2F2”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         SelectedItemTextColor =“＃238F94”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                         ShowFooter =“ True” /></font></font>

創建一個包含日期選擇器的Xamarin.Forms應用程序

本節說明了使用Visual Studio在Xamarin.Forms應用程序中實現Date Picker控件的分步過程：

1、創建一個空白的Xamarin.Forms應用程序。

2、在應用程序中，從nuget.org引用 SfPicker NuGet包。

3、在UWP和iOS中部署應用程序時，請遵循文檔中使用Date Picker在每個平臺上啟動應用程序中提供的步驟。

4、如以下代碼示例所示，將Date Picker命名空間導入頁面中，并初始化SfDatePicker。

	<fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;"><？xml version =“ 1.0” encoding =“ utf-8”嗎？</font><fontstyle="vertical-align: inherit;">></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	 <ContentPagexmlns =“ //xamarin.com/schemas/2014/forms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             xmlns：x =“ //schemas.microsoft.com/winfx/2009/xaml”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             xmlns：local =“ clr-namespace：DatePickerSample”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             xmlns：datepicker =“ clr-namespace：Syncfusion.XForms.Pickers; assembly = Syncfusion.SfPicker.XForms”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             x：Class =“ DatePickerSample.MainPage”></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	     <ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         <網格></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             <datepicker：SfDatePicker x：Name =“ datePicker”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     PickerMode =“對話框”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     PickerWidth =“ 300”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                                     ShowFooter =“ True” /></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	             <ButtonText =“開放日期選擇器” </font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                    x：Name =“ pickerButton”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                    Clicked =“ PickerButton_Clicked”</font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	                    …。/></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	         </Grid></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	     </ContentPage.Content></font></font><font></font><fontstyle="vertical-align: inherit;"><fontstyle="vertical-align: inherit;">



	 </ContentPage></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    公共局部類MainPage：ContentPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

	<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    公共局部類MainPage：ContentPage</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	    {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        公共MainPage（）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	            InitializeComponent（）;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        }</font></font><font></font>



	<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        私人無效PickerButton_Clicked（對象發送者，System.EventArgs e）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	            this.datePicker.IsOpen =true;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	        }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">



	    }</font></font>

結論

在這篇文章中，我們介紹了新的  Xamarin.Forms日期選擇器組件及其功能。在我們的2019年第4卷發行版中嘗試使用此控件。