bootstrap datetime picker, show dialogue when clicking on image

Question

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

Now when i click on the text box i see this

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.

Answer 1

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

Answer 2

I was having similar issue. My problem was that the calendar icon click shows the calendar dropdown but not the input box. However, the new version of the Bootstrap DateTime Picker provide the allowInputToggle to enable the input to work as well.

HTML:

<div class="form-group">
    <div class='input-group date datetimepicker'>
        <label class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </label>
        <input type='search' name="s" class="form-control" placeholder="Search News By Calendar..." />
        <span class="input-group-addon">
            <button type="submit" class="btn btn-primary"></button>
        </span>
    </div>
</div>

JavaScript:

$( '.datetimepicker' ).datetimepicker({
    'format' : 'YYYY-MM-DD',
    'allowInputToggle' : true
});

See this https://github.com/Eonasdan/bootstrap-datetimepicker/issues/704