Bootstrap 3 Datetimepicker在第二次点击时触发

Question

我正在使用Bootstrap 3 Datetimepicker，我的理念是只有在第二次点击后它才会触发。日期选择器组在运行时创建。

这是我的代码（的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设置的选项。他们两人仍然在第二次点击。

Answer 1

我不知道的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 
     }); 
};