Bootstrap 3 Datetimepicker fires on the second click

Question

I am using Bootstrap 3 Datetimepicker and my ploblem is that it does not fire, only after second click. The datepicker group is created on the run.

Here is my code (Drupal 7):

custom.module file

$values = isset($form_state['multistep_values']['second_step']) ? $form_state['multistep_values']['second_step'] : array();

$form['second_step']['departure_date'] = array(
    '#theme_wrappers' => array(), // to temove drupal default wrapper
    '#type' => 'textfield',
    '#default_value' => isset($values['departure_date']) ? $values['departure_date'] : NULL,
    '#attributes' => array(
        'class' => array('form-control dtpicker'),
        'readonly' => true
    ),
    '#prefix' => '<div class="col-sm-8"><div class="form-group"><div class="input-group date" id="datetimepicker1">',
    '#suffix' => '<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div>',

);

generated output

<div class="col-sm-8"><div class="form-group"><div class="input-group date" id="datetimepicker1"><input class="form-control dtpicker form-text" readonly="1" id="edit-departure-date" name="departure_date" value="" size="60" maxlength="128" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div>

custom.js file

(function($) {
Drupal.behaviors.custom = Drupal.behaviors.custom || {};

Drupal.behaviors.custom.attach = function(context) {
    Drupal.custom.datetimepicker(context);
};

Drupal.custom = Drupal.custom || {};

/*
 * Datetimepicker behavior
 */
Drupal.custom.datetimepicker = function(context) {
    $(document).on('click', '#datetimepicker1', function() {
        $(this).datetimepicker({
            format: 'Y-MM-D HH:mm',
            allowInputToggle: true,
            ignoreReadonly: true,
            showClear: true,
            showClose: true,
            showTodayButton: true
        });
    });
  };
}(jQuery));

Any ideas?

I've tried to initialize first and then set the values like:

$(this).datetimepicker();
$(this).datetimepicker({ ... });

or init at focus first and onClick set the options. At both of them still at second click.

Answer 1

I don't know about drupal but u can try this

 <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>

If the html is in above format no need to bind extra click event on input

Drupal.custom.datetimepicker = function(context) {
$('#datetimepicker1').datetimepicker({
            format: 'Y-MM-D HH:mm',
            allowInputToggle: true,
            ignoreReadonly: true,
            showClear: true,
            showClose: true,
            showTodayButton: true
        });
};