Check-in And Check-out Date Range Picker - jQuery t-datepicker

t-datepicker is a responsive, flexible, elegant, themeable, highly-configurable data range picker written in JavaScript (jQuery) and CSS(SASS).

Suitable for hotel app that enables the users to quickly select check-in and check-out dates in a convenient calendar popup.

Key features:

• 10 built-in themes.
• Multiple instances on a page.
• Custom date format.
• Useful options and API.

How to use it:

1. Insert the jQuery t-datepicker plugin's files into the document which has the latest jQuery library loaded.

<link href="css/t-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/t-datepicker.min.js"></script>

2. Include a theme of your choice after the core stylesheet. All possible themes:

1. blue
2. bluegrey
3. cyan
4. green
5. lime
6. main
7. organge
8. purple
9. teal
10. yellow

<link href="css/themes/t-datepicker-bluegrey.css" rel="stylesheet" type="text/css">

3. Create check-in and check-out elements on the webpage.

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

4. Call the function to generate a default date range picker.

$(function(){

  $('.t-datepicker').tDatePicker();

});

5. To config the date range picker, pass in the following parameters to the tDatePicker() method.

$('.t-datepicker').tDatePicker({

  // auto close after selection
  autoClose        : true,

  // animation speed in milliseconds
  durationArrowTop : 200,

  // the number of calendars
  numCalendar    : 2,

  // localization
  titleCheckIn   : 'Check In',
  titleCheckOut  : 'Check Out',
  titleToday     : 'Today',
  titleDateRange : 'night',
  titleDateRanges: 'nights',
  titleDays      : [ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su' ],
  titleMonths    : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'Septemper', 'October', 'November', "December"],

  // the max length of the title
  titleMonthsLimitShow : 3,

  // replace moth names
  replaceTitleMonths : null,

  // e.g. 'dd-mm-yy'
  showDateTheme   : null,

  // icon options
  iconArrowTop : true,
  iconDate     : '➜',
  arrowPrev    : '❮',
  arrowNext    : '❯',
  // https://fontawesome.com/v4.7.0/icons/
  // iconDate: '<i class="li-calendar-empty"></i><i class="li-arrow-right"></i>',
  // arrowPrev: '<i class="fa fa-chevron-left"></i>',
  // arrowNext: '<i class="fa fa-chevron-right"></i>',

  // shows today title
  toDayShowTitle       : true, 

  // showss dange range title
  dateRangesShowTitle  : true,

  // highlights today
  toDayHighlighted     : false,

  // highlights next day
  nextDayHighlighted   : false,

  // an array of days
  daysOfWeekHighlighted: [0,6],

  // custom date format
  formatDate      : 'yyyy-mm-dd',

  // dateCheckIn: '25/06/2018',  // DD/MM/YY
  // dateCheckOut: '26/06/2018', // DD/MM/YY
  dateCheckIn  : null,
  dateCheckOut : null,
  startDate    : null,
  endDate      : null,

  // limits the number of months
  limitPrevMonth : 0,
  limitNextMonth : 11,

  // limits the number of days
  limitDateRanges    : 31,

  // true -> full days || false - 1 day
  showFullDateRanges : false, 

  // DATA HOLIDAYS
  // Data holidays
  fnDataEvent   : null

});

6. API methods.

// shows the date range picker
$('.t-datepicker').tDatePicker('show');

// hides the date range picker
$('.t-datepicker').tDatePicker('hide');

// updates the date range picker
$('.t-datepicker').tDatePicker('update', '2018-07-17');

// updates the check-in date
$('.t-datepicker').tDatePicker('updateCI', '2018-07-17');

// updates the check-out date
$('.t-datepicker').tDatePicker('updateCO', '2018-07-17');

// sets the start date
$('.t-datepicker').tDatePicker('setStartDate', '2018-07-17');

// sets the end date
$('.t-datepicker').tDatePicker('setEndDate', '2018-07-25');

// returns Date Object
// e.g: Wed Jul 18 2018 07:00:00 GMT+0700
$('.t-datepicker').tDatePicker('getDate');

// returns Date Object
$('.t-datepicker').tDatePicker('getDates');

// returns Date String
// e.g: '2018-07-17'
$('.t-datepicker').tDatePicker('getDateInput');

// returns [Date String, Date String]
// e.g: Return ['2018-07-17', '2018-07-18']
$('.t-datepicker').tDatePicker('getDateInput');

// returns [UTC CI, UTC CO]
// e.g: Return [1531785600000, 1531872000000]
$('.t-datepicker').tDatePicker('getDateUTCs');

// returns Date Object
// e.g: Wed Jul 18 2018 07:00:00 GMT+0700
$('.t-datepicker').tDatePicker('getStartDatet');

// returns Date Object
// e.g: 1531785600000
$('.t-datepicker').tDatePicker('getStartDateUTC');

// returns Date Object
// e.g: Wed Jul 18 2018 07:00:00 GMT+0700
$('.t-datepicker').tDatePicker('getEndDate');

// returns Date Object
// e.g: 1531785600000
$('.t-datepicker').tDatePicker('getDateUTC');

// returns Date Object
// e.g: Wed Jul 18 2018 07:00:00 GMT+0700
$('.t-datepicker').tDatePicker('getEndDate');

7. Event handlers.

$('.t-datepicker').tDatePicker()
.on('clickDateCI',function(e, dateCI) {
  // after click check-in date
})

.on('clickDateCO',function(e, dateCO) {
  // after click check-out date
})

.on('beforeShowDay',function(e) {
  // before show
})

.on('afterShowDay',function(e) {
  // after show
})

.on('toggleAfterHideDay',function(e) {
  // after hide
})

.on('afterCheckOut',function(e, dataDate) {
  // console.log(new Date(dataDate[0])) // check-in
  // console.log(new Date(dataDate[1])) // check-out
})

.on('eventClickDay',function(e, dataDate) {
  // console.log(new Date(dataDate[0])) // check-in
  // console.log(new Date(dataDate[1])) // check-out
})

.on('selectedCI',function(e, slDateCI) {
  // after check-in date selected
})

.on('selectedCO',function(e, slDateCO) {
  // after check-out date selected
})

.on('onChangeCI',function(e, changeDateCI) {
  // after check-in date changed
})

.on('onChangeCO',function(e, changeDateCO) {
  // after check-out date changed
})

Changelog:

2018-07-16

• update new option dateRangeHover and only picker

2018-07-14

• Bugfix

---

This awesome jQuery plugin is developed by crazychicken. For more Advanced Usages, please check the demo page or visit the official website.