如何使用dijit/form/TimeTextBox？

Question

<input type="text" name="date1" id="time1" value="T15:00:00" 
data-dojo-type="dijit/form/TimeTextBox" 
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})" 
required="true" /> 

這是我一直在努力的代碼。在這裏，我需要將差異顯示爲1小時，但下拉顯示差異時間爲15分鐘。同時，我想顯示從上午8點到下午2點的限制 有人可以幫我解決這個問題嗎？

Answer 1

使用dojo-data-props來設置約束。首先爲您的增量這是目前設定爲15分鐘，一個小時：

constraints: { 
    clickableIncrement: 'T01:00:00', 
    visibleIncrement: 'T01:00:00' 
} 

要設置可用的時間增量的範圍首先你需要計算的最小和最大：

//today 
var today = new Date(); 

//today 8am 
var min = new Date(
    today.getYear(), 
    today.getMonth(), 
    today.getDay(), 
    8, 0, 0); 

//today 2pm 
var max = new Date(
    today.getYear(), 
    today.getMonth(), 
    today.getDay(), 
    14, 0, 0); 

然後定義他們在你的約束：

constraints: { 
    min: min, 
    max: max 
} 

你也應該選擇的值設置爲您的數據道場道具中，使他們落入你的約束範圍內：

value: min 

這將總結的東西是這樣的：

<script> 
var today = new Date(); 
var min = new Date(
    today.getYear(), 
    today.getMonth(), 
    today.getDay(), 
    8, 0, 0); 
var max = new Date(
    today.getYear(), 
    today.getMonth(), 
    today.getDay(), 
    14, 0, 0); 
</script> 
<input type="text" name="date1" id="time1" value="T15:00:00" 
data-dojo-type="dijit/form/TimeTextBox" onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})" 
required="true" data-dojo-props="value: min, constraints:{ min: min, max: max, clickableIncrement: 'T01:00:00', visibleIncrement: 'T01:00:00'}"/> 

這裏有Plunker工作示例：http://plnkr.co/edit/Fl0gQnzwY6RjyjA2syPZ