Question

请建议如何从时间下拉列表中隐藏过去时间，在每个下拉列表中显示小时和分钟。我的要求是，根据用户选择的日期，过去时间不应显示在小时和分钟下拉列表或过去时间可以被禁用，以便用户无法选择过去的时间，如同{{ 3}} 以下是示例代码：

<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

dojo 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;
            });
       });

希望有所帮助：）

禁用时间下拉列表

1 个答案: