在输入点击和附加图标上触发jQuery datepicker元素 [英] Trigger jQuery datepicker element on both input click and add-on icon

问题描述

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

这是非常好的，但是当用户还点击该字段旁边的日历图标时，我也想触发日历的弹出窗口，所以我希望日历在两者之间显示。

我正在使用Twitter Bootstrap 3。

以下是我目前的Jquery：

 code> $（＃FromDate）。datepicker（{
 dateFormat：'dd / mm / yy'，
 changeMonth：true，
 changeYear：true，
 }）; 
 
 $（＃ToDate）。datepicker（{
 dateFormat：'dd / mm / yy'，
 changeMonth：true，
 changeYear：true，
}）; 
  

这是我的页面看起来如何

解决方案

尝试这个

  $（＃FromDate）。datepicker（{
 showOn：按钮，
 changeMonth：true，
 changeYear：true，
 buttonImage：../../images/calendar.png，
 buttonImageOnly：true，
 buttonText：选择日期，
 dateFormat：dd / mm / yy
}）; 
 
 $（＃ToDate）。datepicker（{
 showOn：button，
 changeMonth：true，
 changeYear：true，
 buttonImage ：../../images/calendar.png，
 buttonImageOnly：true，
 buttonText：选择日期，
 dateFormat：dd / mm / yy
}）; 
  

为引导编辑

Html

 < div class =col-lg-3> 
< div class =input-group> 
< input type =textclass =form-controlid =datepicker> 
< span class =input-group-btn> 
< button type =buttonclass =btn btn-defaultid =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' ）{
 // alert（'clicked'）; 
 $（'＃datepicker'）。datepicker（'show'）; 
}）; 
 
} ）; 
  

I have 2 input fields containing a default date and I'm using jQuery's Datepicker plugin to select a date from a pop-in calendar. Currently this calendar is displayed when the user clicks on the <input> field.

This is working great but I'd like to also trigger the calendar's pop-in when the user also clicks on the calendar icon which is next to the field so I want the calendar to be displayed on both.

I am using Twitter Bootstrap 3.

Below is my current Jquery:

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

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

And this is how my page looks

解决方案

Try this

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

Edit for bootstrap

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

        });

这篇关于在输入点击和附加图标上触发jQuery datepicker元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！