CODEWITHSUNDEEP
jquerydatepicker
A.V.
A.V.

Reputation: 175

using 2 different jquery t-datepickers in the same page

I am trying to use 2 different t-datepikers in the same page.

html code is

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

and script to call the t-datepicker is 

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

the first datepicker appears and the html has class t-datepicker-open

on clicking the second picker at class_a

the class t-datepicker-open appears but then instantly disappears so second datepicker is not working.

According to documentation it should work as instructions for multiple pickers are:

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

Any suggestions?

Upvotes: 0

Views: 212

Answers (1)

hbamithkumara
hbamithkumara

Reputation: 2534

Try this..

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>

Upvotes: 1

Related Questions