I'm looking to build a form with 2 datepickers. The chosen data of the first one, must be the minDate of the second one and the maxDate of the second one must be the minDate+10 days.
For example:
Here is my little code I've done just now:
$(document).ready(function () {
$("#from").datepicker({
dateFormat: "dd-mm-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#from').datepicker('getDate');
date2.setDate(date2.getDate() + 10);
$('#to').datepicker('setDate', date2);
//sets minDate to from date + 1
$('#to').datepicker('option', 'minDate', date2);
}
});
$('#to').datepicker({
dateFormat: "dd-mm-yy",
onClose: function () {
var from = $('#from').datepicker('getDate');
console.log(from);
var to = $('#to').datepicker('getDate');
if (to <= from) {
var minDate = $('#to').datepicker('option', 'maxDate');
$('#to').datepicker('setDate', minDate);
}
}
});
});
If you want to set the to
date from +1 day from selected date to +10 day from selected date, this should work:
$("#from").datepicker({
dateFormat: "dd-mm-yy",
minDate: 0,
onSelect: function (date) {
var selectedDate = $('#from').datepicker('getDate').getDate();
var minDate = new Date();
// set min date
minDate.setDate(selectedDate + 1);
var maxDate = new Date();
// set max date
maxDate.setDate(selectedDate + 10);
$('#to').datepicker('setDate', minDate );
//sets minDate to from date + 1
$('#to').datepicker('option', 'minDate', minDate );
//sets maxDate to from date + 10
$('#to').datepicker('option', 'maxDate', maxDate );
}
});
Try this
$("#from_date").datepicker({ format: 'yyyy/mm/dd', autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); var someDate = new Date(selected.date.valueOf()); var numberOfDaysToAdd = 10; someDate.setDate(someDate.getDate() + numberOfDaysToAdd); var dd = someDate.getDate(); var mm = someDate.getMonth() + 1; var y = someDate.getFullYear(); var someFormattedDate = y + '/'+ mm + '/'+ dd; $('#to_date').datepicker('setStartDate', minDate); $('#to_date').datepicker('setEndDate', someFormattedDate); }); $("#to_date").datepicker({ format: 'yyyy/mm/dd', autoclose: true, }).on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); var someDate = new Date(selected.date.valueOf()); var numberOfDaysToAdd = 10; someDate.setDate(someDate.getDate() - numberOfDaysToAdd); var dd = someDate.getDate(); var mm = someDate.getMonth() + 1; var y = someDate.getFullYear(); var someFormattedDate = y + '/'+ mm + '/'+ dd; $('#from_date').datepicker('setStartDate', someFormattedDate); $('#from_date').datepicker('setEndDate', maxDate); });
<!-- Css Link --> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <!-- js Link--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> From Date:- <input type="text" name="" class="form-control" autocomplete="off" id="from_date" placeholder="Select Date"> <br> <br> To Date:- <input type="text" name="" class="form-control" autocomplete="off" id="to_date" placeholder="Select Date">
Thanks to GiuServ I found the solution.
Here the code
$(document).ready(function () {
$("#from").datepicker({
dateFormat: "dd-mm-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#from').datepicker('getDate');
var minDate = new Date();
// set min date
minDate.setDate(date2.getDate() + 1);
var maxDate = new Date();
// set max date
maxDate.setDate(date2.getDate() + 10);
//sets minDate to from date + 1
$('#to').datepicker('option', 'minDate', minDate);
$('#to').datepicker('option', 'maxDate', maxDate);
}
});
$('#to').datepicker({
dateFormat: "dd-mm-yy",
onClose: function () {
var from = $('#from').datepicker('getDate');
console.log(from);
var to = $('#to').datepicker('getDate');
if (to <= from) {
var minDate = $('#to').datepicker('option', 'minDate');
$('#to').datepicker('setDate', minDate);
var maxDate = $('#to').datepicker('option', 'maxDate');
$('#to').datepicker('setDate', maxDate);
}
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.