基于另一个字段自动更改字段javascript答案

【问题标题】：Auto changing field javascript based on another field基于另一个字段自动更改字段javascript
【发布时间】：2017-02-02 15:40:44
【问题描述】：

我正在使用这个datepicker 和这个timepicker。我想开发 JS 代码来确定用户是否在 datepicker 上选择了当前日期，如果是这样，这将触发 timepicker 的一个函数，该函数将禁用实际时间之前的所有时间。我是 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;
    {

因此，例如，如果选择了一个不是今天的日期，时间选择器将返回到它的默认功能，而没有任何灰色的时间。

【问题讨论】：

好吧，正如我之前指出的，你可以挂钩change datepicker 事件吗？我的意思是，如果当用户选择某个日期时，你可以运行一个函数，如果是，那么我可能有一个解决方案。我从未使用过那个插件之前所以当我去查看他们的文档时，我找不到任何事件
是的，这可能是一个相关的解决方案。请贴出来让我看看。

标签： javascript jquery datepicker timepicker

【解决方案1】：

你对这个问题的投入是值得注意的，但是在下面的当前场景中很难找到任何解决方案，我在经过一些解释后提出了一个解决方案，试着判断这是否适合你的需要。

如果您有一个回调 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>，因此您可以为<td> 元素分配一个委托的click 处理程序，并在其中编写您的时间选择器代码。

https://jsfiddle.net/xgyh58an/

【讨论】：

【解决方案2】：

如果我理解正确，您只需要使用jquery change function。

$("elementId").change(function() {
   if(selectedDate == currentDate){
     //disable times previous to the actual time
   }
   else{
   }
});

【讨论】：