How to show datepicker calendar when the input get focus and update calendar

Question

I have a calendar example based in this URL: http://eonasdan.github.io/bootstrap-datetimepicker

This is the HTML code:

<div class="form-group col-xs-2 col-md-2">
    <label for="datebirth" class="control-label">Date of Birth</label>
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" id="date-birth" maxlength="10" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>                      
</div>

This is the JS code:

moment.locale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});     

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY'
});

$("#date-birth").on("focus", function() {
    //open calendar
});

My calendar must be opened when do click in the calendar icon (this is ok) and when the input date has got the focus, and after, if i write a fecha in the input date field, the calendar window must be updated automatically.

In the URL , there are a example about No Icon (input field only):, but i not getting resolve it.

Thanks for the help.

Answer 1

You can initialize your calendar adding allowInputToggle option, in order to make it open also when the input gains focus:

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY',
    allowInputToggle: true
});

You can also add useCurrent: false if you want to have an empty input when the calendar opens for the first time.

You can use a keyup listner to update the calendar automatically when you type a date:

$("#date-birth").on("keyup", function() {
    var dt = moment(this.value, 'DD/MM/YYYY', true);
    if( dt.isValid() ){
        $('#datetimepicker1').data("DateTimePicker").date(dt);
    }
});