Nemeth Nemeth - 16 days ago 8
jQuery Question

Bootstrap 3 Datetimepicker fires on the second click

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

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