Question

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

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>

出现第一个日期选择器，并且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>

有什么建议吗？

Answer 1

尝试一下。

Live demo

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>

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

1 个答案: