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

點(diǎn)擊下載Essential Studio for Xamarin正式版

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

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

格式化選擇器

Xamarin.Forms日期選擇器以四種預(yù)定義的日期格式顯示要從中選擇的日期值。日期選擇器組件還支持格式化列和標(biāo)題的文本。以下代碼示例說(shuō)明了在“日期選擇器”中加載的“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;">



	         <網(wǎng)格></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>

對(duì)話框和獨(dú)立

屏幕中元素的緊湊視圖是應(yīng)用程序最重要的方面之一。日期選擇器具有獨(dú)立模式和對(duì)話框mod，該對(duì)話框?qū)⑦x擇器呈現(xiàn)在應(yīng)用程序窗口的中心；它使應(yīng)用程序在用戶界面中看起來(lái)更加令人印象深刻。

	<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;">



	         <網(wǎng)格></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 =“對(duì)話框”</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;">
    私人無(wú)效PickerButton_Clicked（對(duì)象發(fā)送者，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>

指定最小和最大日期

通過(guò)設(shè)置最大和最小日期以限制選擇超出該范圍的日期，可以為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>

定制

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

	<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>

創(chuàng)建一個(gè)包含日期選擇器的Xamarin.Forms應(yīng)用程序

本節(jié)說(shuō)明了使用Visual Studio在Xamarin.Forms應(yīng)用程序中實(shí)現(xiàn)Date Picker控件的分步過(guò)程：

1、創(chuàng)建一個(gè)空白的Xamarin.Forms應(yīng)用程序。

2、在應(yīng)用程序中，從nuget.org引用 SfPicker NuGet包。

3、在UWP和iOS中部署應(yīng)用程序時(shí)，請(qǐng)遵循文檔中使用Date Picker在每個(gè)平臺(tái)上啟動(dòng)應(yīng)用程序中提供的步驟。

4、如以下代碼示例所示，將Date Picker命名空間導(dǎo)入頁(yè)面中，并初始化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;">



	         <網(wǎng)格></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 =“對(duì)話框”</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;">



	        私人無(wú)效PickerButton_Clicked（對(duì)象發(fā)送者，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>

結(jié)論

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