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

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     : '&#x279C;',
  arrowPrev    : '&#x276E;',
  arrowNext    : '&#x276F;',
  // 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
})

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

  • Publication date: 13.07.2018
  • Source