日期选择器,第二个日期是从第一个日期算起的X天

Datepicker, 2nd date is X days from 1st date

本文关键字:日期 选择器 第二个 第一个      更新时间:2023-09-26

我读过很多不同的答案,但我很好奇为什么我的具体方法(我在网上没有找到)没有得到想要的结果。

用户选择交货日期,之后pickupdate datepicker从交货日期起的最大日期为14天:

$( "#deliverydate" ).datepicker({
  defaultDate: 1,
  onClose: function( selectedDate ) {
    $( "#pickupdate" ).datepicker( "option", "minDate", selectedDate, "defaultDate", selectedDate, "maxDate", (Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 );
  }
});

我认为运行计算的方法是计算selectedDate从今天起的天数,然后加14(因为maxDate可以取一个表示从今天起天数的整数)。

注意我有Date.js

您只能对一个选项使用datepicker("option", option, value)语法。由于$('#pickupdate')日期选择器使用了多个选项,因此需要将它们指定为JSON,就像对$(#deliverydate)所做的那样。像这样:

$('#pickupdate').datepicker({
    minDate: selectedDate,
    defaultDate: selectedDate,
    maxDate: ((Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 )
});

有关工作演示,请参阅此JSFiddle。

另请参阅关于使用带有多个选项的jQuery Datepicker的堆栈溢出问题。

最后,你应该考虑改为Moment.js。Date.js的上一个版本是2007年,所以很长一段时间以来都没有任何主要或次要的版本。

经过大量挖掘后。。。jQuery日期选择器文档处理不好。

两个重要事实:1.日期选择器只能初始化一次,此后必须使用option才能更改设置2.根据Datepicker,你应该能够在选项-值对的映射中提供多个选项,但我所做的一切都无法实现,而且他们的文档看起来就像一个选项,所以。。。不管怎样,我只单独设置了3个选项。

我让它工作的方式如下:

$( "#deliverydate" ).datepicker({
  defaultDate: 1, // 1 day from today
  numberOfMonths: 1,
  minDate: 0,
  maxDate: <%= ENV["Days_in_advance"].to_i %>,
  dateFormat: "M d, yy", 
  // despite the docs, it doesnt' look like you can set multiple options at once, so I'm doing it individually 3X below. 
  onClose: function( selectedDate ) {
    deliverydate = Date.parse(selectedDate);
    $( "#pickupdate" ).datepicker("option", 
      { defaultDate: ((deliverydate - Date.today())/1000/60/60/24 + 1 ) });
    // day after deliverydate 
    $( "#pickupdate" ).datepicker("option", 
      { minDate: ((deliverydate - Date.today())/1000/60/60/24 ) });
    // same day as deliverydate
    $( "#pickupdate" ).datepicker("option", 
      { maxDate: ((deliverydate - Date.today())/1000/60/60/24 + <%= ENV["Max_days_of_rental"].to_i %> )});
    // upper limit on rental days
  }
});
$( "#pickupdate" ).datepicker({
  // this is triggered on DOM load and is overwritten the minute a deliverydate is selected per the onClose 
  defaultDate: 1, // 1 day from today
  numberOfMonths: 1,
  minDate: 0,
  maxDate: <%= ENV["Max_days_of_rental"].to_i %>,
  dateFormat: "M d, yy"
});