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

【问题标题】：Trigger jQuery datepicker element on both input click and add-on icon在输入点击和附加图标上触发 jQuery datepicker 元素
【发布时间】：2014-12-26 11:37:16
【问题描述】：

我有 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,
    });

这就是我的页面的样子

【问题讨论】：

标签： jquery twitter-bootstrap calendar datepicker

【解决方案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');
            });

        });

【讨论】：

遗憾的是，您的建议不起作用，因为它在我的字段下方添加了一张图片。当我单击字段旁边的日历时，我需要显示日历，如我帖子中的屏幕截图所示。如果有办法在 jaquery 中获取“glyphicon glyphicon-calendar”，请告诉我
查看编辑后的答案。我认为该示例将解决您的问题

【解决方案2】：

只需将“showOn”的值更新为“both”即可。

$("#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"
                });

【讨论】：