Specifies format data dates included input value with options:
yyyy-mm-dd , yyyy-dd-mm , mm-dd-yyyy , dd-mm-yyyy

 ...
  formatDate: 'yyyy-mm-dd',
 ...

This dateCheckIn specifies date selected on calendar theme default. If you do not setup dateCheckIn, t-datepicker will use date startDate is default. You have to compare dateCheckIn with startDate.

Be carefull, when using date Object, in javascript number of months go from 0 to 11.

 ...
  dateCheckIn: '2018-07-17',
  // or
  dateCheckIn: new Date(2018,06,17)
 ...

This dateCheckOut specifies date selected calendar on theme default. If you do not setup dateCheckOut, t-datepicker will use last date of limitNextMonth is default. You have to compare dateCheckOut with limitNextMonth

Be carefull, when using date Object, in javascript number of months go from 0 to 11.

No support only Picker View Demo

 ...
  dateCheckOut: '2018-07-17',
  // or
  dateCheckOut: new Date(2018,06,18)
 ...

The earliest date that may be selected. All earlier dates will be disabled. If startDate none value, t-datepicker will using date toDay make default.

If you have set Date dateCheckIn, when you clicked picker calendar, t-datepicker will show date follow dateCheckIn

 ...
  startDate: '2018-07-15',
  // or
  startDate: new Date(2018,06,15)
 ...

The last date that may be selected, all later dates will be disabled. If endDate none value, t-datepicker auto setEndDate follow numCalendar + limitNextMonth

 ...
  endDate: '2018-12-30',
  // or
  endDate: new Date(2018,06,15)
 ...

This limitPrevMonth specifies the number of months when you clicked button previous change the months. It has relationship with numCalendar and startDate.

 ...
  limitPrevMonth: 0,
 ...

This limitNextMonth specifies the number of months when you clicked button next change the months. It has relationship with numCalendar and endDate.

 ...
  limitPrevMonth: 11,
 ...

This limitDateRanges specifies number limit date you can selected. Define is dates from CI to CO for you to choose. All earliest date of CI and later date of CO will disabled.
The limitDateRanges has relationship with update method

 ...
  limitDateRanges : 60, // 60 days or 59 nights
  limitNextMonth  : 2,
 ...

This showFullDateRanges specifies title number nigth or daytime when you hover on date calendar theme follow limitDateRanges.

Default showFullDateRanges is false, title is nigth or nights when date more than 2, limitDateRanges will be - 1 date.

Use showFullDateRanges is true. You can change title is days titleDateRanges, It will follow your language.

 ...
  showFullDateRanges : true,
  titleDateRanges    : 'days',
  // Your custom
  startDate    : '2018-07-20',
  dateCheckIn  : '2018-07-25',
  dateCheckOut : '2018-08-24',
 ...

This fnDataEvent specifies special date on the month (Holidays). This function only suport Destop with action :hover. It bookmarks special day and when you hover date special, It will show title special date follow your data.

<script type="text/javascript">
  var holiDays = {
    '2018-01-01' : 'New Years is Day',
    '2018-01-02' : 'Lorem ipsum dolor sit amet ...',
    '2018-02-14' : 'Lorem ipsum dolor sit amet ...',
    '2019-01-02' : 'Lorem ipsum dolor sit amet ...'
  };
  $(document).ready(function() {
    $('.t-datepicker').tDatePicker({
      fnDataEvent: holiDays,
      startDate  : '2018-12-20',
      mergeDataEvent : true
    })
  })
</script>

This mergeDataEvent specifies special date on the month (Holidays). This function only suport Destop with action :hover.

It keeps and replaces special day of the data Holidays. E.g: keep 2018-01-02, replace 2019-01-02

<script type="text/javascript">
  var holiDays = {
    '2018-01-01' : 'New Years is Day',
    '2018-01-02' : 'Lorem ipsum dolor sit amet ...',
    '2018-02-14' : 'Valentin is Day',
    '2019-01-02' : 'Replace 2018-01-02...'
  };
  $(document).ready(function() {
    $('.t-datepicker').tDatePicker({
      fnDataEvent: holiDays,
      startDate  : '2018-12-20',
      mergeDataEvent : true
    })
  })
</script>

The number of calendar items you want to see on the screen.

 ...
  numCalendar: 2,
 ...

The title of date check-in you can change type if you want.

 ...
  titleCheckIn: 'Check In',
 ...

The title of date check-out you can change type if you want. No support only Picker View Demo

 ...
  titleCheckOut: 'Check Out',
 ...

The titleToday help you custom title language date of today

 ...
  titleToday: 'Today',
 ...

The titleDateRange help you custom title language date whenever you hover into date of tablet calendar, with "night" = 1 day

 ...
  titleDateRange: 'night',
 ...

The titleDateRanges help you custom title language date whenever you hover into date of tablet calendar, with "nights" > 1 day

 ...
  titleDateRanges: 'nights',
 ...

The titleDays help you custom title language dates of week on table calendar.

 ...
  titleDays: ['Mo','Tu','We','Th','Fr','Sa','Su'],
 ...

The titleMonths help you custom title language months of year on table calendar.

 ...
  titleMonths: ['January','February','March','April','May',
  'June','July','August','Septemper','October','November','December'],
 ...

The titleMonthsLimitShow help you litmit letter show title of months on dates theme.

It is work with your data months titleMonths. If you want show full title of months into titleMonths.

You can setup max length of item your data months array or titleMonthsLimitShow: 99

 ...
  titleMonthsLimitShow: 3,
 ...

If you don't like data setTitleMonths is type text. You want use number of months, the replaceTitleMonths will help you with value is empty replaceTitleMonths: ' '

Or you have anything good ideas, You can mix text + number replaceTitleMonths: 'Text '

 ...
  replaceTitleMonths: '',
 ...

Specifies data dates show theme when you clicked choose day on tabet calendar. You can custom theme with options: dd-mm , dd

 ...
  showDateTheme: 'dd-mm-yyyy',
 ...

Show or hide iconArrowTop when table calendar show or hide, it will help you saw table calender position in check-in or check-out.

 ...
  iconArrowTop: true,
 ...

Default is dingbats. You can include html with the font icons on the your website. You don't know about font-icon. You can view more fontawesome

 ...
  iconDate: '➜',
  // or
  iconDate: <i class="fa fa-calendar"></i> // fontawesome
 ...

You can use text 'Pre' or dingbats. But it is not good. You can include html with the font icons on the your website. You don't know about font-icon. You can view more fontawesome

 ...
  arrowPrev: '❮',
  // or
  arrowPrev: <i class="fa fa-chevron-left"></i> // fontawesome
 ...

You can use text 'Next' or dingbats. But it is not good. You can include html with the font icons on the your website. You don't know about font-icon. You can view more fontawesome

 ...
  arrowNext: '❯',
  // or
  arrowNext: <i class="fa fa-chevron-right"></i> // fontawesome
 ...

Hide or show titleToday.

 ...
  toDayShowTitle: true,
 ...

Hide or show titleDateRange

 ...
  dateRangesShowTitle: true,
 ...

Off action hover dateRangesShowTitle and limitDateRanges

 ...
  dateRangesHover: true,
 ...

If true, highlights the current date.

 ...
  toDayHighlighted: false,
 ...

If false, highlights the next date.

 ...
  nextDayHighlighted: false,
 ...

Array of date strings with format yyyy-mm-dd.

 ...
  dateDisabled: ['2018-12-01'],
 ...