禁用時間下拉列表

Question

請建議如何從時間下拉列表中隱藏過去的時間，在每個下拉列表中顯示小時和分鐘。 我的要求是，根據用戶選擇的日期，過去時間不應顯示在小時和分鐘下拉列表中或過去時間可以禁用，以便用戶無法選擇過去的時間，如在http://jsfiddle.net/8o23tbLu/13/中的時間字段中所做的那樣 下面是示例代碼：

<script> 
require(["dojo/_base/declare", "dijit/form/DateTextBox", "dojo/date/locale", "dojo/dom", "dojo/_base/lang", "dijit/registry", "dojo/ready", "dojo/domReady!", "dijit/form/TimeTextBox", "dojo/parser"], 

function (declare, DateTextBox, locale, dom, lang, registry, ready) { 
    var pad, update_current_available_times, get_hour_string; 
    pad = function (n) { 
     n = n + ''; 
     return n.length >= 2 ? n : new Array(2 - n.length + 1).join('0') + n; 
    }, 
    get_hour_string = function (t) { 
     var hour = pad(t.getHours()); 
     var minute = pad(t.getMinutes()); 
     return 'T' + hour + ':' + minute + ':00'; //current time 1 
    }, 
    update_current_available_times = function (seldate) { 
     var useMin, now, time, pad; 
     if (typeof seldate === 'undefined') { 
      seldate = new Date(document.getElementsByName('userDate')[0].value); 
     } 
     useMin = 'T00:00:00'; 
     now = new Date(); 
     if ((now.getDate() === seldate.getDate()) && (now.getYear() === seldate.getYear()) && (now.getMonth() === seldate.getMonth())) { 
      useMin = get_hour_string(now); 
     } 
     time = registry.byId("time");//user selected time 
     alert("time: " + time); 
     time.set("constraints", lang.mixin(time.get("constraints"), { 
      min: useMin 
     })); 
    }; 

    declare("OracleDateTextBox", DateTextBox, { 
     oracleFormat: { 
      selector: 'date', 
      datePattern: 'dd-MMM-yyyy', 
      locale: 'en-us' 
     }, 
     value: document.getElementsByName('userDate')[0].value, // prevent parser from trying to convert to Date object 
     postMixInProperties: function() { // change value string to Date object 
      this.inherited(arguments); 
      // convert value to Date object 
      this.value = locale.parse(this.value, this.oracleFormat); 
      this.set('constraints', { 
       min: new Date(), 
       required: true 
       // datePattern: 'dd-MMM-yyyy' 
      }); 
     }, 
     // To write back to the server in Oracle format, override the serialize method: 
     serialize: function (dateObject, options) { 
      return locale.format(dateObject, this.oracleFormat).toUpperCase(); 
     } 
    }); 

    new OracleDateTextBox({ 
     name: "oracle", 
     required: true, 
     onChange: function (v) { 
      update_current_available_times(v); 
      setTimeout(showServerValue, 0); 
     } 
    }, "oracle").startup(); 

    ready(function() { 
     // Set the current time when starting up 
     var time = registry.byId("time"); 
    time.setValue(document.getElementsByName('userTime')[0].value); 
     update_current_available_times(); 
    }); 
}); 

</script> 

請找到該代碼http://jsfiddle.net/8o23tbLu/13/。謝謝。

Answer 1

存在與道場1.9.0庫使用dojo.1.10.1或問題後

這裏是小提琴：http://jsfiddle.net/7de4onun/27/
HTML：

Disabled Past time: 
<input id="time" data-dojo-type="dijit/form/TimeTextBox" required="true" 
data-dojo-props="constraints: { timePattern: 'HH:mm:ss', clickableIncrement: 'T00:15:00', visibleIncrement: 'T00:15:00', visibleRange: 'T01:00:00' }" /> 
<br /> <br /> 
Date : 
<input type="hidden" name="selDate" value=""/><input name="SELECTED_DATE" id="oracle" value="" required="true"/> 

Hours: 
<input id="selHours" name="selHours" maxlength="3" style="width:50px;" data-dojo-type="dijit/form/TimeTextBox" width="10px" required="true" data-dojo-props="constraints: { timePattern: 'HH', clickableIncrement: 'T01:00:00', visibleIncrement: 'T01:00:00', visibleRange: 'T24:00:00' }" data-dojo-id="dojoSelHours"/> 

Minutes: 
<input id="selMins" name="selMins" maxlength="3" style="width:50px;" data-dojo-type="dijit/form/TimeTextBox" required="true" data-dojo-props="constraints: {timePattern: 'mm', clickableIncrement: 'T02:05:00',visibleIncrement: 'T02:00:00',visibleRange: 'T02:55:00' }" data-dojo-id="dojoSelMins" />  

的JavaScript：

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: new Date() 
     })); 
    }); 
}); 


require(["dojo/_base/declare", "dijit/form/DateTextBox", "dojo/date/locale", "dojo/dom", "dojo/domReady!"], 
     function(declare, DateTextBox, locale, dom){ 
       declare("OracleDateTextBox", DateTextBox, { 
       oracleFormat: {selector: 'date', datePattern: 'dd-MMM-yyyy', locale: 'en-us'}, 
       value: "", // prevent parser from trying to convert to Date object 
       postMixInProperties: function(){ // change value string to Date object 
        this.inherited(arguments); 
        // convert value to Date object 
        this.value = locale.parse(this.value, this.oracleFormat); 
        this.set('constraints', { 
         min: new Date(), 
         required: true 
         // datePattern: 'dd-MMM-yyyy' 
        }); 

       }, 
       // To write back to the server in Oracle format, override the serialize method: 
       serialize: function(dateObject, options){ 
        return locale.format(dateObject, this.oracleFormat).toUpperCase(); 
       } 
     }); 
     function showServerValue(){ 
      try{ 
       dom.byId('toServerValue').value = document.getElementsByName('oracle')[0].value; 
       }catch(err){} 

     } 
     new OracleDateTextBox({ 
      name: "oracle", 
      value: document.getElementsByName('selDate')[0].value, 
      required: true, 
      onChange: function(v){ setTimeout(showServerValue, 0); 
    dojoSelHours.constraints.min= new Date();; 
    var toDayMinutes=new Date(); 
    toDayMinutes.setHours(2); 
    dojoSelMins.constraints.min= toDayMinutes; 
      } 
     }, "oracle").startup(); 
     showServerValue(); 
     }); 


require([ 
      "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser" 
     ], function(lang, registry, ready) { 
      ready(function() { 
       var timeH = registry.byId("selHours"), 
       timeM = registry.byId("selMins"); 
       document.getElementById('selHours').value = document.getElementsByName('tHours')[0].value; 
       document.getElementById('selMins').value = document.getElementsByName('tMinutes')[0].value; 
      }); 
     }); 

希望它有幫助:)