如何使用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
}

您還應該將所選值設置為data-dojo-props內的值，這樣它們就不會超出您的約束范圍：

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