i have two date picker
i need to set add condition based on first date picker
if first date picker selected current date then should be
second date picker will select after next date of selected in date picker - 1
<input type="text" id="datepicker"/>
<input type="text" id="datepicker2"/>
$(function() {
$( "#datepicker1" ).datepicker({
minDate:0,
dateFormat: "yy-mm-dd" });
});
$(function() {
$( "#datepicker2" ).datepicker({
dateFormat: "yy-mm-dd" });
});
how i can do in jquery??
Set an onSelect
handler to the first datepicker, within the handler update minDate
option of the second datepicker. Where use getDate
method to get the selected Date object.
$(function() {
let $dt1 = $("#datepicker1").datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
// attach handler
onSelect: function(dateString, instance) {
// update minDate option of second datepicker
// create a Date instance using datepicker instance
// where increment the day value
// $dt2.datepicker('option', 'minDate', new Date(instance.selectedYear, instance.selectedMonth, ++instance.selectedDay));
// or you can get Date from jQuery object
// or get jquery instance from instance
// like : instance.input or $("#datepicker1")
let date = $dt1.datepicker('getDate');
// or let date = instance.input.datepicker('getDate');
// increment day
date.setDate(date.getDate() + 1)
$dt2.datepicker('option', 'minDate', date);
// to set min date as datepickers 1 value simply use
// $dt2.datepicker('option', 'minDate', dateString );
// incrementing day from a customized data string is hard that's the reason for using datepicker instance
}
});
// cache the reference of input element
var $dt2 = $("#datepicker2").datepicker({
dateFormat: "yy-mm-dd"
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="datepicker1" />
<input type="text" id="datepicker2" />