我正在使用这个datepicker还有这个timepicker 。我想开发 JS 代码来确定用户是否在日期选择器上选择了当前日期,如果是,这将触发时间选择器的一个函数,该函数将禁用实际时间之前的所有时间。我是 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;
{
例如,如果选择的日期不是今天,时间选择器将返回到其默认功能,而不会显示任何灰色时间。
最佳答案
您对这个问题的奉献精神值得关注,但在当前情况下很难找到任何解决方案,下面我在经过一番解释后提出了一个解决方案,尝试看看是否适合您的需要。
如果您有一个回调日期选择器插件,该插件会在用户选择日期后调用,例如。
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>
这样您就可以分配一个委托(delegate) click
<td>
的处理程序元素并在其中编写时间选择器代码。
关于javascript - 基于另一个字段自动更改字段 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39683458/