T-Datepicker | Documents

formatDate

Type: String

Default: yyyy-mm-dd

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',
 ...

dateCheckIn

Type: String | Date | (yyyy/mm/dd)

Default: null

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

dateCheckOut

Type: String | Date | (yyyy/mm/dd)

Default: null

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

startDate

Type: String | Date | (yyyy/mm/dd)

Default: null

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

endDate

Type: String | Date | (yyyy/mm/dd)

Default: null

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

limitPrevMonth

Type: Number

Default: 0

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

 ...
  limitPrevMonth: 0,
 ...

limitNextMonth

Type: Number

Default: 11

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

 ...
  limitPrevMonth: 11,
 ...

limitDateRanges

Type: Number

Default: 31

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

showFullDateRanges

Type: Boolean

Default: false

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',
 ...

fnDataEvent

Type: Object

Default: null

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>

mergeDataEvent

Type: Boolean

Default: false

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>

numCalendar

Type: Number

Default: 2

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

 ...
  numCalendar: 2,
 ...

titleCheckIn

Type: String

Default: Check In

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

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

titleCheckOut

Type: String

Default: Check Out

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

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

titleToday

Type: String

Default: Today

The titleToday help you custom title language date of today

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

titleDateRange

Type: String

Default: night

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

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

titleDateRanges

Type: String

Default: nights

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

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

titleDays

Type: Array

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

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

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

titleMonths

Type: Array

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

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'],
 ...

titleMonthsLimitShow

Type: Number

Default: 3

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

replaceTitleMonths

Type: String

Default: null

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: '',
 ...

showDateTheme

Type: String

Default: dd-mm-yyyy

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',
 ...

iconArrowTop

Type: Boolean

Default: true

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

iconDate

Type: String

Default: ➜ | #x279C

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

arrowPrev

Type: String

Default: ❮ | #x276E

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

arrowNext

Type: String

Default: ❯ | #x276F

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

toDayShowTitle

Type: Boolean

Default: true

Hide or show titleToday.

 ...
  toDayShowTitle: true,
 ...

dateRangesShowTitle

Type: Boolean

Default: true

Hide or show titleDateRange

 ...
  dateRangesShowTitle: true,
 ...

dateRangesHover

Type: Boolean

Default: true

Off action hover dateRangesShowTitle and limitDateRanges

 ...
  dateRangesHover: true,
 ...

toDayHighlighted

Type: Boolean

Default: false

If true, highlights the current date.

 ...
  toDayHighlighted: false,
 ...

nextDayHighlighted

Type: Boolean

Default: false

If false, highlights the next date.

 ...
  nextDayHighlighted: false,
 ...

daysOfWeekHighlighted

Type: Array

Default: [0,6]

Days of the week that should be highlighted. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: highlight weekends: [0,6].

 ...
  daysOfWeekHighlighted: [0,6],
 ...

dateDisabled

Type: Array

Default: []

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

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

tDatePicker triggers a number of events in certain circumstances. Events have extra data attached to the event object that is passed to any event handlers

<script type="text/javascript">
  $(document).ready(function(){
    var t_calendar = $('.t_datepicker');
    t_calendar.tDatePicker();
    t_calendar.on( 'event_name',function() {
      // do something ...
    })
  })
</script>

Event name: clickDateCI, clickDateCO, beforeShowDay, afterShowDay ...

clickDateCI

Event: Click

Parameter: (event, fn())

Fired when you click the date check-in picker.

<script type="text/javascript">
    $('.t-datepicker').tDatePicker({
      // Options
    }).on('clickDateCI',function(e, dateCI) {
      // console.log('clickDateCI do something')
    })
</script>

clickDateCO

Event: Click

Parameter: (event, fn())

Fired when you click the date check-out picker.

<script type="text/javascript">
    $('.t-datepicker').tDatePicker({
      // Options
    }).on('clickDateCO',function(e, dateCO) {
      // console.log('clickDateCO do something')
    })
</script>

beforeShowDay

Event: Click

Parameter: (event, fn())

Fired before table calendar days show when you click check-in or check-out.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('beforeShowDay',function() {
    // console.log('beforeShowDay do something')
  })
</script>

afterShowDay

Event: Click

Parameter: (event, fn())

Fired after table calendar days showed.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('afterShowDay',function() {
    // console.log('afterShowDay do something')
  })
</script>

toggleAfterHideDay

Event: toggleClick

Parameter: (event, fn())

Fired after table calendar days hided.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('toggleAfterHideDay',function() {
    // console.log('toggleAfterHideDay do something')
  })
</script>

afterCheckOut

Event: Click

Parameter: (event, fn())

Fired when you have selected day on the table calendar of check-out picker.

No support only Picker View Demo

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('afterCheckOut',function(e, dataDate){
    // console.log(new Date(dataDate[0])) // check-in
    // console.log(new Date(dataDate[1])) // check-out
  })
</script>

eventClickDay

Event: Click

Parameter: (event, fn())

Fired whenever you have selected day on the table calendar picker. If you don't have date check-out, You will have dataDate check-in.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('eventClickDay',function(e, dataDate){
    // console.log(new Date(dataDate[0])) // check-in
    // console.log(new Date(dataDate[1])) // check-out
  })
</script>

selectedCI

Event: Click

Parameter: (event, fn())

Fired when you have selected day on the table calendar of check-in picker.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('selectedCI',function(e, slDateCI) {
    // console.log('selectedCI do something')
    // console.log(new Date(slDateCI))
  })
</script>

selectedCO

Event: Click

Parameter: (event, fn())

Fired when you have selected day on the table calendar of check-out picker.

No support only Picker View Demo

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('selectedCO',function(e, slDateCO) {
    // console.log('selectedCO do something')
    // console.log(new Date(slDateCO))
  })
</script>

onChangeCI

Event: Click

Parameter: (event, fn())

Fired when your input value of t-input-check-in changed date.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('onChangeCI',function(e, changeDateCI) {
    // console.log'onChangeCI do something')
    // console.log(new Date(changeDateCI))
  })
</script>

onChangeCO

Event: Click

Parameter: (event, fn())

Fired when your input value of t-input-check-out changed date.

No support only Picker View Demo

<script type="text/javascript">
  $('.t-datepicker').tDatePicker({
    // Options
  }).on('onChangeCO',function(e, changeDateCO) {
    // console.log'onChangeCO do something')
    // console.log(new Date(changeDateCO))
  })
</script>

Methods are called on a t-datepicker by calling the tDatepicker function with a string first parameter, followed by any parameters the method takes

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

show

Type: String

Default: none

Show the picker. You can show all table theme or only table theme follow class | id name.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('show') // show all
  $('.class_name').tDatePicker('show')   // show only follow class | id name
</script>

hide

Type: String

Default: none

Hide the picker. You can hide all table theme or only table theme follow class | id name.

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('hide') // hide all
  $('.class_name').tDatePicker('hide')   // hide only follow class | id name
</script>

update

Type: String | Date | Array, optional

Default: none

Update the datepicker with given arguments or the current input value. The arguments can be either an array of strings, an array of Date objects, multiples strings or multiples Date objects. If date arguments are provided and they are Date objects, it is assumed to be “local” Date objects, and will be converted to UTC for internal use.

Note: You have make sure date syntax format yyyy-mm-dd. If you don't like it. You can custom with formatDate

Or, you want use new Date(), Be carefull with number of months, it is start 0 -> 11 <=> Jan -> Dec

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('update', '2018-07-17')
  $('.t-datepicker').tDatePicker('update', new Date(2018,06,17))
  $('.t-datepicker').tDatePicker('update', ['2018-07-17', '2018-07-18'])
  $('.t-datepicker').tDatePicker('update', [new Date(2018,06,17), new Date(2018,06,17)])
</script>

To reset the datepicker and clear the selected date, pass an empty string with update

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('update', '')
</script>

Detail Update >>

updateCI

Type: String | Date

Default: none

You have make sure date syntax format yyyy-mm-dd. If you get date into input value, you can change format with setFormatValueInput: 'yyyy-mm-dd'

Or, you want use new Date(), becarefull with number of months. Tt is start 0 -> 11 <=> Jan -> Dec

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('updateCI', '2018-07-17')
  $('.t-datepicker').tDatePicker('updateCI', new Date(2018,06,17))
</script>

To reset the updateCI and clear the selected date, pass an empty string with updateCI

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('updateCI', '')
</script>

Detail UpdateCI >>

updateCO

Type: String | Date

Default: none

The same updateCI. But, if you don't setup setDateCheckIn or check-in value='null'. tDatePicker will be set default date of check-in for setLimitDays

No support only Picker View Demo

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('updateCO', '2018-07-17')
  $('.t-datepicker').tDatePicker('updateCO', new Date(2018,05,20))
</script>

To reset the updateCO and clear the selected date, pass an empty string with updateCO

<script type="text/javascript">
  $('.t-datepicker').tDatePicker('updateCO', '')
</script>

Detail UpdateCO >>

setStartDate

Type: String | Date

Default: none

Sets a new lower date limit on the datepicker. See startDate for valid values.
Omit startDate (or provide an otherwise falsey value) to unset the limit.

<script type="text/javascript">
  $(document).ready(function(){
    $(".t-datepicker").tDatePicker('setStartDate', '2018-07-17')
  })
</script>

setEndDate

Type: String | Date

Default: none

Sets a new lower date limit on the datepicker. See endDate for valid values.
Omit endDate (or provide an otherwise falsey value) to unset the limit.

<script type="text/javascript">
  $(document).ready(function(){
    $(".t-datepicker").tDatePicker('setEndDate', '2018-12-30')
  })
</script>

getDate

Type: String

Default: none

Returns a localized date object representing the internal date object of the first datepicker in the selection. For multidate pickers, returns the latest date selected.

<script type="text/javascript">
  $(document).ready(function(){
    var getDate = $('.t-datepicker').tDatePicker('getDate')
    // Return Date Object
    // e.g: Wed Jul 18 2018 07:00:00 GMT+0700
  })
</script>

getDates

Type: String

Default: none

Returns a list of localized date objects representing the internal date objects of the first datepicker in the selection. For use with multidate pickers.

<script type="text/javascript">
  $(document).ready(function(){
    var getDates = $('.t-datepicker').tDatePicker('getDates')
    // Return [Date Object, Date Object]
  })
</script>

getDateInput

Type: String

Default: none

Returns a localized date string representing the internal date objects of the input check-in. For use with multidate pickers. Date type follow formatDate

<script type="text/javascript">
  $(document).ready(function(){
    var getDateInput = $('.t-datepicker').tDatePicker('getDateInput')
    // Return Date String
    // e.g: '2018-07-17'
  })
</script>

getDateInputs

Type: String

Default: none

Returns a list localized date string representing the internal date objects of the input check-in and check-out. For use with multidate pickers. Date type follow formatDate

<script type="text/javascript">
  $(document).ready(function(){
    var getDateInput = $('.t-datepicker').tDatePicker('getDateInput')
    // Return [Date String, Date String]
    // e.g: Return ['2018-07-17', '2018-07-18']
  })
</script>

getDateUTC

Type: String

Default: none

Returns the internal UTC date number, as-is and unconverted to local time, of the first datepicker in the selection. For multidate pickers, returns the latest date selected.

<script type="text/javascript">
  $(document).ready(function(){
    var getDateUTC = $('.t-datepicker').tDatePicker('getDateUTC')
    // Return UTC Date Number
    // e.g: Return 1531785600000
  })
</script>

getDateUTCs

Type: String

Default: none

Returns the internal list of UTC date number, as they are and unconverted to local time, of the first datepicker in the selection and of the last datepicker in selection. For use with multidate pickers.

<script type="text/javascript">
  $(document).ready(function(){
    var getDateUTCs = $('.t-datepicker').tDatePicker('getDateUTCs')
    // Return [UTC CI, UTC CO]
    // e.g: Return [1531785600000, 1531872000000]
  })
</script>

getStartDate

Type: String

Default: none

Returns the lower date limit on the datepicker.

<script type="text/javascript">
  $(document).ready(function(){
    var getStartDate = $('.t-datepicker').tDatePicker('getStartDate')
    // Return Date Object
    // e.g: Wed Jul 18 2018 07:00:00 GMT+0700
  })
</script>

getStartDateUTC

Type: String

Default: none

Returns the lower UTC date limit on the datepicker.

<script type="text/javascript">
  $(document).ready(function(){
    var getStartDateUTC = $('.t-datepicker').tDatePicker('getStartDateUTC')
    // Return Date Number
    // e.g: 1531785600000
  })
</script>

getEndDate

Type: String

Default: none

Returns the upper date limit on the datepicker.

<script type="text/javascript">
  $(document).ready(function(){
    var getEndDate = $('.t-datepicker').tDatePicker('getEndDate')
    // Return Date Object
    // e.g: Wed Jul 18 2018 07:00:00 GMT+0700
  })
</script>

getEndDateUTC

Type: String

Default: none

Returns the upper UTC date limit on the datepicker.

<script type="text/javascript">
  $(document).ready(function(){
    var getDateUTC = $('.t-datepicker').tDatePicker('getDateUTC')
    // Return Date Number
    // e.g: 1531785600000
  })
</script>

Options Action

Options Format

Options Date

Options Theme

Event

Method

Options

autoClose

durationArrowTop

valiDation

formatDate

dateCheckIn

dateCheckOut

startDate

endDate

limitPrevMonth

limitNextMonth

limitDateRanges

showFullDateRanges

fnDataEvent

mergeDataEvent

numCalendar

titleCheckIn

titleCheckOut

titleToday

titleDateRange

titleDateRanges

titleDays

titleMonths

titleMonthsLimitShow

replaceTitleMonths

showDateTheme

iconArrowTop

iconDate

arrowPrev

arrowNext

toDayShowTitle

dateRangesShowTitle

dateRangesHover

toDayHighlighted

nextDayHighlighted

daysOfWeekHighlighted

dateDisabled

Events

clickDateCI

clickDateCO

beforeShowDay

afterShowDay

toggleAfterHideDay

afterCheckOut

eventClickDay

selectedCI

selectedCO

onChangeCI

onChangeCO

Methods

show

hide

update

updateCI

updateCO

setStartDate

setEndDate

getDate

getDates

getDateInput

getDateInputs

getDateUTC

getDateUTCs

getStartDate

getStartDateUTC

getEndDate

getEndDateUTC