Bootstrap 日期选择器设置开始日期失败

Question

我正在使用 Bootstrap Datapicker 脚本（Link here）并且在设置开始日期时遇到问题。

Option: startDate

Date or String. Default: Beginning of time

The earliest date that may be selected; all earlier dates will be disabled.

Date should be in local timezone. String must be parsable with format.

JavaScript:

function initializeDatePicker() {
    if ($.isFunction($.fn.datepicker)) {
        var datepickerLang = lang;
        if (datepickerLang === "nl") {
            datepickerLang = "nl-BE";
        }

        $(".input-group.date input").datepicker({
            autoclose: true,
            todayBtn: "linked",
            clearBtn: true,
            todayHighlight: true,
            language: datepickerLang,
            format: "dd-mm-yyyy",
            startDate: $(this).data("startdate")
        });
    }
}

HTML:

<div class="input-group date small">
    <input id="StartDate" class="form-control" name="StartDate" value="" data-is-required="True" data-startdate="01-12-2016" type="text">
    <div class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </div>
</div>

什么有效？

如果我将 startdate 硬编码为：

startDate: new Date() => today

startDate: "01-12-2016"

什么不起作用？

如果我尝试从我的数据属性中获取日期，则没有任何效果。

startDate: new Date($(this).data("startdate")) => returns 'Date Invalid'

startDate: $(this).data("startdate")

我不明白哪里出了问题，也不知道该如何解决。

Answer 1

问题是您正在使用

$(this).data("startdate")

在此实例中 "this" 设置为文档，因此它将 return null/undefined。你需要做的就是把它改成这个

$("#StartDate").data("startdate")

----------------编辑----------------

如果你想在一个页面上使用一次但有多个日期选择器，你可以使用数据属性 insead，所以从选项中删除 startDate

$(".input-group.date input").datepicker({
    autoclose: true,
    todayBtn: "linked",
    clearBtn: true,
    todayHighlight: true,
    language: datepickerLang,
    format: "dd-mm-yyyy",
});

然后在您的 html 数据选择器上添加此属性

data-date-start-date="01-12-2016"

Answer 2

日期选择器支持 data attributes initialization，因此您可以在 HTML 中使用 data-date-start-date 而不是 data-startdate。

这是一个工作示例：

$(".input-group.date").datepicker({
  autoclose: true,
  todayBtn: "linked",
  clearBtn: true,
  todayHighlight: true,
  language: 'nl',
  format: "dd-mm-yyyy"
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.nl.min.js"></script>

<div class="input-group date small" data-date-start-date="01-12-2016">
    <input id="StartDate" class="form-control" name="StartDate" value="" data-is-required="True" type="text">
    <div class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </div>
</div>

请注意，由于您正在使用 component 标记，因此 data-date-* 属性必须位于 div 而不是第 input，此外你的选择器应该是 $(".input-group.date") 而不是 $(".input-group.date input").

Answer 3

首先，确保您的日期数据变量具有良好的价值，例如通过在构建日期选择器之前打印它。

然后，当您确定具有良好格式的良好价值时，您可以将其传递给 startDate 属性：

通过给出必须可以用 "format"
或者通过将 Date 对象构造为流：new Date(yyyy,mm,dd) （通过拆分数据变量的内容）。

希望对你有所帮助。

Answer 4

它不起作用，因为 startDate 选项中的 $(this) 不是对输入元素的引用。您应该使用 .each 并为选择器中的所有元素一一设置数据选择器：

$(".input-group.date input").each(function () {
    $(this).datepicker({
        autoclose: true,
        todayBtn: "linked",
        clearBtn: true,
        todayHighlight: true,
        language: datepickerLang,
        format: "dd-mm-yyyy",
        startDate: $(this).data("startdate")
    })
});

Bootstrap 日期选择器设置开始日期失败

Bootstrap datepicker setting startdate fails

javascript

twitter-bootstrap

datepicker

bootstrap-datepicker