禁用时间中的下拉列表
disable time in time dropdownlist
请建议如何从时间下拉列表中隐藏过去的时间,在每个下拉列表中显示小时和分钟。我的要求是,根据用户选择的日期,过去的时间不应显示在"小时和分钟"下拉列表中,或者可以禁用过去的时间,这样用户就无法选择过去的时间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/。谢谢
dojo1.9.0库使用dojo1.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;
});
});
希望有帮助:)
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 语义ui如何使用javascript启用或禁用下拉列表
- 引导下拉列表只工作一半的时间
- 根据在 html 下拉列表中选择的国家/地区填写当前时间
- 根据下拉列表中所选的值设置日期时间选择器格式
- 禁用时间中的下拉列表
- 时间下拉列表
- 显示时间的下拉列表
- jquery时间选择器不显示下拉列表
- 我想验证何时从下拉列表中选择的时间是过去的当前时间
- 我想要一个引导时间选择器从下拉列表中选择开始时间,其中持续时间间隔为30分钟