Search code examples
javascriptjqueryhtmltwitter-bootstrapbootstrap-datetimepicker

bootstrap datetime picker, show dialogue when clicking on image

I am using bootstrap date time picker for an input.

i have the following html div defined

<div class="form-group">
    <label for="movingDate">Moving Date</label>
    <div class="input-group date ui-datepicker">
        <input type="text" id="prefMovingDate" name="movingDateTime" class="form-control" data-required="true">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</div>

And this javascript to enable bootstrap datetime picker

    $('#prefMovingDate').datetimepicker({
        format : 'd-M-yyyy H:ii P',
        autoclose : true,
    });

The output is following

enter image description here

Now when i click on the text box i see this

enter image description here

This is fine, but what i want is that the pop up for date selection should come even when the little calendar icon is clicked as well. I tries various approaches but i can't get my head around it. Any help on this will be greatly appreciated.

Solution

  • Try an click event on your calendar icon and trigger the focus on input #prefMovingDate:

    $('.input-group').find('.fa-calendar').on('click', function(){
    $(this).parent().siblings('#prefMovingDate').trigger('focus');
});

    or if this id #prefMovingDate is unique to the page then you can simply do this:

    $('.input-group').find('.fa-calendar').on('click', function(){
    $('#prefMovingDate').trigger('focus');
});