diff --git a/types/lightpick/index.d.ts b/types/lightpick/index.d.ts index 407d02d209..daf3ef4ea7 100644 --- a/types/lightpick/index.d.ts +++ b/types/lightpick/index.d.ts @@ -124,7 +124,7 @@ declare namespace Lightpick { /** * Selector of the parent element that the date range picker will be added to, if not provided this will be 'body'. */ - parentEl?: string; + parentEl?: string | Node; /** * Language code for names of days, months by Date.prototype.toLocaleString(). 'auto' will try detect user browser language. @@ -257,6 +257,16 @@ declare namespace Lightpick { */ onSelect?: Options.OnSelectFn; + /** + * Triggered when start date has been changed. + */ + onSelectStart?: Options.OnSelectStartEndFn; + + /** + * Triggered when end date has been changed. + */ + onSelectEnd?: Options.OnSelectStartEndFn; + /** * Triggered when calendar has been opened. */ @@ -373,6 +383,13 @@ declare namespace Lightpick { (this: Lightpick, startDate: OutputDate, endDate: OutputDate): void; } + /** + * Callback function for when either a start or an end date is selected. + */ + interface OnSelectStartEndFn { + (this: Lightpick, date: OutputDate): void; + } + /** * Callback function for when the picker becomes visible. */ diff --git a/types/lightpick/lightpick-tests.ts b/types/lightpick/lightpick-tests.ts index 0dbd807fd5..fe6cacdd2a 100644 --- a/types/lightpick/lightpick-tests.ts +++ b/types/lightpick/lightpick-tests.ts @@ -56,6 +56,7 @@ const inputDate = moment(); options.numberOfColumns = 1; options.orientation = 'top right'; options.parentEl = 'body'; + options.parentEl = document.body; options.repick = true; options.selectForward = true; options.selectBackward = true; @@ -72,6 +73,16 @@ const inputDate = moment(); str += to ? to.format('Do MMMM YYYY') : '...'; console.log(`str: ${str}`); }; + options.onSelectStart = (from: Lightpick.OutputDate) => { + let str = ''; + str += from ? from.format('Do MMMM YYYY') + ' to ' : ''; + console.log(`str: ${str}`); + }; + options.onSelectEnd = (to: Lightpick.OutputDate) => { + let str = ''; + str += to ? to.format('Do MMMM YYYY') : '...'; + console.log(`str: ${str}`); + }; options.onMonthsChange = (month: number) => console.log(`changing to month ${month} event`); options.onYearsChange = (year: number) => console.log(`changing to year ${year} event`);