时间戳

首页 > 解决方案 > 在同一页面中使用 2 个不同的 jquery t-datepickers

jquery - 在同一页面中使用 2 个不同的 jquery t-datepickers

问题描述

我正在尝试在同一页面中使用 2 个不同的 t-datepikers。

html代码是

  <div class="t-datepicker">
  <div class="t-check-in"></div>
  <div class="t-check-out"></div>
</div>
    <div class="class_a">
      <div class="t-check-in"></div>
  <div class="t-check-out"></div>
    </div>

调用 t-datepicker 的脚本是

    <script type="text/javascript">
  $(document).ready(function(){
    $('.t-datepicker').tDatePicker({
      // Global options
    autoClose: true,
      limitNextMonth: 3,
      numCalendar : 1,
      dateRangesHover: false
    });
    $('.class_a').tDatePicker({
      // Options for .class_a
              limitNextMonth: 4,
      numCalendar : 2,
      dateRangesHover: true
    });

  });
</script>

第一个 datepicker 出现并且 html 有类 t-datepicker-open

单击 class_a 处的第二个选择器

类 t-datepicker-open 出现但随后立即消失，因此第二个 datepicker 无法正常工作。

根据文档，它应该作为多个选择器的说明工作：

<script type="text/javascript">
  $(document).ready(function(){
    $('.t-datepicker').tDatePicker({
      // Global options
    });
    $('.class_a').tDatePicker({
      // Options for .class_a
    });
    $('.class_b').tDatePicker({
      // Options for .class_b
    });
  });
</script>

有什么建议么？

标签： jquerydatepicker

解决方案

尝试这个..

现场演示

html

<div class="t-datepicker class_a">
  <div class="t-check-in"></div>
  <div class="t-check-out"></div>
</div>

<div class="t-datepicker class_b">
  <div class="t-check-in"></div>
  <div class="t-check-out"></div>
</div>

js

<script type="text/javascript">
  $(document).ready(function(){
    $('.class_a').tDatePicker({
        // options only here
        autoClose: true,
        limitNextMonth: 3,
        numCalendar : 1,
        dateRangesHover: false
    });
    $('.class_b').tDatePicker({
        // options only here
        limitNextMonth: 4,
        numCalendar : 2,
        dateRangesHover: true
    });
  });
</script>

推荐阅读