Auto changing field javascript based on another field

Question

I am using this datepicker and this timepicker. I want to develop JS code that will determine if the user has selected the current date on the datepicker, if so this will trigger a function for the timepicker that will disable all the times previous to the actual time. I am new to JavaScript, so I have only gotten so far.

HTML:

<input id="datemax" placeholder="Enter the date of incident" type="text"/>

<input id="timemax" placeholder="Enter the time of incident" type="text"/>

Function to disable times before current time, which works but will stay constant no matter what date is chosen:

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

I am wondering what would be required to implement the said JS function into my form. I presume a second function would need to be developed and will need to use var datemax = document.getElementById("datemax").value; to call the value from the date field.

I have developed a bit of incomplete pseudocode code here:

   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;
    {

So for example if a date that is not today is selected, the timepicker will return to it's default functionality without any greyed out times.

Answer 1

Your dedication to the problem is noteworthy, but it was really hard to find any solution in the current scenario below i have proposed one after some explanation , try and tell if that suits your need.

If you had a callback datepicker plugin that gets called after user selects a date say for eg.

datepickr('#datemax',{onSelect:'someFn'});

then

function someFn()
{
    alert('somethings changed');
    var timesAvailable = {
    'timeFormat': 'h:i A',
    'disableTimeRanges': [['12am', getCurrentTime(new Date())]]
    };

    $('#timemax').timepicker(timesAvailable);

}

It would have been very easy but since this is not the case you may have to look for other alternatives.Note that if you do like this and select some date

$("#userInput").change(function(){ 
     //same above code
});

that won't work because events don't fire when you change value by code which is exactly what this plugin does ie. when you click textbox of which plugin is a handler it shows you its dynamic html creation (calendar) you again click somewhere on it , on that too there's an event handler that will populate textbox with some appropriate value depending on the location of your click (date).So in the above code its like assigning a change event handler and expecting $("#userInput").val("11"); to invoke the handler; that doesn't work the alert never pops up.

So the only alternative i could find is not considered a good practice but can help here is that you can assign handlers on the dynamically generated elements which are used to render you calendar ,in this case they use <table> so you can assign a delegated click handler for <td> elements and write your timepicker code in that.

https://jsfiddle.net/xgyh58an/