我正在使用此datepicker和此timepicker。我想开发JS代码来确定用户是否在datepicker上选择了当前日期,如果是这样,这将触发时间戳的一个函数,该函数将禁用实际时间之前的所有时间。我是JavaScript新手,所以到目前为止我还没有。
HTML:
<input id="datemax" placeholder="Enter the date of incident" type="text"/>
<input id="timemax" placeholder="Enter the time of incident" type="text"/>
禁用当前时间之前的时间的功能,无论选择何种日期,都可以保持不变:
function getCurrentTime(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
return hours + ':' + minutes + ' ' + ampm;
}
var timesAvailable = {
'timeFormat': 'h:i A',
'disableTimeRanges': [[getCurrentTime(new Date()), '12am']]
};
$('#timemax').timepicker(timesAvailable);
我想知道在我的表单中实现所述JS函数需要什么。我假设需要开发第二个函数,并且需要使用var datemax = document.getElementById(“datemax”)。value;从日期字段中调用值。
我在这里开发了一些不完整的伪代码:
function datetimeSelect{
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth();
var year = currentDate.getFullYear();
var datemax = document.getElementById("datemax").value;
if (datemax === currentDate){
//activate
'disableTimeRanges': [[getCurrentTime(new Date()), '12am']] //Can't select any time before now, greyed out
return false;
}
else //datemax does not equal to currentDate
{
$('#timeMax').timepicker();//Standard Datepicker and any time can be selected
return true;
{
因此,例如,如果选择了今天不是今天的日期,时间戳将返回其默认功能而没有任何灰色时间。
答案 0 :(得分:0)
如果我对你说错,你只需要使用jquery change function。
$("elementId").change(function() {
if(selectedDate == currentDate){
//disable times previous to the actual time
}
else{
}
});
答案 1 :(得分:0)
你对这个问题的专注是值得注意的,但是在下面的当前场景中很难找到任何解决方案,我在提出一些解释之后提出了一个解决方案,试着告诉你是否符合你的需要。
如果您有一个回调datepicker插件,在用户选择日期后调用,例如。
datepickr('#datemax',{onSelect:'someFn'});
然后
function someFn()
{
alert('somethings changed');
var timesAvailable = {
'timeFormat': 'h:i A',
'disableTimeRanges': [['12am', getCurrentTime(new Date())]]
};
$('#timemax').timepicker(timesAvailable);
}
这本来很容易,但由于情况并非如此,您可能需要寻找其他替代方案。请注意,如果您喜欢这样并选择一些日期
$("#userInput").change(function(){
//same above code
});
这不起作用,因为当您通过代码更改值时事件不会触发,这正是此插件所做的事情,即。当你单击哪个插件是一个处理程序的文本框时,它会向你显示它的动态html创建(日历),你再次单击它上面的某个地方,那里也有一个事件处理程序,它将根据你点击的位置填充一些适当的值的文本框(在上面的代码中,它就像分配一个change
事件处理程序并期望$("#userInput").val("11");
调用处理程序一样;这不起作用警报永远不会弹出。
所以我能找到的唯一选择并不是一个好习惯,但可以帮助你在动态生成的元素上分配处理程序,这些元素用于渲染日历,在这种情况下,它们使用<table>
所以您可以为click
元素分配委派的<td>
处理程序,并在其中编写您的时间戳代码。