【问题标题】:Jquery DatePicker Set min and max dateJquery DatePicker 设置最小和最大日期
【发布时间】:2020-11-23 19:37:18
【问题描述】:

我正在尝试制作一个具有日期选择器的网页,但我无法弄清楚如何动态设置最小和最大日期。我想要实现的是

  1. 不允许用户选择今天之前的日期。
  2. 选择日期后,将最大可选日期设置为 1 周,因此用户只能从所选日期的 7 天中进行选择。
    到目前为止,我已经这样做了,但它似乎并没有在每次用户选择新日期时更新。例如,如果我选择今天的日期 (23),它确实将最大日期设置为 29,但如果我将选择的日期从 23 更改为 27,而不是让我从 27 选择到 3,它只允许我选择27到29。有人可以帮帮我吗?谢谢:)

$(document).ready(function() {
           
  $(function() {
      $('#txtArrivalDate').datepicker({
          dateFormat: 'mm-dd-yy',
          minDate: "-0d",
          onSelect: function(date) {
              selectedDate = date;
              $('#txtDepartureDate').datepicker('option', 'minDate', date);
              $("#txtDepartureDate").datepicker("refresh");
              $('#txtDepartureDate').datepicker('option', 'firstDay', date);
              $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
          }, //end of onSelect attribute

          onClose: function(date) {
          }, //end of onClose

      }); //end of txtArrivalDate datepicker
  }); //end of txtArrivalDate function

  $("#txtArrivalDate").change(function() {

      $('#txtDepartureDate').datepicker('option', 'firstDay', selectedDate);
      $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
  });

  $(function() {
      $('#txtDepartureDate').datepicker({
          dateFormat: 'mm-dd-yy'
      });
  }) //end of txtDepartureDate function

}); //end of Ready function
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Arrival Date:-
  <input type="text" id="txtArrivalDate" /> <br /><br />
Departure Date:-
  <input type="text" id="txtDepartureDate" /> <br /><br />

【问题讨论】:

    标签: jquery jquery-ui-datepicker


    【解决方案1】:

    试试这个代码

    $(document).ready(function(){
        $('#txtArrivalDate').datepicker({
            dateFormat: 'mm-dd-yy',
            minDate : "-0d",
        });
    
        $('#txtArrivalDate').change(function(){
            var sDate = $(this).datepicker("getDate");
            var minDate = $(this).datepicker("getDate");
            sDate.setDate(sDate.getDate()+7);
            $('#txtDepartureDate').datepicker({
                dateFormat: 'mm-dd-yy',
                maxDate : sDate,
                minDate : minDate,
            });
        })
    });
    

    祝你好运..

    【讨论】:

    • 谢谢哥们。它按照我的登录名工作。经过一天多的工作,我终于得到了你的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-25
    • 1970-01-01
    相关资源
    最近更新 更多