Question

我正在使用插件使用bootstrap-datepicker在我的网站上显示日期范围日历。

我对jQuery很陌生，发现很难弄清楚Methods的用法。

当用户选择FROM日期时，我想自动弹出TO日期日历。目前我已启用autoclose，因此一旦选择FROM日期，日历就会消失，但无法弄清楚如何弹出TO日历。

Answer 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>

Answer 2

我希望你只是在寻找这个

jQuery日期选择器弹出框TO字段日历

2 个答案: