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

发布时间：2020-12-13 16:06:09 所属栏目：PHP教程来源：网络整理

导读：我使用的是 Bootstrap 3 Datetimepicker,我的问题是只有在第二次点击后它才会触发.在运行时创建了datepicker组. 这是我的代码(Drupal 7)： custom.module文件 $values = isset($form_state['multistep_values']['second_step']) ? $form_state['multistep_va

我使用的是 Bootstrap 3 Datetimepicker,我的问题是只有在第二次点击后它才会触发.在运行时创建了datepicker组.

这是我的代码(Drupal 7)：

custom.module文件

$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>',);

生成输出

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

(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设置选项.他们两人仍然在第二次点击.

解决方法

我不知道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采用上述格式,则无需在输入上绑定额外的click事件

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!