我正在使用Bootstrap Datapicker脚本(链接here)并且在设置startdate时遇到问题。
选项:startDate
日期或字符串。默认值:开始时间
可选择的最早日期;所有较早的日期都将被禁用。
日期应在当地时区。必须使用
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")
我不明白什么是错的以及如何解决它。
答案 0 :(得分:4)
问题是你正在使用
th{
position:relative;
}
在这种情况下&#34;这个&#34;设置为文档,以便它返回null / undefined。 您需要做的是将其更改为
$(this).data("startdate")
<强> ----------------编辑--------------- 强>
如果您想在页面上使用一次但有多个日期选择器,则可以使用数据属性insead,因此从选项中删除startDate
$("#StartDate").data("startdate")
在你的html中,在数据采集器上添加这个属性
$(".input-group.date input").datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true,
todayHighlight: true,
language: datepickerLang,
format: "dd-mm-yyyy",
});
答案 1 :(得分:4)
日期选择器支持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"
});
&#13;
<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>
&#13;
请注意,由于您使用的是组件标记,因此data-date-*
属性必须位于div
而不是input
,而且您的选择器应为{ {1}}代替$(".input-group.date")
。
答案 2 :(得分:0)
它不起作用,因为startDate选项中的$(this)不是对input元素的引用。您应该使用.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")
})
});
答案 3 :(得分:-2)
首先,让sûr获得日期数据变量的良好价值,例如在构建datePicker之前打印它。
然后,如果您想要使用良好的格式获得良好的价值,您可以将其传递给startDate属性:
我希望这对你有所帮助。