我正在使用插件使用bootstrap-datepicker在我的网站上显示日期范围日历。
我对jQuery很陌生,发现很难弄清楚Methods的用法。
当用户选择FROM
日期时,我想自动弹出TO
日期日历。目前我已启用autoclose
,因此一旦选择FROM
日期,日历就会消失,但无法弄清楚如何弹出TO
日历。
答案 0 :(得分:1)
我在这里发送我的HTML。 首先,我们需要为日期输入和日期输入添加一些类,如下所示。
为日期输入添加课程fromdate
为日期输入添加课程todate
<div id="sandbox-container">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control fromdate" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control todate" name="end" />
</div>
</div>
然后只需添加下面的脚本,我希望它可以帮助你并给你你想要的输出。
<script>
$(document).ready(function(){
$('#sandbox-container .input-daterange').datepicker({
autoclose: true,
});
$(document).on('change', '.input-daterange > .fromdate', function (e) {
$(".todate").focus();
});
});
</script>
这是我用过的HTML代码。只需设置CSS和js的路径就可以了。
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link id="bs-css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body class="container">
<div id="sandbox-container">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control fromdate" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control todate" name="end" />
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#sandbox-container .input-daterange').datepicker({
autoclose: true,
});
$(document).on('change', '.input-daterange > .fromdate', function (e) {
$(".todate").focus();
});
});
</script>
</html>
答案 1 :(得分:0)