Trigger jQuery datepicker element on both input click and add-on icon

问题

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

回答1:

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

        });

来源：https://stackoverflow.com/questions/26652829/trigger-jquery-datepicker-element-on-both-input-click-and-add-on-icon

标签

jquery

twitter-bootstrap

calendar

datepicker