MrMaestro MrMaestro - 2 months ago 7
Javascript Question

Auto changing field javscript based on another field

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

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.

demo

https://jsfiddle.net/xgyh58an/

Comments