Question

我正在尝试为我的datepicker做一个开始/结束日期，并在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>

Answer 1

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

请注意，必须为起始值写入当前日期。如果需要，还可以为结束日期写入默认值。日期应以您为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版本兼容）的按钮

Answer 2

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

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

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

脚本不适用于Datepicker

2 个答案: