jqueryui datepicker - 保持两个日期之间的偏移量

jqueryui datepicker - maintain offset between two dates

本文关键字：两个 日期 之间 偏移量 datepicker jqueryui      更新时间：2023-09-26

我正在使用jqueryui datepicker （http://jqueryui.com/datepicker/#date-range）来选择用于安排事件的范围。我试图在更改开始日期时保持两个日期之间的偏移量。我能够在另一篇文章中找到一个合理的解决方案（使用 Jquery 日期选择器添加具有选定日期的日期），但我发现当您选择当前所选开始日期之前的日期时（例如：将开始日期从 10/20/2013 更改为 10/13/2013），它会返回选择的最后日期而不是偏移日期。

<script>  
$(document).ready(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>

我想出了问题。我将 #date_end 值的 minDate 设置为 #date_start 的当前值。因此，它会自动将日期选择更正为最新的可用日期，即 #date_start 中最后选择的日期。因此，为了解决这个问题，我只需在尝试更改 #date_end 之前更改 minDate。

新代码： 

<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 diffDays = daydiff(parseDate($('#curStartDate').val()), parseDate($('#date_end').val()));
      if(!isNumber(diffDays)) diffDays = 0; 
      var date2 = $('#date_start').datepicker('getDate');
      date2.setDate(date2.getDate()+diffDays);
      $( "#date_end" ).datepicker( "option", "minDate", selectedDate );
      $('#date_end').datepicker('setDate', date2);
     $( "#curStartDate" ).val(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);
}
function parseDate(str) {
  var mdy = str.split('-');
  return new Date(mdy[0], mdy[1]-1, mdy[2]);
}
function daydiff(first, second) {
  return (second-first)/(1000*60*60*24);
}
</script>
相关文章：