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

Question

我有2个包含默认日期的输入字段,我使用jQuery的Datepicker插件从pop-in日历中选择日期.当前,当用户单击该<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,
    });

这就是我的页面看起来的样子

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');
            });

        });