javascript - 显示 future 的日期和时间

Question

我想在日期和时间字段组件中显示 future 的日期和时间。

下面是示例代码:

require([
    "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser"
], function(lang, registry, ready) {
    ready(function() {
        var time = registry.byId("time");
        time.set("constraints", lang.mixin(time.get("constraints"), {
            min: 'T08:00:00' 
        }));
    });
}); 

在上面的代码中，min约束用于禁用上午8:00之前的时间，但我想禁用过去的时间，如果用户选择 future 的日期，则时间不应禁用。请建议。谢谢。

--编辑-- jsp页面:

Date<input type="hidden" name="userDate" value="${myDTO.USER_DATE}"/> <input name="USER_DATE" id="oracle" value="${myDTO.USER_DATE}" required="true"/>
Time: <input type="hidden" name="userTime" value="${myDTO.USER_TIME}"/> <input id="time" 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')})"
             data-dojo-props="constraints: { timePattern: 'HH:mm:ss', clickableIncrement: 'T00:15:00', visibleIncrement: 'T00:15:00', visibleRange: 'T01:00:00' }" />

js:

require(["dijit/form/TimeTextBox", "dojo/domReady!"], function(TimeTextBox){

       function showTimeValue(){
            try{
            dom.byId('val').value = document.getElementsByName('time')[0].value;
            }catch(err){}
        }
       new TimeTextBox({
           name: "time",
           value: document.getElementsByName('userTime')[0].value,
           onChange: function(v){ setTimeout(showTimeValue, 0);},
            constraints: {
                timePattern: 'HH:mm:ss',
                clickableIncrement: 'T00:15:00',
                visibleIncrement: 'T00:15:00',
                visibleRange: 'T01:00:00'
            }
        }, "time").startup();
       showTimeValue();
    }); 
// for Dynamic date value
  //code for Date field
  // ....
  new OracleDateTextBox({
                value: document.getElementsByName('userDate')[0].value,
                name: "oracle",
                required: true,
                onChange: function(v){ ...}

Answer 1

您可以通过访问 DateTextBox 的 onchange 回调中的时间元素来实现此目的。您需要将所有时间小部件依赖项注入(inject)到第二个 require 语句中。当日期更改时，检查是否是今天，否则允许用户选择所有时间段。

这是更新的 fiddle :http://jsfiddle.net/8o23tbLu/1/

onChange: function(v){ 
                var useMin, now, time, pad;
                pad = function(n) {
                  n = n + '';
                  return n.length >= 2 ? n : new Array(2 - n.length + 1).join('0') + n;
                }
                useMin = 'T00:00:00';
                now = new Date();
                if ((now.getDate() === v.getDate()) &&
                    (now.getYear() === v.getYear()) &&
                    (now.getMonth() === v.getMonth())
                    ){
                    var hour = pad(now.getHours());
                    var minute = pad(now.getMinutes());
                    useMin = 'T' + hour + ':' + minute + ':00';
                } 
                time = registry.byId("time");
                time.set("constraints", lang.mixin(time.get("constraints"), {
                    min: useMin 
                }));
                setTimeout(showServerValue, 0);
            }