Geek Answers Handbook

Change minstate / startDate file upload date from another datepicker

There are two datepickers on my page, both of which are bootable. The condition is only that the start date has never been high relative to the end date. Means End Date The attribute (minDate) must be changed when the start date is changed by datepicker, and the same when the end date of the date has changed, the minrange of the date start date calendar will correspond to the end date value.

Hope you understand my problem.

$(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datetimepicker('setStartDate', minDate); }); $("#enddate").datepicker(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <input type="text" placehoder="Start Date" id="startdate"/> <input type="text" placehoder="End Date" id="enddate"/>
+5
source share
2 answers

I did jsfiddle by doing what you want. As pqdong commented, you called datetimepicker instead of datepicker when setting the end date.

Here is the working javascript:

 $(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datepicker('setStartDate', minDate); }); $("#enddate").datepicker() .on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); $('#startdate').datepicker('setEndDate', maxDate); }); });
+50
source

I do not have enough reputation on Razzildinho, but I want to offer one small addition that will help users to highlight the selected day on the second datepicker. You can do this by adding this line:

 $('#enddate').datepicker('setDate', minDate);

So, in context, it will look like this:

 $(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datepicker('setStartDate', minDate); $('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED }); $("#enddate").datepicker() .on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); $('#startdate').datepicker('setEndDate', maxDate); }); });
+1
source

More articles:


All Articles