search

crazychicken / t-datepicker

Date range picker, two-pane calendar with custom rendering and multiple selection. The tDatepicker more than 35 pretty options and many methods help you change date, getDate, update when you need.
https://t-datepicker.getqwerty.com/
MIT License
50 stars 17 forks source link

Timezone issue #15

Open kfelahiju opened 5 years ago

kfelahiju commented 5 years ago

If you change your timezone to a negative timezone calendar dates doesn't show up. For example if you change your timezone to UTC -08:00 Pacific Time (US & Canada) it doesn't work. please see the attachment t-calendar

sandeshchaudhari commented 5 years ago

I am also facing the same issue.Can you please solve this issue asap.

sandeshchaudhari commented 5 years ago

Vista Villa

When timezone set to Us it doesn't work.Can you please solve this problem at the earliest

thekendog commented 5 years ago

Came across this library and it looked promising. Ran into this same issue. Glad it's not just me.

SatishGatkhanee commented 5 years ago

I am also facing the same issue. I suggest please use moment js for solving date issue.

abhishek-kumar-ia commented 5 years ago

hi all, i have solve this issue. using moment.js code mention below.

/*

;(function($){ 'use strict'; // Init - Default options var Defaults = { // Action autoClose : true, durationArrowTop : 200,

// Theme
// Số tháng được hiển thị - mặc định 2 tháng
numCalendar    : 2,

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', 'September', 'October', 'November', "December"],
titleMonthsLimitShow : 3,
replaceTitleMonths : null, // Thg
showDateTheme   : null, // dd-mm-yy

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

toDayShowTitle       : true,  // true|false
dateRangesShowTitle  : true,  // true|false
dateRangesHover      : true,  // true|false

toDayHighlighted     : false, // true|false
nextDayHighlighted   : false, // true|false
daysOfWeekHighlighted: [0,6],
// ### ####

// FORMAT
// Quy định ngày hiển thị ra input value
// yyyy-dd-mm, yyyy-mm-dd, dd-mm-yyyy, mm-dd-yyyy
formatDate      : 'yyyy-mm-dd',
// ### ####

// DATE
// Setup ngày t-check-in và ngày t-check-out khi đã có ngày, ngày t-check-out không được lớn hơn t-check-in - mặc định show ngày toDay
// dateCheckIn: '25/06/2018',  // DD/MM/YY
// dateCheckOut: '26/06/2018', // DD/MM/YY
dateCheckIn  : null,
dateCheckOut : null,
startDate    : null,
endDate      : null,

// Số tháng được next hoặc prev trong phạm vi show ra của calendar tính từ ngày toDay - mặc định next 12 tháng
limitPrevMonth : 0,
limitNextMonth : 11,

// Số ngày giới hạn của t-check-in -> t-check-out để thê hiện chuỗi .t-range
limitDateRanges    : 31,
showFullDateRanges : false, // true -> full days || false - 1 day
// ### ###

// DATA HOLIDAYS
// Data holidays
fnDataEvent    : null,
mergeDataEvent : false,
// ### ###
dateDisabled : []

};

var update_options; $.fn.tDatePicker = function( pr_el, options ) { // Get date Today var d = new Date(); d.setHours(0, 0, 0, 0); var toDay = d.valueOf();

// console.log(pr_el) // options first call
// Check update options and Methods, Object or string
if ( options === undefined && typeof(pr_el) !== 'string' ) {
  update_options = pr_el;
    if (typeof update_options.endDate == 'undefined') {
        update_options.startDate.setHours(0, 0, 0, 0);
        update_options.endDate = new Date(
            new Date(update_options.startDate).setFullYear(update_options.startDate.getFullYear() + 1)
        );
    }

    update_options.startDate.setHours(0, 0, 0, 0);
    update_options.endDate.setHours(0, 0, 0, 0);
    update_options.dateCheckIn.setHours(0, 0, 0, 0);
    update_options.dateCheckOut.setHours(0, 0, 0, 0);
  }

// Các giá trị update phải gán trước khi merge Object vì sử dụng convertFormatDf() format dd-mm-yyyy trước.
update_options.formatDate = update_options.formatDate || Defaults.formatDate;
// setStart là ngày đầu tiên của cuốn lịch, những ngày trước nó sẽ disbale,
// nếu không set giá trị default là toDay
// Nếu ko startDate thì sẽ lấy ngày toDay làm mặc định
// Khi setStart đựa vào limitNextMonth : 11, limitDateRanges: 31, để biết được ngày getEndDate
update_options.startDate = update_options.startDate || toDay;
if ( update_options.startDate === '' || update_options.startDate === 'null' ) {
  update_options.startDate = toDay;
}
update_options.startDate = convertToDateIntegerValue(convertFormatDf(update_options.startDate))
  var sd = new Date(update_options.startDate);
  sd.setHours(0, 0, 0, 0);
  var nextDay = new Date(sd.getFullYear(), sd.getMonth(), sd.getDate() + 1).valueOf(); // UTC

if ( pr_el === 'setStartDate' && typeof(pr_el) === 'string' ) {
  update_options.startDate = convertToDateIntegerValue(convertFormatDf(options))
}
if ( pr_el === 'setEndDate' && typeof(pr_el) === 'string' ) {
  update_options.endDate = convertToDateIntegerValue(convertFormatDf(options))
}

// Check giá trị truyền vào phải là ngày nếu === null or empty thì trả về null
if ( update_options.dateCheckIn === ''
|| update_options.dateCheckIn === 'null' ) {
  update_options.dateCheckIn = null;
}
if ( update_options.dateCheckOut === ''
|| update_options.dateCheckOut === 'null' ) {
  update_options.dateCheckOut = null;
}
if ( update_options.endDate === ''
|| update_options.endDate === 'null' ) {
  update_options.endDate = null;
}

if ( options !== undefined ) {
  update_options.numCalendar = update_options.numCalendar || 2;
  var num_Limit = update_options.limitDateRanges || 31;
  var num_month_Limit = update_options.limitNextMonth || 11;
  // get endDate Calendar phụ thuộc vào số lượng numCalendar được show và nextMonth
  var limitEndDate = new Date ( sd.getFullYear(), sd.getMonth() + update_options.numCalendar + num_month_Limit - 1, sd.getDate());
  limitEndDate = convertToDateIntegerValue(convertFormatDf(limitEndDate))
  // Update for CI - CO
  if ( pr_el === 'update' ) {
    // update_options.dateCheckIn  = convertToDateIntegerValue(convertFormatDf(options[0]));
    // update_options.dateCheckOut = convertToDateIntegerValue(convertFormatDf(options[1]));
    // Update for CI - CO
    if ( options.length === 2 ) {
      checkCI(options[0]);
      checkCO(options[1]);
    } else {
      // Update for CI
      checkCI(options);
    }
    if ( options === '' ) {
      update_options.dateCheckIn = null;
      update_options.dateCheckOut = null;
    }
  }
  // Update only for CI
  if ( pr_el === 'updateCI' ) {
    checkCI(options);
  }
  // Update only for CO
  if ( pr_el === 'updateCO' ) {
    checkCO(options)
  }
}
// Update for CI
function checkCI( pr_options ) {
  // Xét default khi CI = ''
  if ( pr_options === '') {
    update_options.dateCheckIn = null;
    update_options.dateCheckOut = null;
    return;
  }
  var CI = convertToDateIntegerValue(convertFormatDf(pr_options));
    var date = moment(CI).clone()._d; 

    var dateLimit = new Date(date.getFullYear(), date.getMonth(), date.getDate() + num_Limit);
    dateLimit.setHours(0, 0, 0, 0);
  dateLimit    = convertToDateIntegerValue(convertFormatDf(dateLimit))
  var op_CO = convertToDateIntegerValue(convertFormatDf(update_options.dateCheckOut));
  // - update CI nhỏ hơn update_options.startDate thì lấy ngày update_options.startDate
  update_options.dateCheckIn = CI;
  if ( CI < update_options.startDate ) {
    update_options.dateCheckIn = update_options.startDate;
  }
  // Set day CI lớn hơn limit day trả về ngày cuối cùng
  if ( CI > limitEndDate ) {
    update_options.dateCheckIn = limitEndDate;
  }

  // - update CI lớn hơn hoặc = CO thì lấy ngày update CO = null
  if ( CI >= op_CO || op_CO > dateLimit ) {
    update_options.dateCheckOut = null;
  }
}
// Update for CO
function checkCO( pr_options ) {
  var op_CI = convertToDateIntegerValue(convertFormatDf(update_options.dateCheckIn));
  // Bắt buộc phải có CI
  // - update CO nhỏ hơn CI thì CO = null -> CI = ngày hiện tại
  // - update CO không được === CI
  // - update CO không được lớn hơn limitDateRanges
  // Xét default khi CO = ''
  if ( pr_options === '' ) {
    update_options.dateCheckIn = op_CI;
    if ( isNaN(op_CI) ) {
      update_options.dateCheckIn = null;
    }
    update_options.dateCheckOut = null;
    return;
  }
  var CO = convertToDateIntegerValue(convertFormatDf(pr_options));
    var date = moment(CO).clone()._d; 

  var CO_dateLimit = new Date(date.getFullYear(), date.getMonth(), date.getDate()-num_Limit);
  CO_dateLimit = convertToDateIntegerValue(convertFormatDf(CO_dateLimit))
  // Lớn hơn ngày giới hạn
  if ( CO > limitEndDate ) {
    update_options.dateCheckOut =  limitEndDate;
    update_options.dateCheckIn = CO_dateLimit;
    return;
  }

  if ( CO > update_options.startDate ) {
    // Set day CI lớn hơn limit day trả về ngày cuối cùng
    // Gọi lần đầu chưa có CI
    if ( update_options.dateCheckIn === undefined || update_options.dateCheckIn === null ) {
      update_options.dateCheckOut = CO;
      // Cố định chọn CI
      if ( update_options.startDate > CO_dateLimit ) {
        update_options.dateCheckIn = update_options.startDate;
      } else {
        update_options.dateCheckIn = CO_dateLimit;
      }
    } else {
      // Đã có CI
      // update_options.startDate 10/10 - CO_dateLimit-31 = 15/10
      update_options.dateCheckOut = CO;
      // Nằm trong phạm vi limitDateRanges - default 31 ngày
      // update_options.startDate đến CO là 31 ngày
      if ( update_options.startDate > CO_dateLimit ) {
        // Cần xác định CI luôn luôn = CI chỉ = update_options.startDate khi CO < CI
        update_options.dateCheckIn = op_CI;
        if ( CO < op_CI ) {
          update_options.dateCheckIn = update_options.startDate;
        }
      } else {
        // Vượt khỏi phạm vi limitDateRanges - default 31 ngày so với update_options.startDate
        // Vượt khỏi 31 ngày mà CO > CI - vẫn còn ngày CI
        if ( op_CI > CO_dateLimit ) {
          update_options.dateCheckIn = op_CI;
        } else {
          update_options.dateCheckIn = CO_dateLimit;
        }
        // Vượt khỏi 31 ngày mà CO < CI - không có CI, xác định CI
        if ( op_CI > CO ) {
          update_options.dateCheckIn = CO_dateLimit;
        }
      }
    }
  } else {
    update_options.dateCheckIn = update_options.startDate;
    update_options.dateCheckOut = nextDay;
  }
}

// Update data date for methods 'show', 'hide', startDate
// getDate, getDateUTC, getDateInput để trước để get được cả giá trị chưa có là 'null'
var findValueCI = this.find('.t-input-check-in').val();
var findValueCO = this.find('.t-input-check-out').val();
if (typeof(pr_el) === 'string' ) {
  if ( pr_el === 'show' || pr_el === 'hide' ) {
    if ( findValueCI !== 'null' ) {
      update_options.dateCheckIn = findValueCI;
    }
    if ( findValueCO !== 'null' ) {
      update_options.dateCheckOut = findValueCO;
    }
  }

  // Method getDate, getDateUTC, getDateInput ...
  // Nếu CI không có giá trị, set từng methods để trả về kết quả null or [null, null]
  if ( findValueCI === 'null' ) {
    if ( pr_el === 'getDate' || pr_el === 'getDateInput' || pr_el === 'getDateUTC' ) {
      return null;
    }
    if ( pr_el === 'getDates' || pr_el === 'getDateInputs' || pr_el === 'getDateUTCs' ) {
      return [null, null];
    }
  }
  // Nếu CI có giá trị, set từng methods để trả về kêt quả cụ thể:
  if ( findValueCI !== 'null' ) {
    if ( findValueCO === 'null' ) {
      if ( pr_el === 'getDates' ) {
          return [moment(findValueCI).clone()._d, null]
      }
      if ( pr_el === 'getDateInputs' ) {
        return [findValueCI, null]
      }
      if ( pr_el === 'getDateUTCs' ) {
        var d_CI = convertToDateIntegerValue(convertFormatDf(findValueCI));
        return [d_CI, null]
      }
    }
    // getDate
    if ( pr_el === 'getDate' ) {
        return moment(findValueCI).clone()._d
    }
    if ( pr_el === 'getDates' ) {
        return [moment(findValueCI).clone()._d, moment(findValueCO).clone()._d]
    }

    // getDateInput
    if ( pr_el === 'getDateInput' ) {
      return findValueCI;
    }
    if ( pr_el === 'getDateInputs' ) {
      return [findValueCI, findValueCO]
    }

    // getDate
    if ( pr_el === 'getDateUTC' ) {
      return convertToDateIntegerValue(convertFormatDf(findValueCI));
    }
    if ( pr_el === 'getDateUTCs' ) {
      var d_CI = convertToDateIntegerValue(convertFormatDf(findValueCI));
      var d_CO = convertToDateIntegerValue(convertFormatDf(findValueCO));
      return [d_CI, d_CO]
    }
  }
}

// ### ###
// ### MERGE OBJECT MAIN OPTIONS DEFAULT ####
var this_el = this;
  var settings = $.extend({}, Defaults, update_options);

// ### ###
// Check Number
settings.durationArrowTop = Number(settings.durationArrowTop)
settings.limitPrevMonth   = Number(settings.limitPrevMonth)
settings.limitNextMonth   = Number(settings.limitNextMonth)
settings.numCalendar      = Number(settings.numCalendar)
settings.limitDateRanges  = Number(settings.limitDateRanges)
settings.titleMonthsLimitShow  = Number(settings.titleMonthsLimitShow)
settings.autoClose = settings.autoClose;

  if (this_el.hasClass("t-datepicker-autoclose-true")) {
      settings.autoClose = true;
  }
  if (this_el.hasClass("t-datepicker-autoclose-false")) {
      settings.autoClose = false;
  }

// Get Start Date and get End Date để sau Object settings là vì phải chờ có giá trị mà lấy
if ( typeof(pr_el) === 'string' ) {
  // getStartDate
  var get_startDate = settings.startDate || settings.dateCheckIn;
  if ( pr_el === 'getStartDate' ) {
    return new Date(get_startDate)
  }
  if ( pr_el === 'getStartDateUTC' ) {
    return convertToDateIntegerValue(convertFormatDf(get_startDate))
  }

  // getEndDate
  var get_endDate = settings.endDate || new Date ( sd.getFullYear(), sd.getMonth() + settings.numCalendar + settings.limitNextMonth - 1, sd.getDate());
  if ( pr_el === 'getEndDate' ) {
      return moment(get_endDate).clone()._d;
  }
  if ( pr_el === 'getEndDateUTC' ) {
    return convertToDateIntegerValue(convertFormatDf(get_endDate));
  }
}

// FUNCTION UTILITY
// Check number first 0 - 01, 02, 03 ....
function check_num_10(pr_el) {
  if ( pr_el < 10 ) {
    return pr_el = '0' + pr_el
  } else {
    return pr_el;
  }
}
function convertArrayToString(pr_array) {
  pr_array = pr_array.toString();
  pr_array = pr_array.replace(/,/g, '');
  return pr_array;
}
// Function Parents
function fnParents(pr_el_parent, pr_el_class) {
  var i = 0;
  while ( pr_el_parent.className.match(pr_el_class) === null  ) {
    if ( pr_el_parent.className === pr_el_class ) {
      return pr_el_parent;
    }
    if ( pr_el_parent.nodeName === 'HTML' ) {
      return pr_el_parent;
    }
    pr_el_parent = pr_el_parent.parentElement;
    // Kiểm tra phần tử, alert không có element bên ngoài thì set default DOM ROOT
    if ( pr_el_parent === null ) {
      return document.body.parentElement;
    }
    // check stop while
    i++; if (i>500) {return;}
    // return pr_el_parent;
  }
  return pr_el_parent;
}
// Function Append for toDay, hover day show num night
function appendSpan(pr_el, pr_class, pr_class_span, pr_text_node) {
  if ( pr_class != '' ) {
    pr_el.className = pr_el.className + ' ' + pr_class;
  } else {
    pr_el.className = pr_el.className + pr_class;
  }
  var node = document.createElement("span");
  node.className = pr_class_span;
  var textnode = document.createTextNode(pr_text_node);
  node.appendChild(textnode);
  pr_el.appendChild(node)
}

// GLOBAL VARIABLE
// var aDays = [ 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN' ];
var aDays = settings.titleDays;
// var aMonths = ['Tháng 01', 'Tháng 02', 'Tháng 03', 'Tháng 04', 'Tháng 05', 'Tháng 06', 'Tháng 07', 'Tháng 08', 'Tháng 09', 'Tháng 10', 'Tháng 11', "Tháng 12"]
// [ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su' ];
// Theme Function  set type day of week
function setDayOfWeek () {
  for ( var i = 0; i < aDays.length; i++ ) {
    if ( aDays[i].indexOf('<th>') === -1 ) {
      aDays[i] = '<th>'+aDays[i]+'</th>';
    } else {
      aDays[i] = aDays[i];
    }
  }
  return convertArrayToString(aDays)
}

// Theme Function get HTML TABLE for calendar
var setTemplate = '<div class="t-table-wrap"><table class="t-table-condensed">'+
'<thead>'+
'<tr>'+
'<th class="t-arrow t-prev">'+settings.arrowPrev+'</th>'+
'<th colspan="5" class="t-month"></th>'+
'<th class="t-arrow t-next">'+settings.arrowNext+'</th>'+
'</tr>'+
'<tr>'+
setDayOfWeek()+
'</tr>'+
'</thead>'+
'<tbody></tbody>'+
'</table></div>'
// console.log(setTemplate)
// options add theme
var numCalendar = settings.numCalendar;
// if ( numCalendar < 1 || isNaN( numCalendar )) {
//     return console.log("'Thank you for using t-datepicker. Please, check numCalendar :'%c " + numCalendar + ' ', 'background: #f16d99; color: #fff');
// }
// .t-datepicker-days options have only one calendar
var checkNumCalendar = '';
if ( Number(numCalendar) > 1 ) {
  var checkNumCalendar = ' t-datepicker-days'
}

var dataTheme = [];
var setNumTheme = numCalendar;
while ( setNumTheme > 0 ) {
  dataTheme.push(setTemplate);
  setNumTheme--;
}
// Reset variable code 0,1,2,3 ...
numCalendar = numCalendar - 1;

// Theme Append html follow month tr > td dataDays/7
function AppendDaysInMonth(pr_num) {
  var i = 0;
  var setTr = '';
  while ( i < pr_num ) {
    setTr = setTr + '<tr>'+
    '<td class="t-day">1</td>'+
    '<td class="t-day">2</td>'+
    '<td class="t-day">3</td>'+
    '<td class="t-day">4</td>'+
    '<td class="t-day">5</td>'+
    '<td class="t-day">6</td>'+
    '<td class="t-day">0</td>'+
    '</tr>';
    i++;
  }
  return setTr;
}

// Theme t-check-in && t-check-out default show for website
function setThemeCheckDate(pr_title, pr_class, pr_data_utc, pr_input, pr_fm_input) {
  return '<div class="t-dates t-date-'+pr_class+'">'+
  // setInfoTitle(pr_title, 't-date-info-title')
  settings.iconDate+
  '<label class="t-date-info-title">'+pr_title+'</label>'+
  showThemeDate(pr_class, pr_data_utc)+
  '</div>'+
  '<input type="hidden" class="t-input-'+pr_class+'"'+' value="'+pr_fm_input+'" name="'+pr_input+'">'
  // +'<div class="datepicker"></div>'
  }

  function showThemeDate(pr_class, pr_data_utc) {
    //  console.log("nnnnnnnnnnn=" + typeof pr_data_utc);
      if (pr_data_utc !== 0 && pr_data_utc !== null && isNaN(pr_data_utc) == false) {
      var d = moment(pr_data_utc).clone()._d; 
    var showMonths = settings.titleMonths[d.getMonth()].slice(0, settings.titleMonthsLimitShow); // 19 Jul 2018
    // Chỉnh sửa lại Tháng muốn hiển thị tự custom - 'Tháng'
    if ( settings.replaceTitleMonths !== null ) {
      showMonths = settings.replaceTitleMonths +' '+ check_num_10(d.getMonth() + 1);
    }
    // Set hiển thị chỉ có dd/mm hoặc dd/mm/yy không đổi formatShow
    if ( settings.showDateTheme === 'dd' ) {
      return '<span class="t-day-'+pr_class+'"> ' + check_num_10(d.getDate()) +'</span>'
    } else if ( settings.showDateTheme === 'dd/mm' || settings.showDateTheme === 'dd-mm' ) {
      return '<span class="t-day-'+pr_class+'"> ' + check_num_10(d.getDate()) +'</span>'+
      '<span class="t-month-'+pr_class+'"> '+ showMonths +' </span>'
    } else {
      return '<span class="t-day-'+pr_class+'"> ' + check_num_10(d.getDate()) +'</span>'+
      '<span class="t-month-'+pr_class+'"> '+ showMonths +' </span>'+
      '<span class="t-year-'+pr_class+'"> '+check_num_10(d.getFullYear()) +'</span>'
    }
  } else {
    return '';
  }
}
// fn convert date_utc 2018/02/27 -> 1519689600000 // YY/MM/DD
  function convertToDateIntegerValue(pr_date_utc) {

      if (typeof pr_date_utc == "string") {
          if (pr_date_utc.indexOf("-") != -1) {
              pr_date_utc = moment(pr_date_utc).format("YYYY/MM/DD");
          }
      }
      var date = moment(pr_date_utc).clone()._d; 

    var date_utc = date.getTime();
      if (date_utc === 0) { date_utc = null };

     // console.log("pr_date_utc=" + pr_date_utc + "moment=" + moment(date_utc).format("YYYY-MM-DD") + "date_utc=" + date_utc + " +moment=" + moment(date_utc).format("YYYY-MM-DD"));

  return date_utc;
  }

  function convertFormatDf(pr_date) {

      if (typeof (pr_date) === 'object' && pr_date !== null) {
        //console.log("pr_date" + pr_date);
    return pr_date = convertToDateIntegerValue(pr_date)
      }

      if (typeof (pr_date) === 'string' && pr_date !== 'null') {

    var yyyy_mm_dd;
    if ( pr_date.indexOf('/') !== -1 ) { pr_date = pr_date.replace(/\//g, '-') }
    var dd = pr_date.split('-');
    // yyyy phải là 4 số trở lên, tháng không được lớn hơn 13
    // Giá trị từ input mm-dd-yyyy chuyển đổi thành yyyy-mm-dd
    if ( update_options.formatDate === 'mm-dd-yyyy'
    && dd[2].length === 4 && dd[0] < 13 ) {
      // console.log('mm-dd-yyyy')
      yyyy_mm_dd = dd[2]+'-'+dd[0]+'-'+dd[1];
    }

    if ( update_options.formatDate === 'dd-mm-yyyy'
    && dd[2].length === 4 && dd[1] < 13 ) {
      // console.log('dd-mm-yyyy')
      yyyy_mm_dd = dd[2]+'-'+dd[1]+'-'+dd[0];
    }

    // Giá trị từ input yyyy-dd-mm chuyển đổi thành yyyy-mm-dd
    if ( update_options.formatDate === 'yyyy-dd-mm'
    && dd[0].length === 4 && dd[2] < 13 ) {
      // console.log('yyyy-dd-mm')
      yyyy_mm_dd = dd[0]+'-'+dd[2]+'-'+dd[1];
    }
    // Giá trị từ input mm-dd-yyyy chuyển đổi thành yyyy-mm-dd
    // [yyyy, mm, dd]
    if ( update_options.formatDate === 'yyyy-mm-dd'
    && dd[0].length === 4 && dd[1] < 13 ) {
      // console.log('mm-dd-yyyy')
      yyyy_mm_dd = dd[0]+'-'+dd[1]+'-'+dd[2];
    }
    // Gọi sai format là return;
    if ( isNaN(new Date(yyyy_mm_dd)) ) {
      return console.log("'Thank you for using t-datepicker. Please, check formatDate :'%c " + settings.formatDate + ' ', 'background: #f16d99; color: #fff');
    }
    return yyyy_mm_dd; // Convert String '25/06/2018' - '2018/06/25'
  }
  return pr_date; // convert date_utc 2018/02/27 -> 1519689600000 -> Number
}
// Kiểm tra giá trị để show ra input là dd-mm-yyyy
function showValueInput(pr_date) {
  if ( pr_date !== null ) {
      var d = moment(pr_date).clone()._d;  
    // dd-mm-yyyy
    pr_date = check_num_10(d.getDate())+'-'+(check_num_10(d.getMonth()+1))+'-'+d.getFullYear();
    if ( settings.formatDate === 'mm-dd-yyyy' ) {
      pr_date = (check_num_10(d.getMonth()+1))+'-'+check_num_10(d.getDate())+'-'+d.getFullYear();
    }
    if ( settings.formatDate === 'yyyy-dd-mm') {
      pr_date = d.getFullYear()+'-'+check_num_10(d.getDate())+'-'+(check_num_10(d.getMonth()+1));
    }
    if ( settings.formatDate === 'yyyy-mm-dd') {
      pr_date = d.getFullYear()+'-'+(check_num_10(d.getMonth()+1))+'-'+check_num_10(d.getDate());
    }
  }
  return pr_date;
}
// Function get && show default theme for website include (2018/02/27 || 1519689600000)
function getDateUTC(pr_in, pr_out) {
  var Array_In_Out = ['check-in', 'check-out'];
  Array_In_Out.forEach( function(e) {
    var label_title = settings.titleCheckIn;
    var getDay = pr_in;
    var Input = 't-start'
    // Check CI có giá trị ngày thì remove label Nhận Phòng
    if ( pr_in !== null ) {
      label_title = '';
    }
    if ( e === 'check-out' ) {
      label_title = settings.titleCheckOut;
      getDay = pr_out;
      // Giá trị CI lớn hơn 30 day giới hạn, lớn hơn ngày CO nếu đã có CO -> CO sẽ không có chọn ngày ở dates
      // Null không có add dates và Dom
      if ( pr_in === pr_out ) {
        getDay = null;
      } else if ( pr_out !== null ) {
        label_title = ''; // Xoá title khi có giá trị
      }
      Input = 't-end'
    }
    // console.log(getDay)
    getDay = convertFormatDf(getDay)
    var formatDate = showValueInput(getDay);
    // console.log(getDay)
    getDay = convertToDateIntegerValue(getDay);
    this_el.find('.t-'+e).html(setThemeCheckDate( label_title , e, getDay, Input, formatDate ))
  })

  // Nếu không có data, data default sẽ là toDay và nextDays - null
  if ( pr_in === null && pr_out === null ) {
    pr_in = settings.startDate;
    // next Day form dataCheckIn
      var date = moment(pr_in).clone()._d;

      pr_out = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf();
    // console.log('a')
  }
  if ( pr_in !== null && pr_out !== null ) {
    // Có data, mà CO < CI thì đưa check CO = CI
    if ( convertToDateIntegerValue(convertFormatDf(pr_in)) > convertToDateIntegerValue(convertFormatDf(pr_out)) ) {
      pr_in = pr_out;
      // console.log('b')
    }
  }
  // Nếu CI có giá trị mà CO không có thì gôm chung là 1
  if ( pr_in !== null && pr_out === null ) {
    pr_out = pr_in;
    // console.log('c')
  }
  // Nếu CO có giá trị mà CI không có thì CI = CO
  if ( pr_in === null && pr_out !== null ) {
    pr_in = pr_out;
    // console.log('d')
  }

  // Giá trị CI lớn hơn 30 day giới hạn, lớn hơn ngày CO nếu đã có CO -> CO sẽ không có chọn ngày ở dates
  // if ( pr_in === pr_out ) {
  //     $('.year-check-out').remove();
  //     $('.month-check-out').remove();
  //     $('.day-check-out').remove();
  // }

  // Convert String '25/06/2018' - '29/06/2018'
  pr_in = convertFormatDf(pr_in)
  pr_out = convertFormatDf(pr_out)
  // convert date_utc 2018/02/27 -> 1519689600000 // YY/MM/DD -> Number
  return [convertToDateIntegerValue(pr_in), convertToDateIntegerValue(pr_out)];
}
var dataUTC = getDateUTC(settings.dateCheckIn, settings.dateCheckOut);

// Nhận vào Elements [dates], date_utc = [1,2]
function setDaysInMonth ( pr_el, pr_data_utc ) {
  // pr_el.parentElement.getElementsByClassName('datepicker')[0].innerHTML = convertArrayToString(dataTheme);
  // pr_el <=> this, define event for each calendar
  var tswitch = pr_el.find('.t-month');
  if ( numCalendar >= 0  ) {
    for ( var i_num = 0; i_num <= numCalendar; i_num++) {
      // Call title month
        var date = new Date(pr_data_utc);
        date.setHours(0, 0, 0, 0);

      var newDate = new Date(date.getFullYear(), (date.getMonth() + i_num));
      // tswitch[i_num].innerHTML = 'Tháng ' + (newDate.getMonth() + 1) + ' ' + newDate.getFullYear();
      tswitch[i_num].innerHTML = settings.titleMonths[newDate.getMonth()] + ' ' + newDate.getFullYear();
      // Global data days
      var dataDays = [];
      var dataUTCDate = [];
      var days = [];

        // Call data Next month follow number calendar
        var nextDate = new Date(date.getFullYear(), (date.getMonth() + i_num)).valueOf();
        var date = moment(nextDate).clone()._d;
        while (new Date(date.getFullYear(), (date.getMonth())).valueOf() === nextDate) {
        days.push(date.getDay());      // Day of week 0 - 6 tìm được vị trí ngày đầu tiên và cuối cùng trong tháng
            dataDays.push(date.getDate()); // Day of month 1 -31 tìm được số ngày của 1 tháng
            dataUTCDate.push(new Date(date.getFullYear(), date.getMonth(), date.getDate()).valueOf()); // Number day ex: 1519257600000
        date.setDate(date.getDate() + 1); // So sánh số ngày của tháng
      }
      // console.log(days)

      // var days = [
      //     0,             // 1
      //     1,2,3,4,5,6,0, // 2
      //     1,2,3,4,5,6,0, // 2
      //     1,2,3,4,5,6,0, // 3
      //     1,2,3,4,5,6,0, // 4
      //     1,2,3,4,5,6,0, // 5
      //     1     // 6
      // ]

      // console.log(days)
      // Set Days before min in month
      var beforeDay = days[0];
      if ( beforeDay === 0 ) {
        while ( beforeDay < 6 ) {
          dataDays.unshift('');
          dataUTCDate.unshift('');
          beforeDay++;
        }
      } else {
        while ( beforeDay > 1 ) {
          dataDays.unshift('');
          dataUTCDate.unshift('');
          beforeDay--;
        }
      }
      // Set Days after max in month
      var afterDay = days[days.length-1];
      while ( afterDay < 7 ) {
        dataDays.push('');
        dataUTCDate.push('');
        afterDay++;
      }
      setThemeData(dataDays, dataUTCDate, i_num, pr_el)
    }
  }
  // console.log(pr_data_utc)
  // Nhận vào Elements [dates], date_utc = [1,2]
  getStyleDays( pr_el, pr_data_utc );
}

// Function setTheme show tablet date follow numCalendar 1,2,3 ...
function setThemeData (dataDays, dataUTCDate, pr_num, pr_el) {
  var checkdataDays = dataDays.slice(-7)[0] // Kiểm tra tháng có ngày cuối cùng là 30 và 7 "" empty
  if ( checkdataDays === '' ) {
    dataDays = dataDays.slice(0, -7) // Clear 7 empty
  }
  var getTH = pr_el.find('tbody')
  getTH[pr_num].innerHTML = AppendDaysInMonth(Math.round(dataDays.length/7));
  var getTD = getTH[pr_num].querySelectorAll('td')
  for ( var td = 0; td < getTD.length; td++ ) {
    getTD[td].setAttribute('data-t-date', dataUTCDate[td]);
    getTD[td].innerHTML = dataDays[td];
  }
}

function getStyleDays(pr_el, pr_data_utc) {
  // Call Function click Next | Prev
  // Nhận vào Elements [dates], date_utc = [1,2]
  var limitdateN = clickEvent( pr_el, pr_data_utc )
  var limitEndDate = convertToDateIntegerValue(convertFormatDf(settings.endDate)) || limitdateN;
  var toDayElement = pr_el.find('td')

    var d_utc = new Date(dataUTC[0]);
    d_utc.setHours(0, 0, 0, 0);

    var d_utc_co = new Date(dataUTC[1]);
    d_utc_co.setHours(0, 0, 0, 0);

    var limitRange = new Date(d_utc.getFullYear(), d_utc.getMonth(), d_utc.getDate() + settings.limitDateRanges).valueOf();

    var limitRangeCO = new Date(d_utc_co.getFullYear(), d_utc_co.getMonth(), d_utc_co.getDate() - settings.limitDateRanges).valueOf();

  for ( var i = 0; i < toDayElement.length; i++ ) {
    var dayselect = toDayElement[i].getAttribute('data-t-date');

    // t-disabled all days before toDay settings.startDate === toDay
    if ( Number(dayselect) < settings.startDate ) {
      toDayElement[i].className = 't-disabled';
    }

    // disable Before Day position t-Check-out
    if ( pr_el.hasClass('t-check-out') === true ) {

      if ( Number(dayselect) < dataUTC[0] ) {
        toDayElement[i].className = 't-disabled';
      }
      if ( Number(dayselect) > dataUTC[1] || Number(dayselect) >= limitRange ) {
        toDayElement[i].className = 't-disabled';
      }

      // Setlimit Range khi ở t-check-out còn click được 31 ngày default hoặc có thể set limitDateRanges
      if ( Number(dayselect) != 0
      && Number(dayselect) > dataUTC[0]
      && Number(dayselect) < limitRange
      && Number(dayselect) != dataUTC[1] ) {
        toDayElement[i].className = 't-day';
      }
      // disable button Arrow Prev when in check-out
      if ( Number(dayselect) === dataUTC[0] ) {
        var Arrow = pr_el.parent().find('.t-arrow');
        Arrow[0].className = Arrow[0].className.replace(' t-disabled', '') + ' t-disabled'
        Arrow[0].onclick = function() { return; }
      }
      // disable button Arrow Next when in check-out
      var CI_Arrow = settings.dateCheckIn || toDay; // Case CI = null
        var ci_d = new Date(CI_Arrow);
        var co_n = new Date(ci_d.getFullYear(), ci_d.getMonth(), ci_d.getDate() + settings.limitDateRanges).valueOf();
      if ( $(pr_el).find('[data-t-date="'+ co_n +'"]')[0] !== undefined ) {
        var Arrow = pr_el.parent().find('.t-arrow');
        Arrow[Arrow.length-1].className = Arrow[Arrow.length-1].className.replace(' t-disabled', '') + ' t-disabled'
        Arrow[Arrow.length-1].onclick = function() { return; }
      }
    }

    // tRange In --- Out
    if ( Number(dayselect) > dataUTC[0]
    && Number(dayselect) < dataUTC[1]
    && dataUTC[0] >= settings.startDate
    && dataUTC[1] <= limitEndDate ) {
      toDayElement[i].className = 't-range';
    }

    // Limit Day disable for t-check-in 1,2,3 .. months
    // limitEndDate <=> settings.endDate
    if ( Number(dayselect) > limitEndDate ) {
      toDayElement[i].className = 't-disabled';
    }

    // In - Ative t-check-in
    if ( Number(dayselect) === dataUTC[0] ) {
      var this_picker = $(toDayElement[i]).parents('.t-datepicker')
      if ( this_picker.find('.t-input-check-in').val() !== 'null'
      || settings.toDayHighlighted !== false ) {
        toDayElement[i].className = 't-start';
      }
    }
    // Out - Active t-Check-out
    if ( Number(dayselect) === dataUTC[1] ) {
      var this_picker = $(toDayElement[i]).parents('.t-datepicker')
      if ( this_picker.find('.t-input-check-out').val() !== 'null'
      || settings.nextDayHighlighted !== false ) {
        toDayElement[i].className = 't-end';
      }
    }

    // t-highlighted toDay
    if ( Number(dayselect) === toDay ) {
      if ( settings.toDayShowTitle === true || settings.toDayShowTitle === 'true' ) {
        // cln = cln.replace('t-special-day', '');
        appendSpan(toDayElement[i], 't-hover-day', 't-hover-day-content', settings.titleToday)
        toDayElement[i].className = toDayElement[i].className.replace(' t-today', '') + ' t-today';
      }
    }
    // Select stype for day in calendar
      var Cn = new Date(Number(dayselect));
      Cn.setHours(0, 0, 0, 0);
    Cn = Cn.getDay()
    // console.log(settings.daysOfWeekHighlighted) // [0,1,2,3,4,5,6]
    settings.daysOfWeekHighlighted.forEach( function(e) {
      if ( Cn == e ) {
        toDayElement[i].className = toDayElement[i].className.replace(' t-highlighted', '') + ' t-highlighted';
      }
    })

    // Click td event when td has been value
    toDayElement[i].onclick = function (e) {
      e.stopPropagation();
      // Check nếu làm t-disabled không làm gì cả
      if ( $(this).hasClass('t-disabled') === true ) { return; }

      var data_utc_in, data_utc_out;
      var get_utc = $(this).attr('data-t-date') // ngày click
      // Click calendar ở t-check-out
      var datepicker = $(this).parents('.t-check-out');

      // get data UTC date
      get_utc = Number( get_utc )
      if ( $(this).parents('.t-check-in').hasClass('t-check-in') === true ) {
        // Check số ngày lớn hơn 12 tháng hoặc limitNextMonth không cho click
        if ( Number($(this).attr('data-t-date')) > limitEndDate) { return; }
        // selectedCI do something
        $(pr_el).trigger('selectedCI', Number(get_utc))
        // onChangeCI do something
        var setChangeDate = $(this).parents('.t-check-in').find('.t-input-check-in').val();
        if ( convertToDateIntegerValue(convertFormatDf(setChangeDate)) != get_utc ) {
          $(pr_el).trigger('onChangeCI', Number(get_utc))
        }

          var d = new Date(dataUTC[1]);
          d.setHours(0, 0, 0, 0);
          // Giới hạn 30 ngày
          var limitdate = new Date(d.getFullYear(), d.getMonth(), d.getDate() - settings.limitDateRanges).valueOf();
        data_utc_in = get_utc;
        data_utc_out = dataUTC[1];

        // Ngăn update nextDate CO nếu click vào ngày toDay, startDatem
        // Trường hợp dateCheckIn nhỏ hơn startDate
        if ( get_utc === settings.startDate && $(this).hasClass('t-start') === false && dataUTC[0] >= settings.startDate ) {
          data_utc_out = dataUTC[0];
        }
        if ( get_utc > dataUTC[1] || get_utc === dataUTC[1] || get_utc <= limitdate ) {
          // Không hiện ngày t-check-out liền kề
          data_utc_out = get_utc;
        }
        if ( $(this).parents('.t-picker-only').hasClass('t-picker-only') === true ) {
          data_utc_out = data_utc_in;
        }
        // Click calendar ở t-check-in chuyển element qua t-check-out
        datepicker = $(this).parents('.t-datepicker').find('.t-check-out')
        // Chuyển đổi khi không có t-check-out, only calendar for options dateRange === true
        if ( datepicker.length === 0 ) {
          datepicker = $(this_el).find('.t-picker-only')
          // Xoá t-check-out sao khi chọn ngày
            setTimeout(function () {
                console.log("settings.autoClose=" + settings.autoClose);
            if ( $('.t-datepicker-day').length !== 0 && settings.autoClose === true ) {
              $('.t-datepicker-day').remove()
              $('.t-arrow-top').remove()
            }
          }, 10 )
        }
      }

      if ( $(this).parents('.t-check-out').hasClass('t-check-out') === true ) {

        if ( $(this).hasClass('t-start') === true ) { return; }
        // ngăn không cho click ngày t-check-in khi đang ở t-check-out và không có ngày t-check-out
        if ( $(this).parents('.t-datepicker').find('.t-start').length === 0
        && $(this).hasClass('t-end') === true ) { return; }
        // selectedCO do something
        $(pr_el).trigger('selectedCO', Number(get_utc))
        // onChangeCO do something
        var setChangeDate = $(this).parents('.t-check-out').find('.t-input-check-out').val();
        if ( convertToDateIntegerValue(convertFormatDf(setChangeDate)) != get_utc ) {
          $(pr_el).trigger('onChangeCO', Number(get_utc))
        }
        data_utc_in = dataUTC[0];
        data_utc_out = get_utc;
        $(pr_el).trigger('afterCheckOut', [[data_utc_in, data_utc_out]])
        // Xoá t-check-out sao khi chọn ngày

          setTimeout(function () {
              console.log("settings.autoClose2=" + settings.autoClose);
          if ( $('.t-datepicker-day').length !== 0 && settings.autoClose === true ) {
            $('.t-datepicker-day').remove()
            // $('.t-arrow-top').css({'display': 'none'})
            $('.t-arrow-top').remove()
          }
        }, 10 )
      }

      // console.log(new Date(data_utc_in))
      // console.log(new Date(data_utc_out))

      dataUTC = getDateUTC( data_utc_in, data_utc_out )
      // eventClickDay do something
      $(pr_el).trigger('eventClickDay', [dataUTC])
      callEventClick( datepicker, dataUTC )
    }

    // Function khi hover vào ngày đặc biệt DataEvent Holiday
    if ( 'ontouchstart' in window === false ) {
      toDayElement[i].onmouseover = function(e) {
        // Append special day
        if ( $(this).hasClass('t-special-day') === true && $(this).parents('.t-datepicker-day').length != 0) {
          $(this).parents('.t-datepicker-day').append('<p class="t-date-title">'+$(this).attr('t-date-title')+'</p>')
        }

        function checkNumNight(pr_el, pr_date_utc) {
          var el_hover = Number($(pr_el).attr('data-t-date'));
          var numDay = 0;

          if ( e.target.className.indexOf('t-hover-day-content') !== -1
          || e.target.className.indexOf('t-disabled') !== -1 ) {
            return;
          }
          if ( $(pr_el).parents('.t-check-in').hasClass('t-check-in') === true ) {
              var nd = new Date(pr_date_utc[1]);
              nd.setHours(0, 0, 0, 0);
            // Off Hover show title nếu không có set dateCheckIn or dateCheckOut
            if ( el_hover === settings.startDate ) {
              if ( $(pr_el).parents('.t-check-in').find('.t-end').length === 0
              && $(pr_el).parents('.t-check-in').find('.t-start').length === 0 ) {
                  nd = new Date(pr_date_utc[0]);
                  nd.setHours(0, 0, 0, 0);
              }
            }

              var nd_1 = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate()).valueOf();
              var limitday = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate() - settings.limitDateRanges).valueOf();
            // Ở t-check-in nhỏ hơn hoặc = 30 tính từ ngày t-check-out nếu đã có t-check-out
            // Hover vào today và end limitDateRanges
            if ( el_hover <= limitday ) {
              return;
            }

              while (el_hover < nd_1) {
                  nd_1 = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate() - numDay).valueOf();
              var t_this = $(pr_el).parents('.t-check-in').find('[data-t-date="' + nd_1 + '"]')[0];
              if ( t_this != undefined ) {
                t_this.className = t_this.className.replace(' t-range-limit', '') + ' t-range-limit';
              }

              numDay++;
              // console.log(numDay)
              if(numDay>1000) {return;}
            }
          }

          if ( $(pr_el).parents('.t-check-out').hasClass('t-check-out') === true ) {
              var nd = new Date(pr_date_utc[0]);
              nd.setHours(0, 0, 0, 0);
              var nd_1 = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate()).valueOf();
              var limitday = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate() + settings.limitDateRanges).valueOf();
            if ( el_hover >= limitday ) {
              return;
            }
            // Ở t-check-out lớn hơn hoặc = 31 ngày tiếp theo stop
              while (el_hover != nd_1) {
                  nd_1 = new Date(nd.getFullYear(), nd.getMonth(), nd.getDate() + numDay).valueOf();
              var t_this = $(pr_el).parents('.t-check-out').find('[data-t-date="' + nd_1 + '"]')[0];
              if ( t_this != undefined ) {
                t_this.className = t_this.className.replace(' t-range-limit', '') + ' t-range-limit';
              }
              numDay++;
              // console.log(numDay)
              if(numDay>5000) {return;}
            }
            // console.log(numDay)
          }

          return numDay;
        }
        // Option dateRangesHover focus only date picker
        if ( settings.dateRangesHover === true || settings.dateRangesHover === 'true' ) {
          var numDay = checkNumNight(this, dataUTC)
          // console.log(numDay)
          // options dateRangesShowTitle true|false
          if ( settings.dateRangesShowTitle === true ) {
            var num_full = 1;
            if ( settings.showFullDateRanges === true ) {
              num_full = 0;
              // Full day always are 2 days
              settings.titleDateRange = settings.titleDateRanges;
            }
            if ( numDay === 2 ) {
              // console.log(numDay)
              // fn Global - Hover khi ở t-check-in và khi ở t-check-out
              appendSpan(this, 't-hover-day', 't-hover-day-content', ((numDay - num_full) + ' ' +settings.titleDateRange) )
            } else if ( numDay > 2 ) {
              // fn Global - Hover khi ở t-check-in và khi ở t-check-out
              appendSpan(this, 't-hover-day', 't-hover-day-content', ((numDay - num_full) + ' '+settings.titleDateRanges) )
            }
          }
        }

        this.onmouseout = function() {
          // Xoá tất cả các class t-hover-day trừ ngày toDay ra.
          if ( this.getElementsByClassName('t-hover-day-content').length != 0 ) {
            // IE fix
            var node = this.getElementsByClassName('t-hover-day-content')[0]
            node.parentNode.removeChild(node);
            this.className = this.className.replace(' t-hover-day', '');
          }
          if ( document.getElementsByClassName('t-range-limit').length != 0 ) {
            var a = document.getElementsByClassName('t-range-limit');
            a = [].slice.call(a)
            for ( var i = 0; i<a.length; i ++ ) {
              a[i].className = a[i].className.replace(' t-range-limit', '');
            }
          }
          // Care conflict today vs num night
          if ( this.className.indexOf('t-today') !== -1 ) {
            if ( this.getElementsByClassName('t-hover-day-content').length != 0 ) {
              // this.getElementsByClassName('t-hover-day-content')[0].removeChild();
              // IE fix
              var node = this.getElementsByClassName('t-hover-day-content')[0]
              node.parentNode.removeChild(node);
            }
            appendSpan(this, 't-hover-day', 't-hover-day-content', settings.titleToday);
            this.className = this.className.replace(/\ t-hover-day/g, '') + ' t-hover-day';
          }
          // out hover hide special days
          if ( fnParents(this, 't-datepicker').getElementsByClassName('t-date-title').length != 0 ) {
            var elem = fnParents(this, 't-datepicker').getElementsByClassName('t-date-title');
            elem = [].slice.call(elem)
            for ( var i = 0; i<elem.length; i++ ) {
              // elem[i].remove();
              // IE fix
              elem[i].parentNode.removeChild(elem[i]);
            }
          }
        }

      }
    }
  }

  // dateDisabled: ['2019-01-19', '2018-11-05', '2019-01-01',
  if ( settings.dateDisabled != undefined) {
    var dataDis = settings.dateDisabled;
    // return;
    // Find number limit month options.numCalendar 1,2,3 ...
    for ( var cl = 0; cl < settings.numCalendar; cl++ ) {
      var t = new Date(pr_data_utc).getMonth();
      var gMonth = t + 1 + cl;
      var gYear = new Date(pr_data_utc).getFullYear();

      if ( gMonth === 13 ) {
        gMonth = gMonth - 12;
        gYear = gYear+1;
      }

      for ( var i = 0; i < toDayElement.length; i++ ) {
        // Số ngày của tháng
        var getNum = Number(toDayElement[i].textContent)
        // Kiểm tra ngày hiện tại với ngày disable
        if ( isNaN(getNum) ) {
          getNum = new Date(toDay).getDate();
        }
        // Số ngày của tháng cần so sánh
        var getDays = Number(toDayElement[i].getAttribute('data-t-date'));
        var getMonths = new Date(getDays).getMonth() + 1;
        var key = gYear + '-' + check_num_10(gMonth) + '-' + check_num_10(getNum);
        if ( dataDis.indexOf(key) !== -1 && getMonths === gMonth ) {
            toDayElement[i].className = toDayElement[i].className+' t-disabled';
        }
      }
    }
  }
  // set DataEvent Holiday follow Days phai co setdate mới chạy và không cho chạy khi ở tablet
  // window.innerWidth > 1024
  if ( settings.fnDataEvent != undefined && 'ontouchstart' in window === false ) {
    var data = settings.fnDataEvent;
    var mergeData = {};
    // return;
    // Find number limit month options.numCalendar 1,2,3 ...
    for ( var cl = 0; cl < settings.numCalendar; cl++ ) {
      var t = new Date(pr_data_utc).getMonth();
      var gMonth = t + 1 + cl;
      var gYear = new Date(pr_data_utc).getFullYear();
      if ( gMonth === 13 ) {
        gMonth = gMonth - 12;
        gYear = gYear+1
      }
      // function mergeDataEvent use only month not year
      if ( settings.mergeDataEvent === true || settings.mergeDataEvent === 'true' ) {
        Object.keys(settings.fnDataEvent).map( function(e) {
          var t = e.slice(e.length-5, e.length)
          if ( t.length < 6 ) {
            mergeData[t] = settings.fnDataEvent[e]
          }
        })
      }

      for ( var i = 0; i < toDayElement.length; i++ ) {
        // Số ngày của tháng
        var getNum = Number(toDayElement[i].textContent)
        // Kiểm tra ngày hiện tại với ngày đặc biệt để lấy ngày today
        if ( isNaN(getNum) ) {
          getNum = new Date(toDay).getDate();
        }
        // Số ngày của tháng cần so sánh
        var getDays = Number(toDayElement[i].getAttribute('data-t-date'));
        var getMonths = new Date(getDays).getMonth() + 1;
        var key = gYear + '-' + check_num_10(gMonth) + '-' + check_num_10(getNum);
        if ( settings.mergeDataEvent === true || settings.mergeDataEvent === 'true' ) {
          key = check_num_10(gMonth) + '-' + check_num_10(getNum);
          data = mergeData;
        }
        if ( data[key] != undefined && getMonths === gMonth ) {
          var cln = toDayElement[i].className;
          // cln = cln.replace('t-disabled', '');
          toDayElement[i].className = toDayElement[i].className.replace(' t-special-day', '') + ' t-special-day';
          // console.log(new Date(getDays).getMonth() + 1)
          // console.log(getNum)
          toDayElement[i].setAttribute('t-date-title', check_num_10(getNum) + ' ' + settings.titleMonths[new Date(getDays).getMonth()] + ' - ' + data[key])
        }
      }
    }
  }
}

function clickEvent(pr_el, pr_data_utc) {
  // console.log(pr_el)
  // console.log(pr_data_utc)
  // console.log(new Date(pr_data_utc[0]) , new Date(pr_data_utc[1]))
  // console.log(pr_el)
  // console.log(this_el)
  var tArrow   = pr_el.find('.t-arrow');
  // var df_toDay = new Date(toDay);
  // console.log(settings.startDate)
  var df_toDay = new Date(settings.startDate);               // nếu = null thì lấy toDay làm chuẩntuds_change
    var end_Date = new Date(convertFormatDf(settings.endDate)) // nếu = null thì lấy setStart làm chuẩn
    var limitPrevMonth = new Date(df_toDay.getFullYear(), df_toDay.getMonth() - settings.limitPrevMonth).valueOf();
    var limitNextMonth = new Date(end_Date.getFullYear(), end_Date.getMonth()) || new Date(df_toDay.getFullYear(), df_toDay.getMonth() + numCalendar + settings.limitNextMonth).valueOf();

    var newDate = new Date(pr_data_utc)
    newDate.setHours(0, 0, 0, 0);
  var y = newDate.getFullYear();
  var m = newDate.getMonth();
  var d = newDate.getDate();

  if ( tArrow.length != 0 ) {
    // Xoá các icons arrow trừ 2 cái đầu và cuối
    for ( var i = 1; i < tArrow.length - 1; i++ ) {
      tArrow[i].innerHTML = '';
      tArrow[i].className = tArrow[i].className.replace(' t-disabled', '') + ' t-disabled';
    }
    tArrow[0].onclick = function(e) {
        e.stopPropagation()
        if (new Date(y, m).valueOf() > limitPrevMonth) {
        m = m - 1;
            // Nhận vào Elements [dates], date_utc = [1,2]
            setDaysInMonth(pr_el, new Date(y, m).valueOf())
      }
    }
    // Next Calendar
    tArrow[tArrow.length - 1].onclick = function(e) {
        e.stopPropagation()
        if (new Date(y, m + numCalendar).valueOf() < limitNextMonth) {
        m = m + 1;
            // Nhận vào Elements [dates], date_utc = [1,2]
            setDaysInMonth(pr_el, new Date(y, m).valueOf())
      }
    }
  }

  var Arrow_2 = pr_el.find('.t-arrow');
    // disable button Arrow when t-check-in limit month
    if (new Date(y, m + numCalendar).valueOf() != limitNextMonth && new Date(y, m).valueOf() === limitPrevMonth) {
    Arrow_2[Arrow_2.length-1].className = 't-arrow t-next'
    Arrow_2[0].className = 't-arrow t-prev t-disabled'
  } else {
    Arrow_2[0].className = 't-arrow t-prev'
  }

    if (new Date(y, m + numCalendar).valueOf() === limitNextMonth
        || new Date(new Date(y, m + numCalendar).valueOf()).getMonth() === new Date(dataUTC[0]).getMonth() + 1) {
    Arrow_2[Arrow_2.length-1].className = 't-arrow t-next t-disabled'
    }
    if (new Date(y, m + numCalendar).valueOf() < limitNextMonth) {
    // console.log('c')
    Arrow_2[Arrow_2.length-1].className = 't-arrow t-next'
  }

    // return Date.UTC(df_toDay.getFullYear(), df_toDay.getMonth() + numCalendar + settings.limitNextMonth, df_toDay.getDate());
    return new Date(df_toDay.getFullYear(), df_toDay.getMonth() + numCalendar + settings.limitNextMonth, df_toDay.getDate()).valueOf();
}
// newDataUTC = getDateUTC(options.dateCheckIn, 1522454400000);
// Function show || Hide calendar [Date]
function getTableCalendar(pr_el, pr_date_utc) {
  // console.log(pr_el)
  if ( $(pr_el).find('.t-datepicker-day').length !== 0 ) {
    $('.t-datepicker-day').remove();
    $('.t-arrow-top').css({'display': 'none'})
    // Options autoClose
    $('html').removeClass('t-datepicker-open')
  } else {
    if ( $(pr_el).parents('.t-datepicker').hasClass('t-datepicker').length !== 0 ) {
      $('.t-datepicker-day').remove();
      $('.t-arrow-top').css({'display': 'none'})
    }
    if ( settings.iconArrowTop === true ) {
      var this_el_arrow = $(pr_el).parents('.t-datepicker');
      if ( this_el_arrow.find('.t-arrow-top').length === 0 ) {
        this_el_arrow.append('<span class="t-arrow-top"></span>')
      }
      var CI_CO_width = $(pr_el).position().left + $(pr_el).outerWidth()/2
      var leftArrTop = this_el_arrow.find('.t-arrow-top').outerWidth()/2

      if ( this_el_arrow.find('.t-arrow-top').css('display') === 'block' ) {
        this_el_arrow.find('.t-arrow-top').css({
          'left': CI_CO_width-leftArrTop+'px'
        })
      }
      this_el_arrow.find('.t-arrow-top').css({'display': 'block'})
      this_el_arrow.find('.t-arrow-top').animate({
        'left': CI_CO_width-leftArrTop+'px'
      }, settings.durationArrowTop)
    }
      $(pr_el).find('.t-dates').parent().append('<div  class="t-datepicker-day'+checkNumCalendar+'"><div class="calendar-container">'+convertArrayToString(dataTheme)+'</div></div>')
    // Thêm calendar vào t-check-in hoặc t-check-out
    setDaysInMonth($(pr_el).find('.t-dates').parent(), pr_date_utc)

    // Options autoClose
    $('html').addClass('t-datepicker-open')
  }
}

var pr_callback = '';
// var dataUTC = getDateUTC(options.dateCheckIn, options.dateCheckOut);
function callEventClick(pr_callback, pr_date_utc ) {
  this_el.find('.t-dates').on('click', function(e) {
    // trigger CO or CI
    if ( $(e.target).parents('.t-check-in').hasClass('t-check-in') === true ) {
      $(e.target).trigger('clickDateCI', [pr_date_utc]);
    }
    if ( $(e.target).parents('.t-check-out').hasClass('t-check-out') === true ) {
      // console.log(pr_date_utc)
      $(e.target).trigger('clickDateCO', [pr_date_utc]);
    }
    // trigger làm gì trước khi show calendar
    if ( $('.t-datepicker-day').length === 0 ) {
      $(this).trigger('beforeShowDay');
    }
    // Kiểm tra giá trị của CI === 'null' thì luôn show calendar ở CI
    var click = $(this).parent(); // -> .class t-check-in or .t-check-out
    if ( $(this).parents('.t-datepicker').find('.t-input-check-in').val() === 'null'
    && $(this).parents('.t-check-out').find('.t-input-check-out').val() === 'null' ) {
      click = $(e.target).parents('.t-datepicker').find('.t-check-in');
      $(e.target).trigger('clickDateCI', [pr_date_utc]);
    }
    // Click remove all theme calendar
    getTableCalendar(click, pr_date_utc[0])
    setTimeout( function(){
      if ( $('.t-datepicker-day').length !== 0 ) {
        $(e.target).trigger('afterShowDay');
      } else {
        $(e.target).trigger('toggleAfterHideDay');
      }
    }, 1 )
  })
  if ( pr_callback != '' ) {
    getTableCalendar(pr_callback, pr_date_utc[0]);
  }
}
callEventClick(pr_callback, dataUTC)

// Method show calendar
// Call only
setTimeout( function() {
  if ( typeof(pr_el) === 'string' && pr_el === 'show' ) {
    if ( this_el.find('.t-datepicker-day').length === 0 ) {
      this_el.each(function(e){
        if ( settings.iconArrowTop === true ) {
          if ( $(this).find('.t-arrow-top').length === 0 ) {
            $(this).append('<span class="t-arrow-top"></span>')
          }
          var CI_width = $(this).find('.t-check-in').outerWidth()
          $(this).find('.t-arrow-top').css({
            'left'   : CI_width/2-10+'px',
            'display': 'block'
          })
        }
        // Thêm theme vào đúng calendar cần
          $(this).find('.t-check-in').append('<div class="t-datepicker-day'+checkNumCalendar+'"><div class="calendar-container">'+convertArrayToString(dataTheme)+'</div></div>')
        // Thêm calendar vào t-check-in hoặc t-check-out
        setDaysInMonth($(this).find('.t-check-in'), dataUTC[0])
        // Options autoClose
        $('html').addClass('t-datepicker-open')
      })
    }
  }
}, 5)

// Call hiden calendar table theme
if ( typeof(pr_el) === 'string' && pr_el === 'hide' ) {
  $('html').removeClass('t-datepicker-open')
  setTimeout(function(){
    $('html').addClass('t-datepicker-open')
  }, 5)
}

return this;

}

$('html').on('click', function(e) { // console.log('html') if ( $(this).hasClass('t-datepicker-open') === true ) { // console.log('html') setTimeout(function () { // Chờ class t-datepicker-open được khởi tạo ở method 'show' if ($(e.target).parents('.t-datepicker').hasClass('t-datepicker') === false && $('.t-datepicker-day').length > 0) {

            $('.t-datepicker-open').removeClass('t-datepicker-open')
            $('.t-datepicker-day').remove()
            // $('.t-arrow-top').css({'display': 'none'})
            $('.t-arrow-top').remove()
            // console.log('remove')
        }
    }, 1);

    setTimeout(function () {

        //if ($('.calender-dynamic-text').length < 1) {
        //  //  $('.booking-engine .t-datepicker-days:not(.layout2)').prepend('<div class="calender-dynamic-text" style="display:none;"></div>');  
        //}
       // $('.booking-engine .t-datepicker-days:not(.layout2)').prepend('<div class="calender-dynamic-text" style="display:none;"></div>'); 

    }, 10);
}

});

}( jQuery ));

team3rddigital commented 4 years ago

Hello,

@abhishek2989 i am using your code but i found one error can you please help out from this

Unhandled Rejection (TypeError): update_options.dateCheckIn.setHours is not a function Unhandled Rejection (TypeError): update_options.dateCheckOut.setHours is not a function

Thanks in advance !!!

abhishek-kumar-ia commented 4 years ago

@team3rddigital are you using moment.js library?

shijuamt commented 4 years ago

Issue still exist. negative time zones datepicker calendar dates doesn't show up