DOJO學習筆記（七）－日期控件DropdownDatePicker和DatePicker

    這是兩個封裝良好的月曆元件，用來給使用者提供友善的月曆選擇方式。

以較為複雜的DropdownDatePicker為例，首先在頁面中require進來這個元件：

<script type="text/javascript">

<!--

dojo.require("dojo.widget.DropdownDatePicker");

//-->

</script>

然後在頁面中加入：

<div inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>

或

<div inputName="endDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>

Dojo就會自動生成兩個月曆元件，一個用來選擇開始日期，一個用來選擇結束日期。

其 中的屬性dojoType指明widget的類型（全部小寫就可以了）。inputName就是生成的input字段的name，送出時候作為表單的一個 參數。dateFormat是日期的格式。weekStartsOn是月曆中顯示的一周以哪一天開始，這裡是以周一開始（0-6，0代表周日）。 adjustWeeks指明是否需要根據每個月的實際天數來調整月曆中每月顯示的天數（如果不調整，每個月除了自己的天數，還會多出一些相鄰月份的天數， 總的天數固定為42天）。

如果需要給日期設定一個初始值，可以添加value屬性，例如value="2006-10-25"。

以下的例子将元件的setDate事件（就是元件的setDate方法被調用）與外部某個回調函數關聯起來：

html這樣聲明：

<div id="foo" inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/>

Javas cript這樣寫：

<script type="text/javas cript">

<!--

function test(rfcDate){

  alert(rfcDate);

}

dojo.event.connect( dojo.widget.byId("foo").datePicker, "setDate", test);

//-->

</script>

當選擇了日期，要将日期設定到input字段中時，會調用test回調函數。

DatePicker元件的用法類似，DropdownDatePicker實際上是對DatePicker元件所做的一個封裝，更适合使用在表單輸入的環境中。