脚本不适用于日期选择器答案

【问题标题】：Script Not Working For Datepicker脚本不适用于日期选择器
【发布时间】：2015-11-13 04:13:56
【问题描述】：

我正在尝试为我的日期选择器设置开始/结束日期，并随身携带我在 Bootstrap-Datepicker 中找到的脚本。我密切关注文档，但脚本只触发.datepicker，它将<input> 变成日期选择器，但行为不是我想要的。请来自社区的一些帮助？

脚本：

<script>
        $(document).ready(function () {
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

            var checkin = $('#dateFrom').datepicker({
                onRender: function (date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
            }).on('changeDate', function (ev) {
                if (ev.date.valueOf() > checkout.date.valueOf()) {
                    var newDate = new Date(ev.date)
                    newDate.setDate(newDate.getDate() + 1);
                    checkout.setValue(newDate);
                }
                checkin.hide();
                $('#dateTo')[0].focus();
            }).data('datepicker');
            var checkout = $('#dateTo').datepicker({
                onRender: function (date) {
                    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                }
            }).on('changeDate', function (ev) {
                checkout.hide();
            }).data('datepicker');
        });
    </script>

这是我的代码：

<div class="form-group">
                    <div class="row">
                        <label for="dateFrom" class="col-md-2 control-label">Date From:</label>
                        <div class="col-md-4">
                            <div class="input-group date">
                                <input type="text" id="dateFrom" name="dateFrom" class="form-control col-sm-2" required placeholder="mm/dd/yyyy"/>
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <label for="dateTo" class="col-md-2 control-label">Date To:</label>
                        <div class="col-md-4">
                            <div class="input-group date">
                                <input type="text"  id="dateTo" name="dateTo" class="form-control col-sm-2" required placeholder="mm/dd/yyyy" />
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

【问题讨论】：

你能澄清一下吗？ “其余的停止运行”到底是什么意思？
@saadq datepicker 能够显示在网页上，但我希望 datepicker 的行为方式并没有像我想要的那样工作。
您应该更具描述性。预期行为是什么，实际行为是什么？
@saadq 我的错。我想要的预期行为是当用户从今天开始选择开始日期并且结束日期不应允许用户选择在开始日期选择的上一个日期。目前，行为是开始日期和结束日期显示日期选择器，但我上面提到的功能不起作用。
从文档看来，使用此工具创建限制是不可能的。如果您选择错误，它所允许的只是错误消息，这不一定是对用户的最佳反馈。是否使用例如 jQuery UI Datepicker (jqueryui.com/datepicker) 一个选项？我可以提供示例代码来设置开始的最小日期，并防止结束日期早于开始。

标签： javascript twitter-bootstrap datepicker

【解决方案1】：

在您的评论中，您说使用 jQuery UI Datepicker (https://jqueryui.com/datepicker/) 是一个选项，所以这里有一些示例代码。

注意当前日期必须写为起始值。如果需要，还可以为结束日期写一个默认值。日期应以您为日期选择器指定的格式写入。

<input class="input-small" style="cursor: pointer;" type="text" id="startDate" name="startDate" readonly value="13.11.2015" />
<input class="input-small" style="cursor: pointer;" type="text" id="endDate" name="endDate" readonly />

var $startDate = $('input[name="startDate"]');
$startDate.datepicker({
    minDate: $startDate.val(),
    changeYear: true,
    changeMonth: true,
    numberOfMonths: 1,
    constrainInput: true,
    dateFormat: 'dd.mm.yy',
    showOn: "both",
    showWeek: true,
    onSelect: function (selectedDate) {
    },
    onClose: function (selectedDate) {
        $endDate.datepicker("option", "minDate", selectedDate);
    }
}).keyup(function (e) {
    if (e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

var $endDate = $('input[name="endDate"]');
$endDate.datepicker({
    changeYear: true,
    changeMonth: true,
    numberOfMonths: 1,
    constrainInput: true,
    dateFormat: 'dd.mm.yy',
    showOn: "both",
    showWeek: true,
    minDate: $startDate.val(),
    onClose: function (selectedDate) {
    }
}).keyup(function (e) {
    if (e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

如果你愿意，我也可以稍微修改一下这个示例，添加一个按钮，让它看起来更像 Bootstrappy（兼容 2.X 版本）

【讨论】：

【解决方案2】：

您使用的日期选择器有点旧（2013 年最后一次更新...）。

尝试使用这个分叉：https://github.com/eternicode/bootstrap-datepicker 并检查the doc

这是日期范围和许多其他事情的一项工作......（因为它是一个分支，它与您的实际代码更兼容）

【讨论】：