v2 breaking changes (2.0.0-beta.8)

I’m planning to publish v2. There will be several breaking changes.

CDN URL WILL CHANGED

Since v2 it is will be:

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

No CSS version:

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/nocss/litepicker.js"></script>

---

In v2, these the following options methods and all events will be removed:

• Options bookedDays , bookedDaysFormat, bookedDaysInclusivity, disallowBookedDaysInRange - Since it duplicates lockDays* options.
• Option anyBookedDaysAsCheckout - Since v2.0.0 added option lockDaysFilter, we can use like this:

lockDaysFilter: (date1, date2, pickedDates) => {
   if (pickedDates.length < 1) {
     // this example will disable weekends
     // define your own condition for indicate locked days
     const d = date1.getDay();
     return [6, 0].includes(d);
   }

   return false;
},

• Option disableWeekends - Since v2.0.0 added option lockDaysFilter, we can use like this:

lockDaysFilter: (day) => {
   const d = day.getDay();

   return [6, 0].includes(d);
},

• Option hotelMode - The option hotelMode is misleading because there many cases for each hotel. The replacement is use option lockDaysFilter as a function and control the behavior you want.
• Option moveByOneMonth - Since v2.0.0 added new option switchingMonths. New option will allow number, so you can set 1 or 2 or whatever you want.
• Options resetBtnCallback, useResetBtn - Since v2.0.0 added new option resetButton.

...
resetButton: true,
...
// OR
...
// Do not need to call clearSelection inside this function.
// function should return HTML element
resetButton: () => {
   let btn = document.createElement('button');
   btn.innerText = 'Clear';
   btn.addEventListener('click', (evt) => {
     evt.preventDefault();

     // some custom action
   });

   return btn;
},
...

• All events (onShow, onHide, onSelect, onError, onRender, onRenderDay, onChangeMonth, onChangeYear, onDayHover, onShowTooltip) - Replacement is event emitter (see below).
• Method setBookedDays(array) - Since v2.0.0 there is no option bookedDays.

These options will be updated:

• Option format - Since v2.0.0 option format support external library for parse/output. Example with luxon:

...
format: {
  // parse function should return Date object
  // date - Date object or string (perhaps there will be more types, need to check)
  parse(date) {
    if (date instanceof Date) {
      return date;
    }

    if (typeof date === 'number') {
      return new Date(date);
    }

    if (typeof date === 'string') {
      return luxon.DateTime.fromFormat(date, 'yyyy LLL dd').toJSDate();
    }

    return new Date();
  },

  // date - Date object
  // output function should return string
  output(date) {
    return luxon.DateTime.fromJSDate(date)
                        .toFormat('yyyy LLL dd');
  }
}
...

These options, events and methods will be added:

• Option resetButton - Replacement for resetBtnCallback and useResetBtn.
• Option switchingMonths - Replacement for moveByOneMonth.
• Option lockDaysFilter - Mark locked days with custom function.

lockDays: (date1, date2, pickedDates) => {
  // define your condition
  // 
  // date1 - start date or day of render ([DateTime](https://github.com/wakirin/Litepicker/blob/master/src/datetime.ts))
  // date2 - end date (DateTime)
  // pickedDates - number of selected days (Number)
  //
  // this function calling on render and after apply
  // thus, you need to check pickedDates.length, if it is:
  // 0 - no dates selected
  // 1 - selected start date
  // 2 - selected start and end dates

  // function should return Boolean, when true - day locked
}

• Option tooltipNumber - Allow correct visible tooltip number.

...
// days - number of selected days
// function should return Number
//
// shows one day less
tooltipNumber: (totalDays) => {
   return totalDays - 1;
}
...

• Method DateTime - return DateTime object.

const picker = new Litepicker({ ... });

picker.DateTime(); // return DateTime object
// or
picker.DateTime(someDateObject); // also return DateTime object based on provided Date object

• Replacement for events. Since v2 all events work with EventEmitter. Example initialize:

...
setup: (picker) => {
   picker.on('show', () => {
     // some action after show
   });

   picker.on('render', (ui) => {
     // some action after render
     // ui is root element of picker
   });
},
...

Event list:

• .on('init', () => { ... }); - Event is called after initialization picker.
• .on('before:render', (ui) => { ... }); - ui is root element of picker. Event is called before render function.
• .on('render', (ui) => { ... }); - ui is root element of picker. Event is called after render function.
• .on('render:month', (month, date) => { ... }); - month is element of rendered month. Event is called after renderMonth function.
• .on('render:day', (day, date) => { ... }); - day is element of rendered day. Event is called after renderDay function.
• .on('render:footer', (footer) => { ... }); - footer is element of rendered footer. Event is called after renderFooter function.
• .on('change:month', (date, calendarIdx) => { ... }); - date is DateTime object of month, calendarIdx is index of calendar when splitView is enabled. Event is called after change month.
• .on('change:year', (date, calendarIdx) => { ... }); - date is DateTime object of year, calendarIdx is index of calendar when splitView is enabled. Event is called after change year.
• .on('error:range', () => { ... }); - Event is called on wrong selection range (when disallowLockDaysInRange is enabled).
• .on('preselect', (date1, date2) => { ... }); - date1, date2 is DateTime object. Event is called on select days (before submit selection).
• .on('selected', (date1, date2) => { ... }); - date1, date2 is DateTime object. Event is called when selection is submitted.
• .on('button:cancel', () => { ... }); - Event is called after click on button cancel (footer).
• .on('button:apply', (date1, date2) => { ... }); - date1, date2 is DateTime object. Event is called after click on button apply (footer).
• .on('tooltip', (tooltip, day) => { ... }); - tooltip is element of tooltip, day is element of hovered day. Event is called after showTooltip function.
• .on('before:show', (el) => { ... }); - el is triggered element. Event is called before show.
• .on('show', (el) => { ... }); - el is triggered element. Event is called after show.
• .on('destroy', () => { ... }); - Event is called after destroy.

Added plugin system, currently in test. See examples here: https://github.com/wakirin/Litepicker/tree/v2/src/plugins Plugins must be included after Litepicker, eg.:

<script src="litepicker.js"></script>
<script src="my.plugin.js"></script>

This update also will include fixes for the following issues: #109, #116, #136, #140, #147, #152, #156, #160, #162, #163

I’m already starting to prepare docs for v2 (docs will be in gh-pages branch, currently not created).

Run npm i litepicker@2.0.0-beta.8 to install v2 beta version.

I will update this issue in case anything changes before publishing v2.

[wakirin]

@nl3s Nice catch!

I found problem on line-383, it should be maxDays. https://github.com/wakirin/Litepicker/blob/e920cb7e0922cff961a679728a0e5311e6a1c9b2/src/calendar.ts#L381-L383

Try 2.0.0-beta.8 Use:

  minDays: 2, // 2 because we already have selected 1 day
  maxDays: 7,

[wakirin]

@narek-t ~allowRepick work on the clicked element (element or elementEnd) before show.~ ~Since calendar with inlineMode is always displayed, allowRepick doesn’t work.~

~I will update description inlineMode in the docs about this limitation.~

Ok, I’m wrong. I see there is no such limitation in 1.5.7 I will fix it.