Bootstrap 3 Datetimepicker срабатывает при втором щелчке

я использую Bootstrap 3 Datetimepicker и моя проблема в том, что он не срабатывает, только после второго щелчка. Группа DatePicker создается на ходу.

Вот мой код (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));

Есть идеи?

Я попытался сначала инициализировать, а затем установить значения, такие как:

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

или init в фокусе сначала и onClick установите параметры. У них обоих еще при втором клике.

4

Решение

Я не знаю о Drupal, но вы можете попробовать это

 <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>

Если HTML-файл имеет вышеуказанный формат, нет необходимости связывать дополнительное событие клика при вводе

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

Другие решения

Других решений пока нет …