jQuery UI 动态启用日期

Posted 2023-05-08

【中文标题】jQuery UI 动态启用日期

【英文标题】：jQuery UI enable date dynamically

【发布时间】：2021-10-24 20:39:59

【问题描述】：

我正在为预订系统使用 jQuery UI 日期选择器。这是一个外观示例：

如您所见，27 日已禁用。这意味着如果用户选择 27 日之前的入住日期，他应该能够选择 27 日之前或 27 日之前的退房日期，但不能超过：

（禁用日期意味着它可以接受退房但不能接受入住）

我正在动态设置maxDate，以便用户无法选择超出该日期的退房日期：

$("#datepicker").datepicker('option', 'maxDate', minDate.toDate());

现在maxDate 是 27 日，但由于它在初始化时被禁用，用户无法选择它作为退房日期。因此，我想要完成的是，如果用户在此之前选择了入住日期，则启用 27 日，如果用户取消选择入住日期，则将其禁用。

这里有一个JSFiddle 来说明问题。

【问题讨论】：

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

@Twisty 我用 jsfiddle 更新了帖子

我看到了小提琴。我会努力的。因此，用户选择了一个日期，例如 21 年 8 月 25 日，那么 21 年 8 月 27 日应该可用，并且所有其他日期都关闭，对吗？如果他们先选择 8/28/21 怎么办？

没错，如果用户选择 8/25/21，则 8/27/21 应该可用。如果用户选择 21 年 8 月 28 日签到，则不会考虑禁用日期（21 年 8 月 27 日），因为我正在阻止向后选择范围。

【参考方案1】：

考虑以下几点：

https://jsfiddle.net/Twisty/vt9Lqy1f/96/

JavaScript

$(function() 

  let finalPriceObj = 
      '2021-08-24': 
        'newRate': "10000"
      ,
      '2021-08-25': 
        'newRate': "10000"
      ,
      '2021-08-26': 
        'newRate': "10000"
      ,
      '2021-08-28': 
        'newRate': "10000"
      ,
      '2021-08-29': 
        'newRate': "10000"
      ,
      '2021-08-30': 
        'newRate': "10000"
      ,
      '2021-08-31': 
        'newRate': "10000"
      ,
      '2021-09-01': ,
    ,
    missingDates = ['2021-08-27'],
    datepicker = $('#datepicker'),
    checkInDate = $("#checkInDate"),
    checkOutDate = $("#checkOutDate"),
    selectedDates = [];

  function dateToString(dt) 
    if (dt instanceof Date) 
      return $.datepicker.formatDate("yy-mm-dd", dt);
    
    return "";
  

  function stringToDate(st) 
    if (typeof st == "string") 
      return $.datepicker.parseDate("yy-mm-dd", st);
    
    return null;
  

  datepicker.datepicker(
    minDate: 1,
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) 
      var skipMissing = (selectedDates.length >= 1 ? true : false);
      var show = true,
        highlight = "";
      if (!skipMissing && (missingDates.indexOf(dateToString(date)) >= 0)) 
        show = false;
      
      if (selectedDates.length == 1) 
        if (date == selectedDates[0]) 
          highlight = "dp-highlight";
        
      
      if (selectedDates.length == 2) 
        if (date == selectedDates[0]) 
          highlight = "dp-highlight";
        
        if (date == selectedDates[1]) 
          highlight = "dp-highlight";
        
        if ((date > selectedDates[0]) && (date < selectedDates[1])) 
          highlight = "dp-range";
        
      

      return [show, highlight];
    ,
    onSelect: function(dString, dInst) 
      if (selectedDates.length == 0) 
        checkInDate.html(dString);
        selectedDates.push(stringToDate(dString));
        if (stringToDate(dString) < stringToDate(missingDates[0])) 
          datepicker.datepicker("option", "maxDate", missingDates[0]);
        
       else if (selectedDates.length == 1) 
        checkOutDate.html(dString);
        selectedDates[1] = stringToDate(dString);
       else 
        checkInDate.html("");
        checkOutDate.html("");
        selectedDates = [];
        datepicker.datepicker("option", "maxDate", "");
      
      datepicker.datepicker("refresh");
      console.log(dString, selectedDates);
    
  );

);

Array.prototype.unique = function() 
  var a = this.concat();
  for (var i = 0; i < a.length; ++i) 
    for (var j = i + 1; j < a.length; ++j) 
      if (a[i] === a[j])
        a.splice(j--, 1);
    
  

  return a;
;

我不经常使用 MomentJS，我需要的一切都可以从 jQuery UI 获得。如果您喜欢使用它，请自行选择，只需在需要的地方进行调整。

所以你有几个不同的州要解决：

未选择日期 已选择一个日期 选择了两个日期 重置选择

用户和脚本需要知道选定的日期，所以我创建了一个数组来包含这些日期。它将包含每个选定日期的 Date 对象。这也使得执行日期比较变得更加容易。

在我们的第一个状态中，我们只想禁用missingDates，所以如果当前的date 匹配，我们就禁用它。我们将知道我们处于第一个状态，因为selectedDates 将不包含日期，长度将为0。

在我们的第二种状态中，我们将跳过缺少的日期，因为 maxDate 将被设置。我们知道我们处于第二种状态，因为已经设置了一个日期，我们正在等待下一个选择。

在我们的第三个状态中，我们选择了两个日期。我们要确保突出显示范围。

我们的最终状态，我们假设用户想要重新选择日期。