[Silverlight]元件秘訣(二)：DATEPICKER實戰使用示範

在我新工作的公司客戶群中，發現大部份的商業貿易系統都會提供訂貨、訂座等功能。以致我需要使用DatePicker元件於介面去讓用戶選擇訂貨、訂座日期。而現實的情況中，我亦需要限制用戶去不能選擇太久遠的日期，例如限制用戶只可選擇未來三個月內的日期。因此，我寫了以下範例就是要示範如何用DatePicker 去限制用戶能夠選擇的日期。先看以下介面。

在本例的介面中有一個DatePicker作為訂座日期供用戶選擇，另外包括了兩個按鈕，其中一個是限制用戶在按下DatePicker後，只能看到前後一個月內的日子。而另一個按鈕則是用來讓用戶在按下DatePicker後，能夠看到的日子改變成前後三個月內。

以下是MainPage.xaml 的源碼，十分簡單：

   1:  <UserControl x:Class="DatePicker1.MainPage"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:      mc:Ignorable="d"

   7:      d:DesignHeight="144" d:DesignWidth="312" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

   8:   

   9:      <Grid x:Name="LayoutRoot" Background="White" Height="145">

  10:          <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="98,33,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" />

  11:          <sdk:Label Height="28" HorizontalAlignment="Left" Margin="28,37,0,0" Name="label1" VerticalAlignment="Top" Width="120" Content="訂座日期 : " />

  12:          <Button Content="只可選前後一個月內的日期" Height="23" HorizontalAlignment="Left" Margin="98,71,0,0" Name="button1" VerticalAlignment="Top" Width="170" Click="button1_Click" />

  13:          <Button Content="還原可選前後三個月內的日期" Height="23" HorizontalAlignment="Left" Margin="98,100,0,0" Name="button2" VerticalAlignment="Top" Width="170" Click="button2_Click" />

  14:      </Grid>

  15:  </UserControl>

至於背後MainPage.xaml.cs 的源碼如下：

   1:  using System;

   2:  using System.Windows.Controls;

   3:   

   4:  namespace DatePicker1

   5:  {

   6:      public partial class MainPage : UserControl

   7:      {

   8:          public MainPage()

   9:          {

  10:              InitializeComponent();

  11:              SetDisplayDateRange(); //預設可選前後三個月內的日期

  12:          }

  13:   

  14:          private void SetDisplayDateRange(int month = 3 )

  15:          {

  16:              //每月的最後一日

  17:              int[] EndDayOfYear = { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 };

  18:   

  19:              DateTime StartDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

  20:              StartDate = StartDate.AddMonths(-month);

  21:   

  22:              DateTime EndDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

  23:              EndDate = EndDate.AddMonths(month);

  24:   

  25:              if (DateTime.IsLeapYear(EndDate.Year))

  26:              {

  27:                  EndDayOfYear[1] = 29; //如果是Leap Year, 二月要是29日

  28:              }

  29:   

  30:              EndDate = new DateTime(EndDate.Year, EndDate.Month, EndDayOfYear[EndDate.Month - 1]);

  31:   

  32:              datePicker1.DisplayDateStart = (StartDate).Date;

  33:              datePicker1.DisplayDateEnd = (EndDate).Date;

  34:          }

  35:   

  36:          private void button1_Click(object sender, System.Windows.RoutedEventArgs e)

  37:          {

  38:              SetDisplayDateRange(1); //呼叫function限制可選前後一個月內的日期

  39:          }

  40:   

  41:          private void button2_Click(object sender, System.Windows.RoutedEventArgs e)

  42:          {

  43:              SetDisplayDateRange(); //呼叫function還原可選前後三個月內的日期

  44:          }

  45:         

  46:      }

  47:  }

主要的地方在SetDisplayDateRange的function內，當中datePicker有兩個相關屬性去限制DatePicker元件顯示的日子的始末，分別是DisplayDateStart 和DisplayDateEnd。此兩個屬性所需要的日期在function內要分別計算。

最後附上程式碼地址供下載參加：
https://docs.google.com/open?id=0BxRiNrIXEFArNzE0c1cwUDVTLWlTd3ZyUlNQVlRYUQ