仅允许从 jQuery datepicker 中的选定日期开始每 30 天选择一次答案

【问题标题】：Allow to select only each 30 days from selected date in jQuery datepicker仅允许从 jQuery datepicker 中的选定日期开始每 30 天选择一次
【发布时间】：2021-10-14 00:29:03
【问题描述】：

我必须在我的页面上输入日期：从 - 到。

我需要在“to”输入中动态设置可选日期，如果用户在“from”输入日期01/01/2021 (DD/MM/YYYY) 中选择，则可以在“to”输入中选择只有01/02/2021、01/03/2021 等等。如果用户在“from”输入日期中选择15/11/2021，则在“to”输入中只能选择15/12/2021、15/01/2022等。

这样做的目的是我们的服务只能订购到整月，但可以从客户想要的任何日期开始。

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

请尝试以下代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
$(function () {
    $("#txtFrom").datepicker({
        numberOfMonths: 1,
        defaultDate: "+1w",
        changeMonth: true,
        minDate:"0d",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() + 1);
            $("#txtTo").datepicker("option", "minDate", dt);
        }
    });
    $("#txtTo").datepicker({
        beforeShowDay: isAvailable,
        numberOfMonths: 1,
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() - 1);
            $("#txtFrom").datepicker("option", "maxDate", dt);
        }
    });
    
    function isAvailable(date) {
      var fromDate = $("#txtFrom").val();
      var fromDt = new Date(fromDate).getDate();
      var dt = new Date(date).getDate();
      if (dt == fromDt) {
        return [true,"",""];
      } else {
        return [false,"",""];
      }
    }
    
});
</script>
</head>
<body>
 
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        From:
    </td>
    <td>
        <input type="text" id="txtFrom" />
    </td>
    <td>
        &nbsp;
    </td>
    <td>
        To:
    </td>
    <td>
        <input type="text" id="txtTo" />
    </td>
</tr>
</table>
 
</body>
</html>

【讨论】：

完美，它完全符合我的需要。非常感谢。