多个动态日期时间选择器不会直接打开

Question

我有一个表单，其中包含多个通过单击按钮动态添加的 bootstrap 日期时间选择器。都是一样的class，所以我可以给大家打开

问题是，我必须点击多次才能打开选择器...如果我打开一个，选择器中的其他日期将被重置？！

我必须分别初始化每个日期时间选择器吗？如果是，点击或 onRendered 模板助手？

这是我的 JS：

'click .openDatetimepicker': function(event) {
    $('.speakerDatetimepicker').datetimepicker({
        format: 'L LT',
        widgetPositioning: {
            horizontal: 'left',
            vertical: 'bottom'
        },
        locale: 'de'
    });
}

和HTML

{{#each speakerDates}}
    <div class="row">
        <div class="one wide column"></div>
        <div class="ten wide column">
           <div class="inline fields">
              <div class="four wide field">
                 <label class="ui orange small header">{{incremented  @index}}. Offtext-Termin</label>
              </div>
               <div class="six wide field">
                    <div class="form-group">
                        <div class='input-group date speakerDatetimepicker'>
                            <input type="hidden" name="speakerDateID" value="{{this._id}}">
                            <input id="speakerDate{{@index}}" type='text' class="form-control" value="{{start}}" size="14px"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar openDatetimepicker"></span>
                            </span>
                         </div>
                     </div>
                 </div>
                 <div class="one wide field">
                     <button class="ui red medium removeSpeakerDate button" value="{{_id}}">
                         <i class="minus icon"></i>
                     </button>
                 </div>
             </div>
          </div>
      </div>
{{/each}}

希望你能帮助我:-/谢谢

Answer 1

是的，您应该在 onRendered 中初始化 datetimepicker 和任何其他 jQuery 插件。此外，将列表项移动到单独的模板中是有意义的：

<template name="List">
{{#each speakerDates}}
  {{> ListItem}}
{{/each}}
</template>

<template name='ListItem'>
   <div class="row">
        <div class="one wide column"></div>
        <div class="ten wide column">
           <div class="inline fields">
              <div class="four wide field">
                 <label class="ui orange small header">{{incremented  @index}}. Offtext-Termin</label>
              </div>
               <div class="six wide field">
                    <div class="form-group">
                        <div class='input-group date speakerDatetimepicker'>
                            <input type="hidden" name="speakerDateID" value="{{this._id}}">
                            <input id="speakerDate{{@index}}" type='text' class="form-control" value="{{start}}" size="14px"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar openDatetimepicker"></span>
                            </span>
                         </div>
                     </div>
                 </div>
                 <div class="one wide field">
                     <button class="ui red medium removeSpeakerDate button" value="{{_id}}">
                         <i class="minus icon"></i>
                     </button>
                 </div>
             </div>
          </div>
      </div>
</template>

和 JS:

Template.ListItem.onRendered(function(){
// notice this before $: we initializing datetime picker
// only inside current list item template.
   this.$('.speakerDatetimepicker').datetimepicker({
        format: 'L LT',
        widgetPositioning: {
            horizontal: 'left',
            vertical: 'bottom'
        },
        locale: 'de'
    });
});

多个动态日期时间选择器不会直接打开

Multiple Dynamic Datetimepicker won't open directly

javascript

datetimepicker

meteor

twitter-bootstrap-3