我正在使用BootStrap Datepicker日期范围功能。当我以编程方式设置日期时,日历无法正确显示所选内容。
我的代码:
<div class="input-group input-daterange">
<input type="text" id="startDate"
class="form-control" name="startDate" value="2020-08-01">
<span class="input-group-addon">to</span>
<input type="text" id="endDate"
class="form-control" name="endDate" value="2020-08-08">
</div>
<script>
$(document).ready(function() {
$('.input-daterange').datepicker( {
format: 'yyyy-mm-dd',
autoclose: true
});
//change date
$('#startDate').val('2022-01-19');
$('#endDate').val('2022-01-29');
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
var $start = $(".input-daterange").find('#startDate');
var $end = $(".input-daterange").find('#endDate')
$start.datepicker('setStartDate', startDate);
$end.datepicker('setEndDate', endDate);
});
</script>
除日历显示外,还有两个问题:
开始日期日历在选择后不会自动关闭
开始日期未使用格式(yyyy-mm-dd)。选择之后 变成mm / dd / yyyy
使用的版本
datepicker:v1.9.0
引导程序:v3.4.1
jQuery:v3.4.1
6月22日更新:
我将代码更改为:
$start.datepicker('setDate', startDate);
$end.datepicker('setDate', endDate);
现在更好了:
尽管如此,这不是我所期望的。我不介意29号在开始日期日历中没有用深灰色突出显示。真正的问题是,在结束日期日历中根本没有突出显示/选择19号。
答案 0 :(得分:1)
代码/演示:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="input-group input-daterange">
<input type="text" id="startDate"
class="form-control" name="startDate" value="2020-08-01">
<span class="input-group-addon">to</span>
<input type="text" id="endDate"
class="form-control" name="endDate" value="2020-08-08">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.input-daterange').datepicker( {
format: 'yyyy-mm-dd',
autoclose: true,
});
//change date
$('#startDate').val('2022/01/19');
$('#endDate').val('2022/01/29');
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
var $start = $(".input-daterange").find('#startDate');
var $end = $(".input-daterange").find('#endDate')
$start.datepicker('setDate', startDate);
$end.datepicker('setDate', endDate);
});
</script>
</body>
</html>
说明:
我将其更改为:
$start.datepicker('setStartDate', startDate);
$end.datepicker('setEndDate', endDate);
收件人:
$start.datepicker('setDate', startDate);
$end.datepicker('setDate', endDate);
我还必须更改:
$('#startDate').val('2022-01-19');
$('#endDate').val('2022-01-29');
收件人:
/*UPDATED from using dashes to slashes*/
$('#startDate').val('2022/01/19');
$('#endDate').val('2022/01/29');
此外,默认情况下,在您的代码中,它似乎保持了您想要的正确格式,并且在单击或输入新日期后,startdate datepicker对我关闭了,如您在上面的代码段中所见。如果您有任何问题,请告诉我。