Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 798
Raghvendra Singh Avatar asked Mar 18 '14 07:03

Raghvendra Singh


2 Answers

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');
});
like image 149
Jai Avatar answered Sep 17 '22 23:09

Jai


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

like image 31
Tepken Vannkorn Avatar answered Sep 19 '22 23:09

Tepken Vannkorn