t-datepicker
Installation Documents Options Events Methods Demos
Twitter Github

Flow Update

Methods Update define, reset new date check-in and check-out of date calendar. But, it also dependencies on some follow options and methods startDate, limitDateRanges, numCalendar.

Why? Because t-datepicker is focus dateRanges. This is important to set date of check-in or date of check-out on table theme calendar. If you don't set value, these are options will define default date for you.

This is demo default. 

<script type="text/javascript"> 
  $(document).ready(function(){
    $('.t-datepicker').tDatePicker({
      startDate       : '2018-07-20',
      limitDateRanges : 31,
      limitNextMonth  : 2
    })
  })
</script>

Scroll down, these are examples that you can use methods update.

Update lower startDate + limitDateRanges

We have to understood:
limitDate = startDate + limitDateRanges = '2018-08-20'
CI: Check In
CO: Check Out
All cases lower limitDate except case 1 lower startDate and limitDate. 

$(".t-datepicker").tDatePicker('update', ['CI', 'CO'])
Case 1: Update CI and CO lower startDate = '2018-07-20'.
CI = startDate, CO = startDate + 1 
 ...
  $(".class_name").tDatePicker('update', ['2018-06-29', '2018-06-30'])
  // Auto update CI = '2018-07-20', CO = '2018-07-21'
 ...
Case 2: Update CI lower startDate = '2018-07-20'. CO upper startDate and lower limitDate = '2018-08-20'
CI = startDate, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['2018-06-29', '2018-07-30'])
  // Auto update CI = '2018-07-20', CO = '2018-07-21'
 ...
Case 3: Update CI and CO upper startDate = '2018-07-20'.
CI = update_CI, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['2018-07-29', '2018-07-30'])
  // Return CI = '2018-07-29', CO = '2018-07-30'
 ...
Case 4: Update CI and CO upper startDate = '2018-07-20'. But CI > CO
CI = startDate, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['2018-07-29', '2018-07-28'])
  // Auto update CI = '2018-07-20',
  // CO = '2018-07-28'
 ...
Case 5: Update CI and CO upper startDate = '2018-07-20'. But CO have value empty, reset date check-out.
CI = update_CI, CO = ' ' 
 ...
  $(".class_name").tDatePicker('update', ['2018-06-29', '']) // lower startDate 
  // Auto update CI = '2018-07-20', CO = null
  $(".class_name").tDatePicker('update', ['2018-07-29', ''])
  // Return CI = '2018-07-29', CO = null
  $(".class_name").tDatePicker('update', ['2018-10-29', '']) // upper limitEndDate 
  // Auto update CI = '2018-10-20', CO = null
 ...
Case 6: Update CI and CO upper startDate = '2018-07-20'. But CI have value empty, reset date check-in
CI = startDate, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['', '2018-06-29']) // lower startDate 
  // Auto update CI = '2018-07-20', Auto update CO = '2018-07-20'

  $(".class_name").tDatePicker('update', ['', '2018-07-29'])
  // Auto update CI = '2018-07-20', CO = '2018-07-29'

  $(".class_name").tDatePicker('update', ['', '2018-10-29']) // upper limitEndDate 
  // Auto update CI = '2018-09-28', CO = '2018-10-20'
  
 ...
Case 7: Update CI === CO
CI = update_CI, CO = null 
 ...
  $(".class_name").tDatePicker('update', ['2018-06-29', '2018-06-29']) // lower startDate 
  // Auto update CI = '2018-07-20', Auto update CO = '2018-07-21'
  $(".class_name").tDatePicker('update', ['2018-07-29', '2018-07-29'])
  // Auto update CI = '2018-07-29', CO = null
  $(".class_name").tDatePicker('update', ['2018-10-29', '2018-10-29']) // upper limitEndDate 
  // CI = null, Auto update CO = '2018-10-20'
 ...

Update upper startDate + limitDateRanges

We have to understood:
startDate = '2018-07-20'
limitDate = startDate + limitDateRanges = '2018-08-20'
limitEndDate = startDate + limitNextMonth + limitDateRanges = '2018-10-20'
CI: Check In
CO: Check Out
All cases upper limitDate and lower limitEndDate. Except case 1 and 2 

$(".t-datepicker").tDatePicker('update', ['CI', 'CO'])
Case 1: Update CI and CO upper limitEndDate = '2018-10-20'.
CI = CO - limitDateRanges, CO = limitEndDate 
 ...
  $(".class_name").tDatePicker('update', ['2018-10-29', '2018-10-30'])
  // Auto update CI = '2018-09-29', CO = '2018-10-20'
 ...
Case 2: Update CI lower limitEndDate, CO upper limitEndDate = '2018-10-20'
CI = update_CI, CO = limitEndDate. 
 ...
  $(".class_name").tDatePicker('update', ['2018-09-29', '2018-10-30'])
  // CI = '2018-09-29', Auto update CO = '2018-10-20'
 ...
Case 3: Update CI and CO upper limitDate = '2018-08-20' and lower limitEndDate = '2018-10-20'
CI = startDate, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['2018-09-29', '2018-09-30'])
  // Auto update CI = '2018-09-29', CO = '2018-09-30'
 ...
Case 4: Update CI and CO the same Case 3. But CO lower CI
CI = CO - limitDateRanges, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['2018-09-29', '2018-09-28'])
  // Auto update CI = '2018-08-28', CO = '2018-09-28'
 ...
Case 5: Update CI and CO upper limitDate = '2018-08-20'. CO have empty value, reset CO
CI = update_CI, CO = ' ' 
 ...
  $(".class_name").tDatePicker('update', ['2018-09-29', ''])
  // Auto update CI = '2018-09-29', CO = null
 ...
Case 6: Update CI and CO upper limitDate = '2018-08-20'. CI have empty value, reset CI
CI = CO - limitSateRanges, CO = update_CO 
 ...
  $(".class_name").tDatePicker('update', ['', '2018-06-29']) // CO lower startDate
  // CI = '2018-07-20', Auto update CO = '2018-07-21'
  $(".class_name").tDatePicker('update', ['', '2018-09-29'])
  // Auto update CI = '2018-08-29', CO = '2018-09-29'
  $(".class_name").tDatePicker('update', ['', '2018-10-29']) // CO upper limitEndDate
  // Auto update CI = '2018-08-28', Auto update CO = '2018-10-20'
 ...
Case 7: Update CI === CO
CI = update_CI, CO = null 
 ...
  $(".class_name").tDatePicker('update', ['2018-06-29', '2018-06-29']) // lower startDate 
  // Auto update CI = '2018-07-20', Auto update CO = '2018-07-21'
  $(".class_name").tDatePicker('update', ['2018-07-29', '2018-07-29'])
  // Auto update CI = '2018-07-29', CO = null
  $(".class_name").tDatePicker('update', ['2018-10-29', '2018-10-29']) // upper limitEndDate 
  // Auto update CI = '2018-08-28', Auto update CO = '2018-10-20'
 ...

UpdateCI None CO

Continuse, We strart with old demo default. 

<script type="text/javascript"> 
  $(document).ready(function(){
    $('.t-datepicker').tDatePicker({
      startDate       : '2018-07-20',
      limitDateRanges : 31,
      limitNextMonth  : 2
    })
  })
</script>

We have to understood:
startDate = '2018-07-20'
limitDate = startDate + limitDateRanges = '2018-08-20'
limitEndDate = startDate + limitNextMonth + limitDateRanges = '2018-10-20'
CI: Check In
CO: Check Out

Case 1: Update CI none CO lower startDate = '2018-07-20'.
CI = startDate, CO = startDate + 1 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCI', '2018-06-29')
  // Auto update CI = '2018-07-20', CO = '2018-07-21
 ...
Case 2: Update CI none CO upper startDate = '2018-07-20'.
CI = update_CI, CO = ' ' 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCI', '2018-07-29')
  // Auto update CI = '2018-07-29', CO = null
 ...
Case 3: Update CI none CO upper limitEndDate = '2018-10-20'.
CI = limitEndDate, CO = ' ' 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCI', '2018-10-29')
  // Auto update CI = '2018-10-20', CO = null
 ...

UpdateCO None CI

Continuse, We strart with old demo default. 

<script type="text/javascript"> 
  $(document).ready(function(){
    $('.t-datepicker').tDatePicker({
      startDate       : '2018-07-20',
      limitDateRanges : 31,
      limitNextMonth  : 2
    })
  })
</script>

We have to understood:
startDate = '2018-07-20'
limitDate = startDate + limitDateRanges = '2018-08-20'
limitEndDate = startDate + limitNextMonth + limitDateRanges = '2018-10-20'
CI: Check In
CO: Check Out

Case 1: Update CI none CO lower startDate = '2018-07-20'.
CI = startDate, CO = startDate + 1 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCO', '2018-06-29')
  // Auto update CI = '2018-07-20', CO = '2018-07-21'
 ...
Case 2: Update CO none CI, CO lower limitDate = '2018-08-20'.
CI = startDate, CO = update_CO 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCO', '2018-07-29')
  // Auto update CO = '2018-07-20', CO = '2018-07-29'
 ...
Case 3: Update CO none CI, CO upper limitDate = '2018-08-20' and CO lower limitEndDate = '2018-10-20'
CI = CO - limitDateRanges, CO = limitEndDate 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCO', '2018-09-29')
  // Auto update CO = '2018-08-29', Auto update CO = '2018-09-29'
 ...
Case 4: Update CO none CI, CO upper limitDate = '2018-08-20' and CO lower limitDate = '2018-10-20'
CI = CO - limitDateRanges, CO = limitEndDate 
 ...
  $('.class_name').tDatePicker('update', '') // Reset CI && CO
  $('.class_name').tDatePicker('updateCO', '2018-10-29')
  // Auto update CO = '2018-08-29', Auto update CO = '2018-10-20'
 ...