Changes from 2.0 to 3.0

Version 3.0 has some breaking changes. They are listed below.

Option Changes

There have been a few changes to the options from 2.x to 3.x

Language Options

The properties for modifying the text of the calendar are now all grouped beneath the lang option.

For example, say you wanted to change the "Close" button to instead say "Hide", the following snippet shows how you would do that in 2.x vs 3.x. All language specific properties from 2.x have also moved into the lang option.

// 2.x
TinyDatePicker('.cal', {
  close: 'Hide',
});

// 3.x
TinyDatePicker('.cal', {
  lang: {
    close: 'Hide',
  }
});

The preselectedDate option has been renamed to hilightedDate

This is a more accurate name, and reflects the name of the equivalent property in the date picker state. The hilightedDate is the date which is currently focused in the date picker. This does not mean the user has chosen that date. It merely means the date is currently focused / hilighted.

weekStartsMonday has changed to dayOffset

In 2.x, weekStartsMonday was a boolean flag that specified that Monday should be shown as the first day of the week. This is now done via a more general property called dayOffset which is a number from 0-6. 0 is the default and indicates Sunday. 1 indicates Monday. 2 indicates Tuesday, and so on.

Events are no longer options

Instead of passing in onOpen, onSelectYear, onSelectMonth, onChangeDate, or onNavigate as options, all events are now registered via a call to on/off. Previously, (in 2.x) there was no way to remove an event handler. In 3.x, this is done by calling the off method.

// 2.x
TinyDatePicker('.cal', {
  onOpen: () => console.log('Opened!'),
  onSelectYear: () => console.log('Year selected!'),
  onSelectMonth: () => console.log('Month selected!'),
  onChangeDate: () => console.log('A date was picked!'),
  onNavigate: () => console.log('Hilighted date changed!'),
});

// 3.x
TinyDatePicker('.cal').on({
  open: () => console.log('Opened!'),
  close: () => console.log('Closed!'),
  select: (_, dp) => console.log('A date was picked: ', dp.state.selectedDate),
  statechange: (_, dp) => console.log('The view, hilightedDate, and/or selectedDate changed: ', dp.state),
});

Event handlers receive two arguments: 1) the name of the event (e.g. 'close') and 2) the instance of the date picker on which the event was fired.

There is now an event for close, which didn't exist previously.

There is a more general event for state changes-- statechange-- which fires whenever the view changes, the hilightedDate changes, or the selectedDate changes.

Property changes

• currentDate is now state.selectedDate
• input is no longer exposed (though it would be a trivial change to attach it yourself if required... it's generally unnecessary.

Method changes

openYears, openMonths, setValue, are all replaced with a more general setState method which allows for programmatic changing of the view, hilightedDate, and selectedDate.

addMonths and addYears are gone. These were added for a specific use case which is not very common. They shifted the current calendar position forward/backwards by a specified offset. If you need to do this, it's not too difficult. You compute the date using any number of date utilities (or on your own using the built-in Date object), and then call setState({hilightedDate: yourDateValue});.

Some examples of 2.x to 3.x follow:

// 2.x show the year picker
const dp = TinyDatePicker('.cal');
dp.openYears();

// 3.x show the year picker
const dp = TinyDatePicker('.cal');
dp.setState({view: 'year'});

// 2.x show the month picker
const dp = TinyDatePicker('.cal');
dp.openMonths();

// 3.x show the month picker
const dp = TinyDatePicker('.cal');
dp.setState({view: 'month'});

// 3.x show the day picker (the default calendar view), no previous equivalent in 2.x
dp.setState({view: 'day'});

// 2.x change the selected date
dp.setValue(new Date());

// 3.x change the selected date
dp.setState({selectedDate: new Date()});

// 2.x change the hilighted date
dp.goToDate(new Date());

// 3.x change the hilighted date
dp.setState({hilightedDate: new Date()});

In English, hilight is is a misspelling of highlight, but it's a fairly common name in code, and is easier to type, so... That's what we're using. If it drives anyone crazy, we can provide an alias.