dijit/form/DateTextBox

簡介

在應用程式裡，處理日期這㮔資料也是個很令人頭痛的問題，因為不同的國家對日期的格式有不同的要求，年月日的前後排列順序也大不相同，連中間的分隔號，也各有所好。 dojo 的日期一律採用 ISO 8601 的日期格式做為儲存的標準格式，如果遇到不同的要求，才去做日期格式的轉換。

dijit/form/DateTextBox 提供了一個簡便的日期輸入方式，使用者可以直接輸入日期，或由下拉式的月曆中挑選所要輸入的日期。月曆也會根據語言的設定以適當的文字顯示。

範例

範例中用宣告法建立了一個 dijit/form/DateTextBox 的輸入欄位，另外還建立了一個按鈕以讀取欄位的輸入值，並以 alert() 函式顯示在畫面上。由讀取值可以看出 ISO 8601 的標準日期格式。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%; 
    padding-top:20px;
}
.dijitInputField {
    font-family:courier;
}
</style>

用 .dijitInputField class 來定義 dijit/form/DateTextBox 的輸入及顯示字型，用 input 標記的定義沒有用，因為在最終的產生 dijit 的 HTML 裡，真正的 input 標記的 type="hidden"，被隱藏了，這種情況在很多的 dijit 裡都會發生，所以當 CSS 的設定無效時，得進到「開發者工具」裡去看最終 HTML 的長相，才能知道真正要設定那個 class 的樣式才會產生效果。

HTML

<body class="claro">
    Claim Date:
    
    
</body>

第 3~16 行用宣告法定義一個 dijit/formDateTextBox。各屬性的定義如下：
required:true 表示此欄位為必須輸入的欄位。
autoWidth 設定如果為 true 時，欄位的寬度會自動設定與下拉式月曆同寬。
constraints 設定對欄位的限制條件：
datePattern 設定欄位輸入及顯示的格式。
min 設定日期的最小值。
max 設定日期的最大值，此處設定為輸入的當日。
formatLength 設定顯示時的格式為短式 (short) 或長式 (long)，但此欄位設定為長式時，會和 datePattern 的設定互斥，以 datePattern 的設定為優先。
hasDownArrow 的設定若為 false 時，欄位右邊不會出現向下的小箭頭。但當游標進入欄位時，仍會出現月曆。
promptMessage 為輸入提示訊息。
missingMessage 為欄位未輸入時的警告訊息。
invalidMessage 為輸入資料格式不正確時的錯誤訊息。
toolgipPosition 值為一陣列，列出顯示訊息時，訊息出現所在位置的優先順序。

Script

第 18~21 行設定按鈕按下時所要呼叫的函式。

熊伯的外接硬碟

2015年10月14日星期三