Response title
This is preview!
jqueryui datepicker maintain offset between date range
in Using jQuery UI
•
9 years ago
I am using the jqueryui datepicker (http://jqueryui.com/datepicker/#date-range) to select a range for scheduling an event. I am attempting to maintain the offset between the two dates when the start date is changed. I was able to find a reasonable solution in another post (add-a-day-with-selected-date-using-jquery-datepicker) but I found that when you pick a date that is before the currently selected start date (Example: change the start date from 10/20/2013 to 10/13/2013) it returns the last date that was selected instead of the offset date.
- <script>
- $(function() {
- $( "#date_start" ).datepicker({
- changeMonth: true,
- numberOfMonths: 1,
- dateFormat: "yy-mm-dd",
- showOn: "both",
- buttonImage: "images/smCal.gif",
- buttonImageOnly: true,
- constrainInput: true,
- onSelect: function( selectedDate ) {
- var stDate = $( "#curStartDate" ).val().split('-');
- var enDate = $( "#date_end" ).val().split('-');
- var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
- var firstDate = new Date(stDate[0],stDate[1],stDate[2]);
- var secondDate = new Date(enDate[0],enDate[1],enDate[2]);
- var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
- if(!isNumber(diffDays)) {
- diffDays = 0;
- }
- var date2 = $('#date_start').datepicker('getDate');
- date2.setDate(date2.getDate()+diffDays);
- $('#date_end').datepicker('setDate', date2);
- $( "#curStartDate" ).val(selectedDate)
- $( "#date_end" ).datepicker( "option", "minDate", selectedDate );
- }
- });
- $( "#date_end" ).datepicker({
- changeMonth: true,
- numberOfMonths: 1,
- dateFormat: "yy-mm-dd",
- showOn: "both",
- buttonImage: "images/smCal.gif",
- buttonImageOnly: true,
- constrainInput: true,
- minDate:$( "#date_start" ).val()
- });
- $( "#curStartDate" ).val($( "#date_start" ).val());
- });
- function isNumber(n) {
- return !isNaN(parseFloat(n)) && isFinite(n);
- }
- </script>
1