Installation

Include CSS

First, include CSS files into your HTML head:

<link rel="stylesheet" href="public/theme/css/t-datepicker.min.css">
<link rel="stylesheet" href="public/theme/css/themes/t-datepicker-main.css">

Include JS

Yep, include jQuery and t-datepicker-v1.x.x.js into the footer.

<script src="your-part/jquery.min.js"></script>
<script src="public/theme/js/t-datepicker.min.js"></script>

Set HTML

All you need is to inside the container element <div class="t-datepicker">. Class "t-datepicker" is mandatory to apply proper styles that come from t-datepicker.css file.

<!-- Set up your HTML -->
<div class="t-datepicker">
  <div class="t-check-in"></div>
  <div class="t-check-out"></div>
</div>

This is full HTML, after you call function tDatePicker()

<div class="t-datepicker">
  <div class="t-check-in">
    <div class="t-dates t-date-check-in">
      ➜<label class="t-date-info-title">Check In</label>
    </div>
    <input type="hidden" class="t-input-check-in" value="null" name="start">
    <div class="t-datepicker-day">
      <table class="t-table-condensed">
        <!-- Date theme calendar -->
      </table>
    </div>
  </div>
  <div class="t-check-out">
    <div class="t-dates t-date-check-out">
      ➜<label class="t-date-info-title">Check Out</label>
    </div>
    <input type="hidden" class="t-input-check-out" value="null" name="end">
  </div>
</div>

Call The Plugin

Now call the tDatePicker initializer function and your tDatePicker is ready. View Demo

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

Call Only The Plugin

Now call the tDatePicker initializer function and your tDatePicker is ready. Global options when you want use many tDatepicker.

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

Call Only Picker

You need add <div class="t-picker-only"> include t-check-in.

<!-- Set up your HTML -->
<div class="t-datepicker">
  <div class="t-check-in t-picker-only"></div>
</div>

Now call the tDatePicker initializer function and your tDatePicker is ready. View Demo

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