第二个Bootstrap Datepicker不会获得选项(beforeShowDay)

时间:2015-06-12 07:53:17

标签: twitter-bootstrap datepicker options

我正在使用两个Bootstrap日期选择器。所需的功能是两个日历都显示两个选定的日期/天。问题是,如果我在代码中初始化它们 - 只有第一个/上部(在js中),datepicker init成功。如果我改变了代码的顺序 - 在end-datepicker之后初始化start-datepicker,那么只有end-datepicker获取beforeShowDay的函数。只有第一个运行选项。

我很困惑,想知道它是否在datepicker库中出现了一些错误。

仅供参考 - 我已经检查了所有可能破坏代码的内容 - 在调试时 - 它也初始化了第二个日期记录器 - 只是忽略了选项。此外,日期选择器功能齐全,只是完全忽略了选项。

<div id="start-datepicker" class="input-group date ">
    <input class="form-control" placeholder="mm/dd/yy"
            data-date-autoclose="true" data-date-format="mm/dd/yyyy"
             maxlength="10" type="text" name="arrive" id="arrive"
            value="<? echo $_SESSION[arrive] ?>"/>
    <span class="input-group-addon">
            <i class="fa fa-calendar"></i>
    </span>
</div>

<div id="end-datepicker" class="input-group date ">
    <input class="form-control" placeholder="mm/dd/yy"
            data-date-autoclose="true" data-date-format="mm/dd/yyyy"
            maxlength="10" type="text" name="depart" id="depart"
            value="<? echo $_SESSION[depart] ?>"/>
    <span class="input-group-addon add-on">
            <i class="fa fa-calendar"></i>
    </span>
</div>

和JQ部分

    var today = new Date();

    $("#start-datepicker").datepicker({
        beforeShowDay: function (date)
        {
            if (date.toLocaleDateString() == today.toLocaleDateString()) {
                return {
                    classes: "fs-bold-day"
                };
            }
            var end = $('#end-datepicker').datepicker('getDate');
            if (date.toDateString() == end.toDateString()) {
                return {
                    classes: "fs-red-day", tooltip: "Departure"
                };
            }
        },
        todayHighlight: true
    });

    $("#end-datepicker").datepicker({
        beforeShowDay: function (date)
        {
            if (date.toLocaleDateString() == today.toLocaleDateString()) {
                return {
                    classes: "fs-bold-day"
                };
            }
            var start = $('#start-datepicker').datepicker('getDate');
            if (date.toDateString() == start.toDateString()) {
                return {
                    classes: "fs-red-day", tooltip: "Arrival"
                };
            }
        },
        todayHighlight: true
    });

提前致谢

1 个答案:

答案 0 :(得分:0)

https://github.com/eternicode/bootstrap-datepicker/issues/362

所以你遇到的问题是,datepicker实例的选项并非全部可更新。这个请求特别存在问题:

https://github.com/eternicode/bootstrap-datepicker/issues/747

但第一个链接有更好的信息。这不是一个完美的答案,甚至是一个非常好的答案,但希望这些链接可以帮助其他人。