文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建Jquery ui日期选择器范围

问如何创建Jquery ui日期选择器范围
EN

Stack Overflow用户

提问于 2019-12-12 16:29:03

回答 1查看 49关注 0票数 1

我有两个输入字段的开始和结束日期，我需要如果用户选择开始日期，使只有14天可供选择的结束日期，我该怎么做？

下面是我的html代码：

                <label for="start_date">Date From</label>
                <input id="start_date" required="true" width="276"/>


                <label for="end_date">Date To</label>
                <input id="end_date" required="true" width="276"/>

下面是我的脚本：

        <script>
            $('#start_date').datepicker({
                uiLibrary: 'bootstrap4'
            });
        </script>
        <script>
            $('#end_date').datepicker({
                uiLibrary: 'bootstrap4',
                numberOfMonths: 2

            });
        </script>

datepicker

jquery-ui-datepicker

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-12 17:24:13

为此，请使用max-date和min-date。

$("#start_date").datepicker({
    onSelect: function(dateText, inst) {
        var olddate = new Date($(this).val());
        var newdate = new Date();
        var numberOfDaysToAdd = 14;
        newdate.setDate(olddate.getDate() + numberOfDaysToAdd);           
        $("#end_date").datepicker({
          minDate: olddate,
          maxDate: newdate
        });       
    }
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" src="dist/jquery.daterangepicker.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<label for="start_date">Date From</label>
<input id="start_date" required="true" width="276"/>


<label for="end_date">Date To</label>
<input id="end_date" required="true" width="276"/>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59300426

复制

相似问题

问如何创建Jquery ui日期选择器范围
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建Jquery ui日期选择器范围EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建Jquery ui日期选择器范围
EN