jjzjj

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

coder 2024-04-19 原文

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

这是我的代码(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({ ... });

或先在焦点处初始化，然后在 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 是上述格式，则无需在输入时绑定(bind)额外的点击事件

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

关于php - Bootstrap 3 Datetimepicker 在第二次点击时触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40650236/

DatetimepickerBootstrap3934phpjquerydrupal-7bootstrap-datetimepicker

有关php - Bootstrap 3 Datetimepicker 在第二次点击时触发的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景，很容易学习，因为它们都有相同的C结构，我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好，Python对我来说比Ruby更容易学。然后从去年开始，我一直在尝试学习Ruby，然后是Rails，我承认，直到现在我还是学不会，讽刺的是那些打着简单易学的烙印，但是对于我这样一个老练的程序员来说，我只是无法将它

  4. ruby - stub 实例方法在使用 minitest 的第二次调用时返回值不同 - 2

    我正在对用户的提要进行分页，并想模拟我正在使用的API的响应。API可以返回奇怪的结果，所以我想确保如果API返回我已经看到的项目，请停止分页。我使用minitest在第一次调用方法get_next_page时stub，但我想在第二次和第三次用不同的值调用它时stub。我应该只使用rSpec吗？ruby新手...这是片段test"crawlerdoesnotpaginateifnonewitemsinnextpage"do#1:A,B#2:B,D=>D#3:A=>stopcrawler=CrawlJob.newfirst_page=[{"id"=>"item-A"},{"id"=>"i

  5. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  6. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  7. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  8. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

  9. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  10. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别？ - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b

随机推荐