Question

我有2个包含默认日期的输入字段，我使用jQuery的Datepicker插件从弹出式日历中选择日期。目前，当用户点击<input>字段时会显示此日历。

这很有效但我还想在用户点击字段旁边的日历图标时触发日历的弹出窗口，因此我希望日历显示在两者。

我正在使用Twitter Bootstrap 3。

以下是我目前的Jquery：

    $("#FromDate").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
    });

    $("#ToDate").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
    });

这就是我的网页外观

enter image description here

Answer 1

试试这个

$("#FromDate").datepicker({
                        showOn: "button",
                        changeMonth: true,
                        changeYear: true,
                        buttonImage: "../../images/calendar.png",
                        buttonImageOnly: true,
                        buttonText: "Select date",
                        dateFormat: "dd/mm/yy"
                    });

$("#ToDate").datepicker({
                    showOn: "button",
                    changeMonth: true,
                    changeYear: true,
                    buttonImage: "../../images/calendar.png",
                    buttonImageOnly: true,
                    buttonText: "Select date",
                    dateFormat: "dd/mm/yy"
                });

编辑引导程序

<强> HTML

           <div class="col-lg-3">
                <div class="input-group">
                    <input type="text" class="form-control" id="datepicker">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" id="btnPicker">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>

                </div>
                <!-- /input-group -->
            </div>

<强>的Javascript

        $(function () {
            $("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy"
            }).datepicker("setDate", new Date());

            $('#btnPicker').click(function () {
                //alert('clicked');
                $('#datepicker').datepicker('show');
            });

        });

Answer 2

只需将“ showOn”的值更新为“两个”。

$("#FromDate").datepicker({
                    showOn: "button",
                    changeMonth: true,
                    changeYear: true,
                    buttonImage: "../../images/calendar.png",
                    buttonImageOnly: true,
                    buttonText: "Select date",
                    dateFormat: "dd/mm/yy"
                });

到

$("#FromDate").datepicker({
                    showOn: "both", //-> button to both
                    changeMonth: true,
                    changeYear: true,
                    buttonImage: "../../images/calendar.png",
                    buttonImageOnly: true,
                    buttonText: "Select date",
                    dateFormat: "dd/mm/yy"
                });

在输入点击和附加图标上触发jQuery datepicker元素

2 个答案: