Question

我正在使用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设置选项。他们两人仍然在第二次点击。

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

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

1 个答案: