Bootstrap-使用 "setDate" 时日期选择器未选择日期
Bootstrap-Datepicker not selecting date when using "setDate"
我正在尝试让 Bootstarp-Datepicker 工作,我已经非常接近了。但是,现在我已经找到了如何设置 startDate 并且能够使 "autoclose" 工作,但我无法将其设置为 select 在 "setDate" 中设置的日期
如果我调出日历,然后手动 select 另一个日期将显示为 selected,但 setDate 值不会将该日期显示为 selected。我进行了大量搜索,但似乎无法找到合适的组合。
顺便说一句:查看 F12 工具时我确实遇到了错误,但它显示 "failed to load resource: the server responded with a 404 (not found)" 并且源指向“/fonts/glyphicons-halflings-regular”文件。我不认为这与它有任何关系,但我要 post 对此提出一个单独的问题。
这是我的 HTML
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-md-2">
<div id="EndDate" class="input-group date">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
这是我的 JS。此 JS 将设置日期并使自动关闭工作,但它不会 select 使用 setDate 方法设置的日期。
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker({
autoclose: true
}).datepicker("update", startDate);
$("#EndDate").datepicker({
autoclose: true
}).datepicker("update", endDate);
});
</script>
如果我切换到此 JS 代码,我可以让 setDate 工作并获得设置为 selected 的日期。但是,这会导致自动关闭不起作用。
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("autoclose", true);
$("#StartDate").datepicker("update");
});
</script>
当AutoClose
不起作用时,您可以使用此功能强制它:
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("update");
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
我正在尝试让 Bootstarp-Datepicker 工作,我已经非常接近了。但是,现在我已经找到了如何设置 startDate 并且能够使 "autoclose" 工作,但我无法将其设置为 select 在 "setDate" 中设置的日期
如果我调出日历,然后手动 select 另一个日期将显示为 selected,但 setDate 值不会将该日期显示为 selected。我进行了大量搜索,但似乎无法找到合适的组合。
顺便说一句:查看 F12 工具时我确实遇到了错误,但它显示 "failed to load resource: the server responded with a 404 (not found)" 并且源指向“/fonts/glyphicons-halflings-regular”文件。我不认为这与它有任何关系,但我要 post 对此提出一个单独的问题。
这是我的 HTML
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-md-2">
<div id="EndDate" class="input-group date">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
这是我的 JS。此 JS 将设置日期并使自动关闭工作,但它不会 select 使用 setDate 方法设置的日期。
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker({
autoclose: true
}).datepicker("update", startDate);
$("#EndDate").datepicker({
autoclose: true
}).datepicker("update", endDate);
});
</script>
如果我切换到此 JS 代码,我可以让 setDate 工作并获得设置为 selected 的日期。但是,这会导致自动关闭不起作用。
<script type="text/javascript">
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("autoclose", true);
$("#StartDate").datepicker("update");
});
</script>
当AutoClose
不起作用时,您可以使用此功能强制它:
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
$(function () {
var startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
var endDate = new Date();
$("#StartDate").datepicker("setDate", startDate);
$("#StartDate").datepicker("update");
$('#StartDate').datepicker().on('changeDate', function(ev){
$('#StartDate').datepicker('hide');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<div class="col-md-2 text-left">
<div id="StartDate" class="input-group date">
<input class="datepicker form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>