I have just downloaded flatpickr which is a datetime picker in javascript.
A few quick references: Examples, Formating tokens & Events
I am trying to figure out how to use 2 datetime pickers which need to depend on one another to avoid data range selection errors.
So far I have:
Made sure user can only choose dates in 2019. The time for inputText1 is always 00:00:00.
To do:
Set inputText2 minDate equal to inputText1 minDate using inputText1 onChange event.
inputText2 times must always end in 23:59:59
$(document).ready(function(){
$("#inputText1").flatpickr({
minDate: "2019-01",
maxDate: "2019-12",
dateFormat: "Y-m-d H:i:S",
// When this input changes, we set a min start date for input2 always equal or greater than from date.
onChange: function(selectedDates, dateStr, instance) {
$("#reportFromCustom").html(dateStr);
// Any ideas?
//$("#inputText2").flatpickr({ minDate: dateStr });
}
});
$("#inputText2").flatpickr({
dateFormat: "Y-m-d 23:59:59",
// When this input changes, we set a min start date for input2 always equal or greater than from date.
onChange: function(selectedDates, dateStr, instance) {
$("#reportToCustom").html(dateStr);
}
});
});<script src=".4.1/jquery.min.js"></script>
<link rel="stylesheet" href=".min.css">
<script src=""></script>
<table>
<th>
<tr>
<strong>Select range</strong>
</tr>
</th>
<tr>
<td>From: <input type="text" id="inputText1"></td>
<td>To:<input type="text" id="inputText2"></td>
</tr>
</table>I have just downloaded flatpickr which is a datetime picker in javascript.
A few quick references: Examples, Formating tokens & Events
I am trying to figure out how to use 2 datetime pickers which need to depend on one another to avoid data range selection errors.
So far I have:
Made sure user can only choose dates in 2019. The time for inputText1 is always 00:00:00.
To do:
Set inputText2 minDate equal to inputText1 minDate using inputText1 onChange event.
inputText2 times must always end in 23:59:59
$(document).ready(function(){
$("#inputText1").flatpickr({
minDate: "2019-01",
maxDate: "2019-12",
dateFormat: "Y-m-d H:i:S",
// When this input changes, we set a min start date for input2 always equal or greater than from date.
onChange: function(selectedDates, dateStr, instance) {
$("#reportFromCustom").html(dateStr);
// Any ideas?
//$("#inputText2").flatpickr({ minDate: dateStr });
}
});
$("#inputText2").flatpickr({
dateFormat: "Y-m-d 23:59:59",
// When this input changes, we set a min start date for input2 always equal or greater than from date.
onChange: function(selectedDates, dateStr, instance) {
$("#reportToCustom").html(dateStr);
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr/npm/flatpickr"></script>
<table>
<th>
<tr>
<strong>Select range</strong>
</tr>
</th>
<tr>
<td>From: <input type="text" id="inputText1"></td>
<td>To:<input type="text" id="inputText2"></td>
</tr>
</table>2 Answers
Reset to default 6You are searching for set() method
set(option, value)
var date1 = $("#inputText1").flatpickr({
minDate: "2019-01",
maxDate: "2019-12",
dateFormat: "Y-m-d H:i:S",
onChange: function(selectedDates, dateStr, instance) {
date2.set('minDate', dateStr)
}
});
var date2 = $("#inputText2").flatpickr({
dateFormat: "Y-m-d 23:59:59",
onChange: function(selectedDates, dateStr, instance) {
date1.set('maxDate', dateStr)
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr/npm/flatpickr"></script>
<table>
<th>
<tr>
<strong>Select range</strong>
</tr>
</th>
<tr>
<td>From: <input type="text" id="inputText1"></td>
<td>To:<input type="text" id="inputText2"></td>
</tr>
</table>After some more testing I was able to e up with this solution.
I have basically added a flatpicker inside of the onchange event of the parent.
$(document).ready(function(){
$("#reportCustomDisplay").html('Nothing Selected');
// Initially always disabled.
$("#inputText2").prop('disabled', true);
// DATE FROM
$("#inputText1").flatpickr({
// First Month of year
minDate: "2019-01-01",
// Last Month of year
maxDate: "2019-12-31",
// Format it to a mySQL datetime friendly format
dateFormat: "Y-m-d H:i:S",
// When this input changes, we set a min start date
// for input2 always equal or greater than this.
onChange: function(selectedDates, dateStr, instance) {
// Set display from
$("#reportFromCustom").html(dateStr);
// Enable inputText2
$("#inputText2").prop('disabled', false);
// Set display to
$("#reportToCustom").html('0000-00-00 00:00:00');
// Set display progress
$("#reportCustomDisplay").html('..to when?');
// Recreate inputText2 with relative start date
$("#inputText2").flatpickr({
// inputText1 selected datetime
minDate: dateStr,
// Last Month of year
maxDate: "2019-12-31",
// Format it to a mySQL datetime friendly format
dateFormat: "Y-m-d 23:59:59",
onChange: function(selectedDates, dateStr, instance) {
// Set display to
$("#reportToCustom").html(dateStr);
// Set display progress
$("#reportCustomDisplay").html('Click Get report!');
}
});
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr/npm/flatpickr"></script>
<table>
<th>
<tr>
<strong>Select range v2</strong>
</tr>
</th>
<tr>
<td>From: <input type="text" id="inputText1"></td>
<td>To:<input type="text" id="inputText2"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><strong>Status:</strong> <span id="reportCustomDisplay"></span></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>From: <span id="reportFromCustom"></span></td>
<td>To: <span id="reportToCustom"></span></td>
</tr>
</table>