diff --git a/jquery.pickadate/jquery.pickadate-tests.ts b/jquery.pickadate/jquery.pickadate-tests.ts deleted file mode 100644 index fde52f3e3..000000000 --- a/jquery.pickadate/jquery.pickadate-tests.ts +++ /dev/null @@ -1,420 +0,0 @@ -/// - -/* -* Date picker tests -* From http://amsul.ca/pickadate.js/date.htm -*/ - -$('.datepicker').pickadate(); - -$('.datepicker').pickadate({ - weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], - showMonthsShort: true -}); - -$('.datepicker').pickadate({ - today: '', - clear: 'Clear selection' -}); - -// Extend the default picker options for all instances. -$.extend($.fn.pickadate.defaults, { - monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], - weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], - today: 'aujourd\'hui', - clear: 'effacer', - formatSubmit: 'yyyy/mm/dd' -}); - -// Or, pass the months and weekdays as an array for each invocation. -$('.datepicker').pickadate({ - monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], - weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], - today: 'aujourd\'hui', - clear: 'effacer', - formatSubmit: 'yyyy/mm/dd' -}); - -$('.datepicker').pickadate({ - // Escape any "rule" characters with an exclamation mark (!). - format: 'You selecte!d: dddd, dd mmm, yyyy', - formatSubmit: 'yyyy/mm/dd', - hiddenPrefix: 'prefix__', - hiddenSuffix: '__suffix' -}); - -$('.datepicker').pickadate({ - selectYears: true, - selectMonths: true -}); - -$('.datepicker').pickadate({ - // `true` defaults to 10. - selectYears: 4 -}); - -$('.datepicker').pickadate({ - firstDay: 1 -}); - -$('.datepicker').pickadate({ - min: new Date(2013, 3, 20), - max: new Date(2013, 7, 14) -}); - -$('.datepicker').pickadate({ - min: [2013, 3, 20], - max: [2013, 7, 14] -}); - -$('.datepicker').pickadate({ - // An integer (positive/negative) sets it relative to today. - min: -15, - // `true` sets it to today. `false` removes any limits. - max: true -}); - -$('.datepicker').pickadate({ - disable: [ - [2013, 3, 3], - [2013, 3, 12], - [2013, 3, 20], - [2013, 3, 29] - ] -}); - -$('.datepicker').pickadate({ - disable: [ - 1, 4, 7 - ] -}); - -$('.datepicker').pickadate({ - disable: [ - new Date(2013, 3, 13), - new Date(2013, 3, 29) - ] -}); - -$('.datepicker').pickadate({ - disable: [ - true, - 1, 4, 7, - [2013, 3, 3], - [2013, 3, 12], - [2013, 3, 20], - [2013, 3, 29] - ] -}); - -$('.datepicker').pickadate({ - container: '#root-outlet' -}); - -$('.datepicker').pickadate({ - onStart: function () { - console.log('Hello there :)') - }, - onRender: function () { - console.log('Whoa.. rendered anew') - }, - onOpen: function () { - console.log('Opened up') - }, - onClose: function () { - console.log('Closed now') - }, - onStop: function () { - console.log('See ya.') - }, - onSet: function (event) { - console.log('Just set stuff:', event) - } -}); - -/* -* Time picker tests -* From http://amsul.ca/pickadate.js/time.htm -*/ - -$('.timepicker').pickatime(); - -$('.timepicker').pickatime({ - clear: '' -}); - -$('.timepicker').pickatime({ - // Escape any "rule" characters with an exclamation mark (!). - format: 'T!ime selected: h:i a', - formatLabel: 'h:i a', - formatSubmit: 'HH:i', - hiddenPrefix: 'prefix__', - hiddenSuffix: '__suffix' -}); - -$('.timepicker').pickatime({ - formatLabel: function (time: TimePickerItemObject) { - var hours = (time.pick - this.get('now').pick) / 60, - label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now' - return 'h:i a ' + (hours ? Math.abs(hours).toString() : '') + label + '' - } -}); - -$('.datepicker').pickadate({ - interval: 150 -}); - -$('.timepicker').pickatime({ - min: [7, 30], - max: [14, 0] -}); - -$('.timepicker').pickatime({ - // An integer (positive/negative) sets it as intervals relative from now. - min: -5, - // `true` sets it to now. `false` removes any limits. - max: true -}); - -$('.timepicker').pickatime({ - disable: [ - [0, 30], - [2, 0], - [8, 30], - [9, 0] - ] -}); - -$('.timepicker').pickatime({ - disable: [ - 3, 5, 7 - ] -}); - -$('.timepicker').pickatime({ - disable: [ - true, - 3, 5, 7, - [0, 30], - [2, 0], - [8, 30], - [9, 0] - ] -}); - -$('.timepicker').pickatime({ - container: '#root-outlet' -}); - -$('.timepicker').pickatime({ - onStart: function () { - console.log('Hello there :)') - }, - onRender: function () { - console.log('Whoa.. rendered anew') - }, - onOpen: function () { - console.log('Opened up') - }, - onClose: function () { - console.log('Closed now') - }, - onStop: function () { - console.log('See ya.') - }, - onSet: function (event) { - console.log('Just set stuff:', event) - } -}); - -/* -* API tests -* From http://amsul.ca/pickadate.js/api.htm -*/ - -var $input = $('.datepicker').pickadate(); - -// Use the picker object directly. -var picker = $input.pickadate('picker'); - -picker.open().clear().close(); - -picker.open(); -picker.close(); -picker.close(true); - -picker.open(false) -$(document).on('click', function () { - picker.close() -}); - -picker.start(); -picker.stop(); -picker.render(); -picker.clear(); - -picker.get() // Short for `picker.get('value')` - -picker.get('select'); -picker.get('select', 'yyyy/mm/dd'); - -picker.get('highlight'); -picker.get('highlight', 'yyyy/mm/dd'); - -picker.get('view'); - -picker.get('min'); -picker.get('min', 'yyyy/mm/dd'); -picker.get('max'); -picker.get('max', 'yyyy/mm/dd'); - -picker.get('open'); -picker.get('start'); -picker.get('id'); -picker.get('disable'); - -picker.set('clear'); - -// reset disabled dates -picker.set('disable', undefined); - -// Using arrays formatted as [YEAR,MONTH,DATE]. -picker.set('select', [2013, 3, 20]); - -// Using JavaScript Date objects. -picker.set('select', new Date(2013,03,20)); - -// Using positive integers as UNIX timestamps. -picker.set('select', 1365961912346); - -// Using arrays formatted as [HOUR,MINUTE]. -picker.set('select', [3, 0]); - -// Using positive integers as minutes. -picker.set('select', 540); - -// Using arrays formatted as [YEAR,MONTH,DATE]. -picker.set('highlight', [2013, 3, 20]); - -// Using JavaScript Date objects. -picker.set('highlight', new Date(2013,7,14)); - -// Using positive integers as UNIX timestamps. -picker.set('highlight', 1365961912346); - -// Using arrays formatted as [HOUR,MINUTE]. -picker.set('highlight', [15, 30]); - -// Using positive integers as minutes. -picker.set('highlight', 1080); - -// Using arrays formatted as [YEAR,MONTH,DATE]. -picker.set('view', [2000, 3, 20]); - -// Using JavaScript Date objects. -picker.set('view', new Date(1988,7,14)); - -// Using positive integers as UNIX timestamps. -picker.set('view', 1587355200000); - -// Using arrays formatted as [HOUR,MINUTE]. -picker.set('view', [15, 30]); - -// Using positive integers as minutes. -picker.set('view', 1080); - -// Using arrays formatted as [YEAR,MONTH,DATE]. -picker.set('min', [2013, 3, 20]); - -// Using JavaScript Date objects. -picker.set('min', new Date(2013,7,14)); - -// Using integers as days relative to today. -picker.set('min', -4); - -// Using `true` for "today". -picker.set('min', true); - -// Using `false` to remove. -picker.set('min', false); - -// Using arrays formatted as [HOUR,MINUTE]. -picker.set('min', [15, 30]); - -// Using integers as intervals relative from now. -picker.set('min', -4); - -// Using `true` for "now". -picker.set('min', true); - -// Using `false` to remove. -picker.set('min', false); - -// Using arrays formatted as [YEAR,MONTH,DATE]. -picker.set('max', [2013, 3, 20]); - -// Using JavaScript Date objects. -picker.set('max', new Date(2013,7,14)); - -// Using integers as days relative to today. -picker.set('max', 4); - -// Using `true` for "today". -picker.set('max', true); - -// Using `false` to remove. -picker.set('max', false); - -// Using arrays formatted as [HOUR,MINUTE]. -picker.set('max', [15, 30]); - -// Using integers as intervals relative from now. -picker.set('max', 4); - -// Using `true` for "now". -picker.set('max', true); - -// Using `false` to remove. -picker.set('max', false); - -picker.on('open', function () { - console.log('Opened.. and here I am!'); -}); - -picker.on({ - open: function () { - console.log('Opened.. and here I am!'); - }, - close: function () { - console.log('Closed.. and here I am!'); - } -}); - -$('.datepicker').pickadate({ - onOpen: function () { - console.log('Opened up!') - }, - onClose: function () { - console.log('Closed now') - }, - onRender: function () { - console.log('Just rendered anew') - }, - onStart: function () { - console.log('Hello there :)') - }, - onStop: function () { - console.log('See ya') - }, - onSet: function (event) { - console.log('Set stuff:', event) - } -}); - -picker.on('open', function () { - console.log('Didn\'t open.. yet here I am!'); -}) -picker.trigger('open'); - -picker.$node; -picker.$root; \ No newline at end of file diff --git a/jquery.pickadate/jquery.pickadate-tests.ts.tscparams b/jquery.pickadate/jquery.pickadate-tests.ts.tscparams deleted file mode 100644 index d3f5a12fa..000000000 --- a/jquery.pickadate/jquery.pickadate-tests.ts.tscparams +++ /dev/null @@ -1 +0,0 @@ - diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts deleted file mode 100644 index 62b20bb22..000000000 --- a/jquery.pickadate/jquery.pickadate.d.ts +++ /dev/null @@ -1,319 +0,0 @@ -// Type definitions for pickadate.js 3.3.0 -// Project: https://github.com/amsul/pickadate.js -// Definitions by: Theodore Brown -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -/** Options shared between date and time pickers */ -interface pickerOptions { - /** Set clear button text */ - clear?: string; // default 'Clear' - - /** Specify where to insert the picker's root element by passing any valid CSS selector to this option */ - container?: any; - - // Events - onStart?: (event: any) => void; - onRender?: (event: any) => void; - onOpen?: (event: any) => void; - onClose?: (event: any) => void; - onSet?: (event: any) => void; - onStop?: (event: any) => void; -} - -interface pickadateOptions extends pickerOptions { - // Strings and translations - monthsFull?: string[]; // default 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' - monthsShort?: string[]; // default 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' - weekdaysFull?: string[]; // default 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' - weekdaysShort?: string[]; // default 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' - showMonthsShort?: boolean; - showWeekdaysFull?: boolean; - - // Buttons - today?: string; // default 'Today' - - // Formats - format?: string; // default 'd mmmm, yyyy' - formatSubmit?: string; // e.g. 'yyyy/mm/dd' - hiddenPrefix?: string; // default undefined - hiddenSuffix?: string; // default '_submit' - hiddenName?: boolean; // default undefined - - // Dropdown selectors - selectYears?: any; // Specify the number of years selectable using an even integer - half before and half after the year in focus: - selectMonths?: boolean; - - // First day of the week - firstDay?: any; // The first day of the week can be set to either Sunday or Monday. Anything truth-y sets it as Monday and anything false-y as Sunday - - // Date limits - min?: any; // date object, array formatted as [YEAR,MONTH,DATE], or dates relative to today using integers or a boolean (`true` sets it to today. `false` removes any limits). - max?: any; - - // Disable dates - disable?: any[]; // Date objects, arrays formatted as [YEAR,MONTH,DATE], or integers representing days of the week (from 1 to 7). Switch to whitelist by setting first item in collection to `true`. - - // Classes - klass?: { - - // The element states - input?: string; // default 'picker__input' - active?: string; // default 'picker__input--active' - - // The root picker and states - picker?: string; // default 'picker' - opened?: string; // default 'picker--opened' - focused?: string; // default 'picker--focused' - - // The picker holder - holder?: string; // default 'picker__holder' - - // The picker frame, wrapper, and box - frame?: string; // default 'picker__frame' - wrap?: string; // default 'picker__wrap' - box?: string; // default 'picker__box' - - // The picker header - header?: string; // default 'picker__header' - - // Month navigation - navPrev?: string; // default 'picker__nav--prev' - navNext?: string; // default 'picker__nav--next' - navDisabled?: string; // default 'picker__nav--disabled' - - // Month & year labels - month?: string; // default 'picker__month' - year?: string; // default 'picker__year' - - // Month & year dropdowns - selectMonth?: string; // default 'picker__select--month' - selectYear?: string; // default 'picker__select--year' - - // Table of dates - table?: string; // default 'picker__table' - - // Weekday labels - weekdays?: string; // default 'picker__weekday' - - // Day states - day?: string; // default 'picker__day' - disabled?: string; // default 'picker__day--disabled' - selected?: string // default 'picker__day--selected' - highlighted?: string // default 'picker__day--highlighted' - now?: string; // default 'picker__day--today' - infocus?: string; // default 'picker__day--infocus' - outfocus?: string; // default 'picker__day--outfocus' - - // The picker footer - footer?: string; // default 'picker__footer' - - // Today & clear buttons - buttonClear?: string; // default 'picker__button--clear' - buttonToday?: string; // default 'picker__button--today' - } -} - -interface pickatimeOptions extends pickerOptions { - - // Formats - format?: string; // default 'h:i A' - formatLabel?: any; - formatSubmit?: string; - hiddenPrefix?: string; // default undefined - hiddenSuffix?: string; // default '_submit' - - // Time intervals - interval?: number; // interval in minutes. default 30. - - // Time limits - min?: any; // array formatted as [HOUR,MINUTE], or as times relative to now using integers or a boolean (`true` sets it to now, `false` removes any limits). - max?: any; - - // Disable times - disable?: any[]; // arrays formatted as [HOUR,MINUTE] or integers representing hours (from 0 to 23). Switch to whitelist by setting true as the first item in the collection. - - // Classes - klass?: { - - // The element states - input?: string; // default 'picker__input' - active?: string; // default 'picker__input--active' - - // The root picker and states - picker?: string; // default 'picker picker--time' - opened?: string; // default 'picker--opened' - focused?: string; // default 'picker--focused' - - // The picker holder - holder?: string; // default 'picker__holder' - - // The picker frame, wrapper, and box - frame?: string; // default 'picker__frame' - wrap?: string; // default 'picker__wrap' - box?: string; // default 'picker__box' - - // List of times - list?: string; // default 'picker__list' - listItem?: string; // default 'picker__list-item' - - // Time states - disabled?: string; // default 'picker__list-item--disabled' - selected?: string; // default 'picker__list-item--selected' - highlighted?: string; // default 'picker__list-item--highlighted' - viewset?: string; // default 'picker__list-item--viewset' - now?: string; // default 'picker__list-item--now' - - // Clear button - buttonClear?: string; // default 'picker__button--clear' - } -} - -interface PickerItemObject { - /** The "pick" value used for comparisons. */ - pick: number; -} - -interface DatePickerItemObject extends PickerItemObject { - /** The full year. */ - year: number; - - /** The month with zero-as-index. */ - month: number; - - /** The date of the month. */ - date: number; - - /** The day of the week with zero-as-index. */ - day: number; - - /** The underlying JavaScript Date object. */ - obj: Date; -} - -interface TimePickerItemObject extends PickerItemObject { - /** Hour of the day from 0 to 23. */ - hour: number; - - /** The minutes of the hour from 0 to 59 (based on the interval). */ - mins: number; -} - -interface CallbackObject { - open?: () => void; - close?: () => void; - render?: () => void; - start?: () => void; - stop?: () => void; - set?: () => void; -} - -interface SetThings { - clear?; - select?: any; - highlight?: any; - view?: any; - min?: any; - max?: any; - disable?: any; - enable?: any; -} - -interface TimePickerSetThings extends SetThings { - interval?: any; -} - -interface PickerObject { - /** The picker's relative input element wrapped as a jQuery object. */ - $node: JQuery; - - /** The picker's relative root holder element wrapped as a jQuery object. */ - $root: JQuery; - - open(withoutFocus?: boolean): TPickerObject; - close(withFocus?: boolean): TPickerObject; - - /** Rebuild the picker. */ - start(): TPickerObject; - - /** Destroy the picker. */ - stop(): TPickerObject; - - /** - * Refresh the picker box after adding something to the holder. - * By default, only the "face" of the picker (i.e. the box element) - * has it’s contents re-rendered. To render the entire picker from - * the root up, pass true as the first argument. - */ - render(entirePicker?: boolean): TPickerObject; - - /** Clear the value in the picker's input element. */ - clear(): TPickerObject; - - /** Short for picker.get('value') */ - get(): string; - - /** Get the properties, objects, and states that make up the current state of the picker. */ - get(thing: string): any; - - /** Returns the string value of the picker's input element. */ - get(thing: 'value'): string; - - /** Returns the item object that is visually selected. */ - get(thing: 'select'): TItemObject; - - /** Returns the item object that is visually highlighted. */ - get(thing: 'highlight'): TItemObject; - - /** Returns the item object that sets the current view. */ - get(thing: 'view'): TItemObject; - - /** Returns the item object that limits the picker's lower range. */ - get(thing: 'min'): TItemObject; - - /** Returns the item object that limits the picker's upper range. */ - get(thing: 'max'): TItemObject; - - /** Returns a boolean value of whether the picker is open or not. */ - get(thing: 'open'): boolean; - - /** Returns a boolean value of whether the picker has started or not. */ - get(thing: 'start'): boolean; - - /** Returns a unique 9-digit integer that is the ID of the picker. */ - get(thing: 'id'): number; - - /** Returns an array of items that determine which item objects to disable on the picker. */ - get(thing: 'disable'): any[]; - - /** Returns a formatted string for the item object specified by `thing` */ - get(thing: string, format: string): string; - - /** Set the properties, objects, and states to change the state of the picker. */ - set(thing: string, value?: any, options?: any): TPickerObject; - set(things: TOptions, options?: any): TPickerObject; - - /** Bind callbacks to get fired off when the relative picker method is called. */ - on(methodName, callback: () => void): TPickerObject; - - /** Bind multiple callbacks at once to get fired off when the relative picker method is called. */ - on(callbackObject: CallbackObject): TPickerObject; - - /** Trigger callbacks that have been queued up using the the on method. */ - trigger(event: string): TPickerObject; -} - -interface DatePickerObject extends PickerObject { } -interface TimePickerObject extends PickerObject { } - -interface JQuery { - pickadate(methodName: "picker"): DatePickerObject; - pickadate(methodName: string): any; - pickadate(options?: pickadateOptions): JQuery; - - pickatime(methodName: "picker"): TimePickerObject; - pickatime(methodName: string): any; - pickatime(options?: pickatimeOptions): JQuery; -} - diff --git a/jquery.pickadate/jquery.pickadate.d.ts.tscparams b/jquery.pickadate/jquery.pickadate.d.ts.tscparams deleted file mode 100644 index d3f5a12fa..000000000 --- a/jquery.pickadate/jquery.pickadate.d.ts.tscparams +++ /dev/null @@ -1 +0,0 @@ - diff --git a/pickadate/pickadate-tests.ts b/pickadate/pickadate-tests.ts index 4700310b8..21bc5b074 100644 --- a/pickadate/pickadate-tests.ts +++ b/pickadate/pickadate-tests.ts @@ -1,279 +1,796 @@ -/// -/// +/// -function testApiMethods(api: Pickadate.Api) { - api.clear(); - api.close(); - api.close(true); - api.get('value'); - api.get('value', 'yyyy-mm-dd'); - api.off('open'); - api.off('open', 'close', 'render'); - api.on('set', (context: {[key: string]: any}) => { }); - api.on('get', () => { }); - api.open(); - api.open(true); - api.render(); - api.render(true); - api.set('value', '2014-09-23'); - api.set({ - value: '2014-09-23', - max: new Date(2014, 12, 1) - }); - api.start(); - api.stop(); - api.trigger('open'); +// Date picker tests from http://amsul.ca/pickadate.js/date/ - api.start().open().close().stop(); +$('.datepicker').pickadate(); - var pickerInputElement = api.$node; - pickerInputElement.show(); - - var pickerRootElement = api.$root; - pickerRootElement.show(); -} - -function testDateApiMethods(api: Pickadate.DateApi) { - api.get('select'); - api.get('select', 'yyyy/mm/dd'); - api.get('highlight'); - api.get('highlight', 'yyyy/mm/dd'); - api.get('view'); - api.get('view', 'yyyy/mm/dd'); - api.get('min'); - api.get('min', 'yyyy/mm/dd'); - api.get('max'); - api.get('max', 'yyyy/mm/dd'); -} - -function testTimeApiMethods(api: Pickadate.TimeApi) { - api.get('select'); - api.get('select', 'hh:i'); - api.get('highlight'); - api.get('highlight', 'hh:i'); - api.get('view'); - api.get('view', 'hh:i'); - api.get('min'); - api.get('min', 'hh:i'); - api.get('max'); - api.get('max', 'hh:i'); -} - -// ==================================================================================================================== - -var datePickerInput = $("input.date"); - -datePickerInput.pickadate(); - -datePickerInput.pickadate({ - monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], - monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], - weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - showMonthsShort: true, - showWeekdaysFull: true, - - today: 'Today', - clear: 'Clear', - close: 'Close', - - labelMonthNext: 'Next month', - labelMonthPrev: 'Previous month', - labelMonthSelect: 'Select a month', - labelYearSelect: 'Select a year', - - // Formats - format: 'd mmmm, yyyy', - formatSubmit: 'yyyy-mm-dd', - hiddenPrefix: 'foo', - hiddenSuffix: '_submit', - hiddenName: 'bar', - - // Editable input - editable: true, - - // Dropdown selectors - selectYears: true, - selectMonths: 10, - - // First day of the week - firstDay: 0, - - // Date limits - min: new Date(2013, 3, 20), - max: [2013, 7, 14], - - // Disable dates - disable: [ new Date(2013, 3, 21) ], - - // Root container - container: '.root-container', - - // Events - onStart: () => { }, - onRender: () => { }, - onOpen: () => { }, - onClose: () => { }, - onSet: (context: {[key: string]: any}) => { }, - onStop: () => { } +// Change the month and weekday labels +$('.datepicker').pickadate({ + weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], + showMonthsShort: true }); -datePickerInput.pickadate({ - klass: { - // The element states - input: 'picker__input', - active: 'picker__input--active', +// Change button text or hide a button completely +$('.datepicker').pickadate({ + today: '', + clear: 'Clear selection', + close: 'Cancel' +}); - // The root picker and states * - picker: 'picker', - opened: 'picker--opened', - focused: 'picker--focused', +// Change the title attributes of several elements within the picker +$('.datepicker').pickadate({ + labelMonthNext: 'Go to the next month', + labelMonthPrev: 'Go to the previous month', + labelMonthSelect: 'Pick a month from the dropdown', + labelYearSelect: 'Pick a year from the dropdown', + selectMonths: true, + selectYears: true +}); - // The picker holder - holder: 'picker__holder', +// Extend the default picker options for all instances. +$.extend($.fn.pickadate.defaults, { + monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], + weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], + today: 'aujourd\'hui', + clear: 'effacer', + formatSubmit: 'yyyy/mm/dd' +}); - // The picker frame, wrapper, and box - frame: 'picker__frame', - wrap: 'picker__wrap', - box: 'picker__box', +// Or, pass the months and weekdays as an array for each invocation. +$('.datepicker').pickadate({ + monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], + weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], + today: 'aujourd\'hui', + clear: 'effacer', + formatSubmit: 'yyyy/mm/dd' +}); - // The picker header - header: 'picker__header', +// Display a human-friendly format and use an alternate one to submit to the server +$('.datepicker').pickadate({ + // Escape any "rule" characters with an exclamation mark (!). + format: 'You selecte!d: dddd, dd mmm, yyyy', + formatSubmit: 'yyyy/mm/dd', + hiddenPrefix: 'prefix__', + hiddenSuffix: '__suffix' +}); - // Month navigation - navPrev: 'picker__nav--prev', - navNext: 'picker__nav--next', - navDisabled: 'picker__nav--disabled', +// Send the hidden value only +$('.datepicker').pickadate({ + formatSubmit: 'yyyy/mm/dd', + hiddenName: true +}); - // Month & year labels - month: 'picker__month', - year: 'picker__year', +// Editable input +$('.datepicker').pickadate({ + editable: true +}); - // Month & year dropdowns - selectMonth: 'picker__select--month', - selectYear: 'picker__select--year', +// Display select menus to pick the month and year +$('.datepicker').pickadate({ + selectYears: true, + selectMonths: true +}); - // Table of dates - table: 'picker__table', +// Specify the number of years to show in the dropdown using an +// even integer - half before and half after the year in focus: +$('.datepicker').pickadate({ + // `true` defaults to 10. + selectYears: 4 +}); - // Weekday labels - weekdays: 'picker__weekday', +// The first day of the week can be set to either Sunday or Monday. +// Anything truth-y sets it as Monday and anything false-y as Sunday. +$('.datepicker').pickadate({ + firstDay: 1 +}); - // Day states - day: 'picker__day', - disabled: 'picker__day--disabled', - selected: 'picker__day--selected', - highlighted: 'picker__day--highlighted', - now: 'picker__day--today', - infocus: 'picker__day--infocus', - outfocus: 'picker__day--outfocus', +// Date Limits - // The picker footer - footer: 'picker__footer', +// Using JavaScript dates +$('.datepicker').pickadate({ + min: new Date(2013, 3, 20), + max: new Date(2013, 7, 14) +}); - // Today, clear, & close buttons - buttonClear: 'picker__button--clear', - buttonClose: 'picker__button--close', - buttonToday: 'picker__button--today' +// Using arrays formatted as [YEAR,MONTH,DATE] +$('.datepicker').pickadate({ + min: [2013, 3, 20], + max: [2013, 7, 14] +}); + +// Using integers or a boolean +$('.datepicker').pickadate({ + // An integer (positive/negative) sets it relative to today. + min: -15, + // `true` sets it to today. `false` removes any limits. + max: true +}); + +// Disable dates + +// Using JavaScript dates +$('.datepicker').pickadate({ + disable: [ + new Date(2013, 3, 13), + new Date(2013, 3, 29) + ] +}); + +// Using arrays formatted as [YEAR,MONTH,DATE] +$('.datepicker').pickadate({ + disable: [ + [2015, 3, 3], + [2015, 3, 12], + [2015, 3, 20] + ] +}); + +// Using integers as days of the week (1 to 7) +$('.datepicker').pickadate({ + disable: [ + 1, 4, 7 + ] +}); + +// Using objects as a range of dates +$('.datepicker').pickadate({ + disable: [ + { from: [2016, 2, 14], to: [2016, 2, 27] } + ] +}); + +// Enable only a specific or arbitrary set of dates by setting true as the first item in the collection +$('.datepicker').pickadate({ + disable: [ + true, + 1, 4, 7, + [2013, 3, 3], + [2013, 3, 12], + [2013, 3, 20], + new Date(2015, 3, 13), + new Date(2015, 3, 29) + ] +}); + +// Enable dates that fall within a range of disabled dates by adding +// the inverted parameter to the item within the collection +$('.datepicker').pickadate({ + disable: [ + 5, + [2015, 10, 21, 'inverted'], + { from: [2016, 3, 15], to: [2016, 3, 25] }, + [2016, 3, 20, 'inverted'], + { from: [2016, 3, 17], to: [2016, 3, 18], inverted: true } + ] +}); + +// Specify where to insert the root element by passing any valid CSS selector to the container option +$('.datepicker').pickadate({ + container: '#root-picker-outlet' +}); + +// Specify where to insert the hidden element by passing any valid CSS selector to the containerHidden option +$('.datepicker').pickadate({ + containerHidden: '#hidden-input-outlet' +}); + +// Close on a user action +$('.datepicker').pickadate({ + closeOnSelect: false, + closeOnClear: false +}); + +// Fire off events as the user interacts with the picker +$('.datepicker').pickadate({ + onStart: function () { + console.log('Hello there :)') + }, + onRender: function () { + console.log('Whoa.. rendered anew') + }, + onOpen: function () { + console.log('Opened up') + }, + onClose: function () { + console.log('Closed now') + }, + onStop: function () { + console.log('See ya.') + }, + onSet: function (context) { + console.log('Just set stuff:', context) } }); -var datePickerApi = datePickerInput.pickadate('picker'); +// Time picker tests from http://amsul.ca/pickadate.js/time/ -datePickerInput.pickadate('open'); -datePickerInput.pickadate('get', 'value'); -datePickerInput.pickadate('$node').show(); -datePickerInput.pickadate('$root').show(); -datePickerInput.pickadate('_hidden').show(); +$('.timepicker').pickatime(); -testApiMethods(datePickerApi); -testDateApiMethods(datePickerApi); +// Extend the default picker options for all instances. +$.extend($.fn.pickatime.defaults, { + clear: 'Effacer' +}); -// ==================================================================================================================== +// Or, pass the months and weekdays as an array for each invocation. +$('.timepicker').pickatime({ + clear: 'Effacer' +}); -var timePickerInput = $("input.time"); +// Change the text or hide the button completely by passing a false-y value +$('.timepicker').pickatime({ + clear: '' +}); -timePickerInput.pickatime(); - -timePickerInput.pickatime({ - // Translations and clear button - clear: 'Clear', - - // Formats - format: 'h:i A', +// Display a human-friendly label and input format and use an alternate one to submit +$('.timepicker').pickatime({ + // Escape any "rule" characters with an exclamation mark (!). + format: 'T!ime selected: h:i a', formatLabel: 'h:i a', formatSubmit: 'HH:i', hiddenPrefix: 'prefix__', - hiddenSuffix: '__suffix', - - // Editable input - editable: true, - - // Time intervals - interval: 30, - - // Time limits - min: new Date(2013, 3, 20, 7), - max: [7, 14], - - // Disable times - disable: [ new Date(2013, 3, 21, 7) ], - - // Root container - container: '.root-container', - - // Events - onStart: () => { }, - onRender: () => { }, - onOpen: () => { }, - onClose: () => { }, - onSet: (context: {[key: string]: any}) => { }, - onStop: () => { } + hiddenSuffix: '__suffix' }); -timePickerInput.pickatime({ - klass: { - // The element states - input: 'picker__input', - active: 'picker__input--active', - - // The root picker and states * - picker: 'picker picker--time', - opened: 'picker--opened', - focused: 'picker--focused', - - // The picker holder - holder: 'picker__holder', - - // The picker frame, wrapper, and box - frame: 'picker__frame', - wrap: 'picker__wrap', - box: 'picker__box', - - // List of times - list: 'picker__list', - listItem: 'picker__list-item', - - // Time states - disabled: 'picker__list-item--disabled', - selected: 'picker__list-item--selected', - highlighted: 'picker__list-item--highlighted', - viewset: 'picker__list-item--viewset', - now: 'picker__list-item--now', - - // Clear button - buttonClear: 'picker__button--clear' +// The formatLabel option is unique. It can contain HTML and it can also +// be a function if you want to create the label during run-time: +$('.timepicker').pickatime({ + formatLabel: function (time) { + var hours = (time.pick - this.get('now').pick) / 60, + label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now' + return 'h:i a ' + (hours ? Math.abs(hours) : '') + label + '' } }); -var timePickerApi = timePickerInput.pickatime('picker'); +// Send the hidden value only +$('.timepicker').pickatime({ + formatSubmit: 'HH:i', + hiddenName: true +}); -timePickerInput.pickatime('open'); -timePickerInput.pickatime('get', 'value'); -timePickerInput.pickatime('$node').show(); -timePickerInput.pickatime('$root').show(); -timePickerInput.pickatime('_hidden').show(); +// Editable input +$('.timepicker').pickatime({ + editable: true +}); -testApiMethods(timePickerApi); -testTimeApiMethods(timePickerApi); +// Choose the minutes interval between each time in the list +$('.timepicker').pickatime({ + interval: 150 +}); +// Time Limits + +// Using JavaScript dates +$('.timepicker').pickatime({ + min: new Date(2015, 3, 20, 7), + max: new Date(2015, 7, 14, 18, 30) +}); + +// Using arrays formatted as [HOUR,MINUTE] +$('.timepicker').pickatime({ + min: [7, 30], + max: [14, 0] +}); + +// Using integers or a boolean +$('.timepicker').pickatime({ + // An integer (positive/negative) sets it as intervals relative from now. + min: -5, + // `true` sets it to now. `false` removes any limits. + max: true +}); + +// Disable Times + +// Using JavaScript dates +$('.timepicker').pickatime({ + disable: [ + new Date(2016, 3, 20, 4, 30), + new Date(2016, 3, 20, 9) + ] +}); + +// Using arrays formatted as [HOUR,MINUTE] +$('.timepicker').pickatime({ + disable: [ + [0, 30], + [2, 0], + [8, 30], + [9, 0] + ] +}); + +// Using integers as hours (0 to 23) +$('.timepicker').pickatime({ + disable: [ + 3, 5, 7 + ] +}); + +// Using objects as a range of times +$('.timepicker').pickatime({ + disable: [ + { from: [2, 0], to: [5, 30] } + ] +}); + +// Enable only a specific or arbitrary set of times by setting true as the first item in the collection +$('.timepicker').pickatime({ + disable: [ + true, + 3, 5, 7, + [0, 30], + [2, 0], + [8, 30], + [9, 0] + ] +}); + +// Enable times that fall within a range of disabled times by adding +// the inverted parameter to the item within the collection +$('.timepicker').pickatime({ + disable: [ + 1, + [1, 30, 'inverted'], + { from: [4, 30], to: [10, 30] }, + [6, 30, 'inverted'], + { from: [8, 0], to: [9, 0], inverted: true } + ] +}); + +// Specify where to insert the root element by passing any valid CSS selector to the container option +$('.timepicker').pickatime({ + container: '#root-picker-outlet' +}); + +// Specify where to insert the hidden element by passing any valid CSS selector to the containerHidden option +$('.timepicker').pickatime({ + containerHidden: '#hidden-input-outlet' +}); + +// Close on a user action +$('.timepicker').pickatime({ + closeOnSelect: false, + closeOnClear: false +}); + +// Fire off events as the user interacts with the picker +$('.timepicker').pickatime({ + onStart: function () { + console.log('Hello there :)') + }, + onRender: function () { + console.log('Whoa.. rendered anew') + }, + onOpen: function () { + console.log('Opened up') + }, + onClose: function () { + console.log('Closed now') + }, + onStop: function () { + console.log('See ya.') + }, + onSet: function (context) { + console.log('Just set stuff:', context) + } +}); + +// API tests from http://amsul.ca/pickadate.js/api/ + +var $input = $('.datepicker').pickadate(); + +// Use the picker object directly. +var picker = $input.pickadate('picker'); + +picker.$node; +picker.$root; +picker._hidden; + +// Or pass through the element’s plugin data. +$input.pickadate('open'); +$input.pickadate('close'); +$input.pickadate('close'); +$input.pickadate('start'); +$input.pickadate('stop'); +$input.pickadate('render'); +$input.pickadate('get'); +$input.pickadate('set', 'highlight', 1429970887654); +$input.pickadate('on', 'open', function () { }); +$input.pickadate('on', 'close', function () { }); +$input.pickadate('off', 'open', 'close'); +$input.pickadate('trigger', 'open'); + +$input.pickadate('$node'); +$input.pickadate('$root'); +$input.pickadate('_hidden'); + +picker.open().clear().close(); + +picker.open(); +picker.close(); +picker.close(true); + +picker.open(false); +$(document).on('click', function () { + picker.close(); +}); + +picker.start(); +picker.stop(); +picker.render(); +picker.render(true); +picker.clear(); + +picker.get(); // Short for `picker.get('value')` + +picker.get('select'); +picker.get('select', 'yyyy/mm/dd'); + +picker.get('highlight'); +picker.get('highlight', 'yyyy/mm/dd'); + +picker.get('view'); +picker.get('view', 'yyyy/mm/dd'); + +picker.get('min'); +picker.get('min', 'yyyy/mm/dd'); +picker.get('max'); +picker.get('max', 'yyyy/mm/dd'); + +picker.get('open'); +picker.get('start'); +picker.get('id'); +picker.get('enable'); +picker.get('disable'); + +// Set multiple at once +picker.set({ + select: new Date(2015, 3, 20), + highlight: [2015, 3, 20], + min: -4 +}); + +// Muted callbacks + +// One at a time +picker.set('disable', 'flip', { muted: true }); + +// Multiple at once +picker.set({ + select: [1988, 7, 14], + view: new Date(1988, 7, 14), + max: 4 +}, { muted: true }); + +// Clear the value in the picker’s input element. +picker.set('clear'); + +// Set select for a date item object + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('select', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('select', new Date(2013, 3, 20)); + +// Using positive integers as UNIX timestamps. +picker.set('select', 1365961912346); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('select', '2016-04-20', { format: 'yyyy-mm-dd' }); + +// Set select for a time item object + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('select', [3, 0]); + +// Using JavaScript Date objects. +picker.set('select', new Date(2015, 3, 20, 10, 30)); + +// Using positive integers as minutes. +picker.set('select', 540); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('select', '04-30', { format: 'hh-i' }); + +// Set highlight for a date item object + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('highlight', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('highlight', new Date(2015, 3, 30)); + +// Using positive integers as UNIX timestamps. +picker.set('highlight', 1365961912346); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('highlight', '2016-04-20', { format: 'yyyy-mm-dd' }); + +// Set highlight for a time item object + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('highlight', [15, 30]); + +// Using JavaScript Date objects. +picker.set('highlight', new Date(2015, 3, 20, 10, 30)); + +// Using positive integers as minutes. +picker.set('highlight', 1080); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('highlight', '04-30', { format: 'hh-i' }); + +// Set view for a date item object + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('view', [2000, 3, 20]); + +// Using JavaScript Date objects. +picker.set('view', new Date(1988, 7, 14)); + +// Using positive integers as UNIX timestamps. +picker.set('view', 1587355200000); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('view', '2016-04-20', { format: 'yyyy-mm-dd' }); + +// Set view for a time item object + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('view', [15, 30]); + +// Using JavaScript Date objects. +picker.set('view', new Date(2015, 3, 20, 10, 30)); + +// Using positive integers as minutes. +picker.set('view', 1080); + +// Using a string along with the parsing format (defaults to `format` option). +picker.set('view', '04-30', { format: 'hh-i' }); + +// Limit the min date + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('min', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('min', new Date(2015, 7, 14)); + +// Using formatted strings. +picker.set('min', '8 January, 2016'); + +// Using integers as days relative to today. +picker.set('min', -4); + +// Using `true` for "today". +picker.set('min', true); + +// Using `false` to remove. +picker.set('min', false); + +// Limit the min time + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('min', [15, 30]); + +// Using JavaScript Date objects. +picker.set('min', new Date(2015, 3, 20, 10, 30)); + +// Using formatted strings. +picker.set('min', '4:30 PM'); + +// Using integers as intervals relative from now. +picker.set('min', -4); + +// Using `true` for "now". +picker.set('min', true); + +// Using `false` to remove. +picker.set('min', false); + +// Limit the max date + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('max', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('max', new Date(2015, 7, 14)); + +// Using formatted strings. +picker.set('max', '20 April, 2016'); + +// Using integers as days relative to today. +picker.set('max', 4); + +// Using `true` for "today". +picker.set('max', true); + +// Using `false` to remove. +picker.set('max', false); + +// Limit the max time + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('max', [15, 30]); + +// Using JavaScript Date objects. +picker.set('max', new Date(2015, 3, 20, 10, 30)); + +// Using formatted strings. +picker.set('max', '11:30 AM'); + +// Using integers as intervals relative from now. +picker.set('max', 4); + +// Using `true` for "now". +picker.set('max', true); + +// Using `false` to remove. +picker.set('max', false); + +// Disable/enable specific dates +picker.set('disable', [ + // Using a collection of arrays formatted as [YEAR,MONTH,DATE] + [2016, 9, 3], [2016, 9, 9], [2016, 9, 20], + + // Using JavaScript Date objects + new Date(2015, 9, 13), new Date(2015, 9, 24) +]); + +picker.set('enable', [ + [2016, 9, 9], + [2016, 9, 13], + new Date(2015, 9, 20) +]); + +// Disable/enable ranges of dates +picker.set('disable', [ + 1, 4, 7, // Using integers as the days of the week (1 to 7) + + // Using a range object with a "from" and "to" property + { from: [2016, 2, 14], to: [2016, 2, 27] } +]); + +picker.set('enable', [ + 4, + { from: [2016, 2, 24], to: [2016, 2, 27] } +]); + +// "Flip" the enabled and disabled dates: +picker.set('disable', 'flip'); +picker.set('enable', 'flip'); + +// Disable all the dates +picker.set('disable', true); +picker.set('enable', false); + +// Enable all the dates +picker.set('enable', true); +picker.set('disable', false); + +// Disable/enable specific times +picker.set('disable', [ + // Using a collection of arrays formatted as [HOUR,MINUTES] + [2, 30], [4, 30], [9, 0], + + // Using JavaScript Date objects + new Date(2015, 9, 13, 6), new Date(2015, 9, 13, 12, 30) +]); + +picker.set('enable', [ + [4, 30], [6, 0], + new Date(2015, 9, 13, 9) +]); + +// Disable/enable ranges of times +picker.set('disable', [ + 1, 4, 7, // Using integers as hours of the day (from 0 to 23) + + // Using a range object with a “from” and “to” property + { from: [10, 30], to: [18, 0] } +]); + +picker.set('enable', [ + 4, + { from: [14, 0], to: [16, 30] } +]); + +// "Flip" the enabled and disabled times: +picker.set('disable', 'flip'); +picker.set('enable', 'flip'); + +// Disable all the times +picker.set('disable', true); +picker.set('enable', true); + +// Enable all the times +picker.set('enable', true); +picker.set('disable', false); + +// Enable an element within a disabled range + +picker.set('disable', [ + // Disable all Mondays, except November 15th, 2015. + 1, [2015, 10, 15, 'inverted'], + + // Disable all dates from March 2nd, 2016 to March 28th, 2016 + // except for March 10th and all between March 14th and March 23rd. + { from: [2016, 2, 2], to: [2016, 2, 28] }, + [2016, 2, 10, 'inverted'], + { from: [2016, 2, 14], to: [2016, 2, 23], inverted: true } +]); + +picker.set('disable', [ + // Disable all times from 1:00 AM to 1:59 AM, except 1:30 AM. + 1, [1, 30, 'inverted'], + + // Disable all times from 3:00 AM to 6:00 PM except + // for 4:30 AM and all between 7:30 AM and 11:30 AM. + { from: [3, 0], to: [18, 0] }, + [4, 30, 'inverted'], + { from: [7, 30], to: [11, 30], inverted: true } +]); + +// For the time picker only, you can change the interval between each time display +// using integers representing the interval length in minutes. +picker.set('interval', 15); +picker.set('interval', 20); +picker.set('interval', 120); + + +picker.on({ + open: function () { + console.log('Opened up!') + }, + close: function () { + console.log('Closed now') + }, + render: function () { + console.log('Just rendered anew') + }, + stop: function () { + console.log('See ya') + }, + set: function (thingSet) { + console.log('Set stuff:', thingSet) + } +}); + +$('.datepicker').pickadate({ + onOpen: function () { + console.log('Opened up!') + }, + onClose: function () { + console.log('Closed now') + }, + onRender: function () { + console.log('Just rendered anew') + }, + onStart: function () { + console.log('Hello there :)') + }, + onStop: function () { + console.log('See ya') + }, + onSet: function (thingSet) { + console.log('Set stuff:', thingSet) + } +}); + +picker.on('open', function () { + console.log('Even when I’m opened, I’m not logged..'); +}); +picker.off('open'); + +// Trigger an event’s callbacks that have been queued up +picker.on('open', function () { + console.log('This logs without opening!'); +}); +picker.trigger('open'); + +// Optionally, you can also pass some data to the method being triggered +picker.on('open', function (data) { + console.log('This logs without opening with this data:', data); +}); +picker.trigger('open', { some: 'value' }); diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 1f96085f7..ac8e7b181 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -1,474 +1,545 @@ -// Type definitions for pickadate.js 3.5.4 +// Type definitions for pickadate.js 3.5.5 // Project: https://github.com/amsul/pickadate.js -// Definitions by: Adi Dahiya +// Definitions by: Theodore Brown // Definitions: https://github.com/borisyankov/DefinitelyTyped +/// + declare module Pickadate { + // KlassOptions shared between date and time pickers + interface KlassOptions { + // The element states + input?: string; // default 'picker__input' + active?: string; // default 'picker__input--active' - export interface Api { - /** - * Clear the value in the picker's input element. - */ - clear(): Pickadate.Api; + // The root picker and states + picker?: string; // default 'picker' or 'picker picker--time' + opened?: string; // default 'picker--opened' + focused?: string; // default 'picker--focused' - /** - * Close the picker. - * - * @param keepFocus whether to retain focus on the input element (default: false) - */ - close(keepFocus?: boolean): Pickadate.Api; + // The picker holder + holder?: string; // default 'picker__holder' - /** - * Get the properties, objects, and states of the picker. - * - * @param field one of [ "value", "select", "highlight", "view", "min", "max", "open", "start", "id", "disable", "enable" ] - * @param format string formatter (available for certain fields) - */ - get(field: string, format?: string): any; + // The picker frame, wrapper, and box + frame?: string; // default 'picker__frame' + wrap?: string; // default 'picker__wrap' + box?: string; // default 'picker__box' - /** - * Returns the string value of the picker’s input element. - */ - get(field: "value"): string; + // Day/Time states + disabled?: string; // default 'picker__day--disabled' or 'picker__list-item--disabled' + selected?: string // default 'picker__day--selected' or 'picker__list-item--selected' + highlighted?: string // default 'picker__day--highlighted' or 'picker__list-item--highlighted' + now?: string; // default 'picker__day--today' or 'picker__list-item--now' - /** - * Returns a boolean value of whether the picker is open or not. - */ - get(field: "open"): boolean; - - /** - * Returns a boolean value of whether the picker has started or not. - */ - get(field: "start"): boolean; - - /** - * Returns a unique string that is the ID of the picker and it’s element. If the element has no ID, it is set to something random. - */ - get(field: "id"): string; - - /** - * "enable" and "disable" work together to determine which item objects to disable on the picker. - * - * "enable" returns 1 to represent a base enabled state, meaning that specific dates or times are disabled and all others are enabled; - * or -1 to indicate a base disabled state, meaning that specific dates or times are enabled and all others are disabled. - */ - get(field: "enable"): number; - - /** - * If "enable" is 1, returns the collection of dates or times to disable. If "enable" is -1, returns the collection of dates or - * times to *not* disable. - */ - get(field: "disable"): any; - - /** - * Unbind callbacks that are bound using the `on` method. - * @param methodName one of [ "open, "close", "render", "start", "stop", "set" ] - */ - off(methodName: string, ...moreMethodNames: string[]): Pickadate.Api; - - /** - * Attach an event handler for the picker. Only "set" events callbacks receive a "context" object. - * - * @param methodName event to attach handler to, one of [ "open", "close", "render", "start", "stop", or "set" ] - * @param callback event handler - */ - on(methodName: string, callback: (context?: any) => void): Pickadate.Api; - - /** - * Open the picker. - * - * @param keepFocus whether to focus the input element (default: true) - */ - open(keepFocus?: boolean): Pickadate.Api; - - /** - * Refresh the picker after adding something to the holder. - * By default, only the "face" of the picker (i.e. the box element), has its contents re-rendered. - * - * @param fromRoot whether to render the entire picker from the root up (default: false) - */ - render(fromRoot?: boolean): Pickadate.Api; - - /** - * Set the properties, objects, and states of the picker. - * - * @param field one of [ "clear", "select", "highlight", "view", "min", "max", "disable", "enable", "interval" ] - * @param value the thing you want to set - */ - set(field: string, value: any, options?: {[key: string]: any}): Pickadate.Api; - /** - * Batch set picker options after initialization. - */ - set(values: {[field: string]: any}, options?: {[key: string]: any}): Pickadate.Api; - - /** - * Rebuild the picker. - */ - start(): Pickadate.Api; - - /** - * Destroy the picker. - */ - stop(): Pickadate.Api; - - /** - * Trigger a picker event. - * @param eventName the event to trigger - */ - trigger(eventName: string): Pickadate.Api; - - /** - * The picker's relative element. - */ - $node: JQuery; - - /** - * The picker's relative root holder element. - */ - $root: JQuery; - - /** - * The picker's relative hidden element, which is undefined if there's no formatSubmit option. - * This is meant to be mostly for internal use. - */ - _hidden: JQuery; + // Clear button + buttonClear?: string; // default 'picker__button--clear' } - export interface DateApi extends Api { - get(field: string, format?: string): any; + interface DateKlassOptions extends KlassOptions { + // The picker header + header?: string; // default 'picker__header' - /** - * Returns the item object or formatted string of the date that is visually selected. - * Defaults to null when there’s no value. - */ - get(field: "select"): DateItem; - get(field: "select", format: string): string; + // Month navigation + navPrev?: string; // default 'picker__nav--prev' + navNext?: string; // default 'picker__nav--next' + navDisabled?: string; // default 'picker__nav--disabled' - /** - * Returns the item object or formatted string of the date that is visually highlighted. - * Defaults to "today" when there’s no value. - */ - get(field: "highlight"): DateItem; - get(field: "highlight", format: string): string; + // Month & year labels + month?: string; // default 'picker__month' + year?: string; // default 'picker__year' - /** - * Returns the item object or formatted string of the date that determines the current view. - * Defaults to the first day of the current month when there’s no value. - */ - get(field: "view"): DateItem; - get(field: "view", format: string): string; + // Month & year dropdowns + selectMonth?: string; // default 'picker__select--month' + selectYear?: string; // default 'picker__select--year' - /** - * Returns the item object or formatted string of the date that determines the lower limit. - * Defaults to a -Infinity item object when it is not explicitly set in the options or through the picker’s API. - */ - get(field: "min"): DateItem; - get(field: "min", format: string): string; + // Table of dates + table?: string; // default 'picker__table' - /** - * Returns the item object or formatted string of the date that determines the upper limit. - * Defaults to an Infinity item object when it is not explicitly set in the options or through the picker’s API. - */ - get(field: "max"): DateItem; - get(field: "max", format: string): string; + // Weekday labels + weekdays?: string; // default 'picker__weekday' + + // Day states + day?: string; // default 'picker__day' + infocus?: string; // default 'picker__day--infocus' + outfocus?: string; // default 'picker__day--outfocus' + + // The picker footer + footer?: string; // default 'picker__footer' + + // Today & close buttons + buttonClose?: string; // default 'picker__button--close' + buttonToday?: string; // default 'picker__button--today' } - export interface DateItem { - // The full year. - year: number; + interface TimeKlassOptions extends KlassOptions { + // The root picker + picker?: string; // default 'picker picker--time' - // The month with zero-as-index. - month: number; + // List of times + list?: string; // default 'picker__list' + listItem?: string; // default 'picker__list-item' - // The date of the month. - date: number; - - // The day of the week with zero-as-index. - day: number; - - // The underlying JavaScript Date object. - obj: Date; - - // The "pick" value used for comparisons. - pick: number; + // Time states + viewset?: string; // default 'picker__list-item--viewset' } - export interface DateOptions { - // String and translations - monthsFull?: string[]; - monthsShort?: string[]; - weekdaysFull?: string[]; - weekdaysShort?: string[] + // options shared between date and time pickers + interface Options { + /** + * Set the clear button text. + * Defaults to 'Clear' + */ + clear?: string; + + /** + * The human-friendly display format. + * Escape any "rule" characters with an exclamation mark (!). + * Defaults to 'd mmmm, yyyy' + */ + format?: string; + + /** + * An alternate format to submit to the server. + * Defaults to undefined. + */ + formatSubmit?: string; + + /** + * An optional name prefix for the new hidden input element used + * when a custom human-friendly display format is specified. + * Defaults to undefined. + */ + hiddenPrefix?: string; + + /** + * An optional name suffix for the new hidden input element used + * when a custom human-friendly display format is specified. + * Defaults to '_submit' + */ + hiddenSuffix?: string; + + /** + * A majority of the time, the value that needs to be sent to the server + * is just the hidden value and not the visible one. To make this happen, + * use the hiddenName option. This essentially nullifies the hiddenPrefix + * and hiddenSuffix, strips the name attribute from the source input, and + * then sets it as the name of the hidden input. Defaults to undefined. + */ + hiddenName?: boolean; + + /** + * By default, typing into the input is disabled by giving it a readOnly + * attribute. Setting the editable option to true allows the input field + * to be edited directly. + */ + editable?: boolean; + + /** + * Specify where to insert the picker's root element by passing any + * valid CSS selector to this option. Defaults to undefined. + */ + container?: string; + + /** + * The hidden input container. + * Defaults to undefined. + */ + containerHidden?: string; + + /** + * Whether or not to close the picker when a date is selected. + * Defaults to `true`. + */ + closeOnSelect?: boolean; + + /** + * Whether or not to close the picker when the "clear" button is pressed. + * Defaults to `true`. + */ + closeOnClear?: boolean; + + // Events + onStart?: (event: any) => void; + onRender?: (event: any) => void; + onOpen?: (event: any) => void; + onClose?: (event: any) => void; + onSet?: (event: any) => void; + onStop?: (event: any) => void; + } + + type MinOrMaxDateOption = Date | [number, number, number] | number | boolean; + type MinOrMaxTimeOption = Date | [number, number] | number | boolean; + + export interface DateOptions extends Options { + // Strings and translations + monthsFull?: string[]; // default 'January' through 'December' + monthsShort?: string[]; // default 'Jan' through 'Dec' + weekdaysFull?: string[]; // default 'Sunday' through 'Saturday' + weekdaysShort?: string[]; // default 'Sun' through 'Sat' showMonthsShort?: boolean; showWeekdaysFull?: boolean; - // Button labels (if falsy, the corresponding button is disabled) - today?: string; - clear?: string; - close?: string; + // Buttons + today?: string; // default 'Today' + close?: string; // default 'Close' // Accessibility labels - labelMonthNext?: string; - labelMonthPrev?: string; - labelMonthSelect?: string; - labelYearSelect?: string; + labelMonthNext?: string; // default 'Next month' + labelMonthPrev?: string; // default 'Previous month' + labelMonthSelect?: string; // default 'Select a month' + labelYearSelect?: string; //default 'Select a year' - // Formats - format?: string; - formatSubmit?: string; - hiddenPrefix?: string; - hiddenSuffix?: string; - hiddenName?: string; + /** + * True enables the dropdown selector and false replaces it with text. + * You can also specify the number of years to show in the dropdown + * using an even integer - half before and half after the year in focus. + * If true the value will default to 10. + */ + selectYears?: boolean | number; - // Editable input - editable?: boolean; + /** + * True enables the dropdown selector and false replaces it with text + */ + selectMonths?: boolean; - // Number of months to show in the month selection dropdown OR a boolean - selectMonths?: any; - // Number of years to show in the month selection dropdown OR a boolean - selectYears?: any; + /** + * The first day of the week can be set to either Sunday or Monday. + * True or 1 sets it as Monday and false or 0 as Sunday. + */ + firstDay?: boolean | number; - // First day of the week - firstDay?: number + /** + * Set the minimum selectable date on the picker. Accepts a Date object, + * array formatted as [YEAR, MONTH, DATE], a positive or negative integer + * for a date relative to today, or a boolean (`true` sets it to today, + * `false` removes any limit). + */ + min?: MinOrMaxDateOption; - // Disable dates (elements can be Dates, [YEAR, MONTH, DATE] arrays, or integers of the week) + /** + * Set the maximum selectable date on the picker. + * Accepts the same values as the `min` property. + */ + max?: MinOrMaxDateOption; + + /** + * Disable a specific or arbitrary set of dates selectable on the + * picker. Accepts an array of Date objects, arrays formatted as + * [YEAR, MONTH, DATE], integers representing days of the week + * (from 1 to 7), or objects with a range of dates. Switch to a + * whitelist by setting `true` as the first item in the collection. + * Enable dates that fall within a range of disabled dates by + * adding an `inverted` parameter to the item within the collection. + */ disable?: any[]; - // Root container selector (string) or element (JQuery) - container?: any; - - // Events - onStart?: () => void; - onRender?: () => void; - onOpen?: () => void; - onClose?: () => void; - onSet?: (context: {[key: string]: any}) => void; - onStop?: () => void; - // Classes klass?: DateKlassOptions; } - export interface DateKlassOptions { - // The element states - input?: string; - active?: string; - - // The root picker and states - picker?: string; - opened?: string; - focused?: string; - - // The picker holder - holder?: string; - - // The picker frame, wrapper, and box - frame?: string; - wrap?: string; - box?: string; - - // The picker header - header?: string; - - // Month navigation - navPrev?: string; - navNext?: string; - navDisabled?: string; - - // Month & year labels - month?: string; - year?: string; - - // Month & year dropdowns - selectMonth?: string; - selectYear?: string; - - // Table of dates - table?: string; - - // Weekday labels - weekdays?: string; - - // Day states - day?: string; - disabled?: string; - selected?: string; - highlighted?: string; - now?: string; - infocus?: string; - outfocus?: string; - - // The picker footer - footer?: string; - - // Today, clear, & close buttons - buttonClear?: string; - buttonClose?: string; - buttonToday?: string - } - - export interface TimeApi extends Api { - get(field: string, format?: string): any; + export interface TimeOptions extends Options { + /** + * The formatLabel option is unique. It can contain HTML and it can + * also be a function if you want to create the label during run-time. + */ + formatLabel?: string | ((time: TimeItem) => string); /** - * Returns the item object or formatted string of the date that is visually selected. - * Defaults to null when there’s no value. - */ - get(field: "select"): TimeItem; - get(field: "select", format: string): string; - - /** - * Returns the item object or formatted string of the date that is visually highlighted. - * Defaults to "now" when there’s no value. - */ - get(field: "highlight"): TimeItem; - get(field: "highlight", format: string): string; - - /** - * Returns the item object or formatted string of the date that determines the current view. - * Defaults to "now" when there’s no value. - */ - get(field: "view"): TimeItem; - get(field: "view", format: string): string; - - /** - * Returns the item object or formatted string of the date that determines the lower limit. - * Defaults to a -Infinity item object when it is not explicitly set in the options or through the picker’s API. - */ - get(field: "min"): TimeItem; - get(field: "min", format: string): string; - - /** - * Returns the item object or formatted string of the date that determines the upper limit. - * Defaults to an Infinity item object when it is not explicitly set in the options or through the picker’s API. - */ - get(field: "max"): TimeItem; - get(field: "max", format: string): string; - } - - export interface TimeItem { - // Hour of the day from 0 to 23. - hour: number; - - // The minutes of the hour from 0 to 59 (based on the interval). - mins: number; - - // The "pick" value used for comparisons. - pick: number; - } - - export interface TimeOptions { - // Translations and clear button - clear?: string; - - // Formats - format?: string; - formatLabel?: string; - formatSubmit?: string; - hiddenPrefix?: string; - hiddenSuffix?: string; - - // Editable input - editable?: boolean; - - // Time intervals + * Choose the interval in minutes between each time in the list. + * Default is 30. + */ interval?: number; - // Time limits (can be Dates, arrays formatted as [HOUR, MINUTE], integers, or booleans) - min?: any; - max?: any; + /** + * Set the minimum selectable time on the picker. Accepts a Date object, + * array formatted as [HOUR, MINUTE], a positive or negative integer + * for a time relative to now, or a boolean (`true` sets it to now, and + * `false` removes any limit). + */ + min?: MinOrMaxTimeOption; - // Disable dates (elements can be Dates, [YEAR, MONTH, DATE] arrays, or integers of the week) + /** + * Set the maximum selectable time on the picker. + * Accepts the same values as the `min` property. + */ + max?: MinOrMaxTimeOption; + + /** + * Disable a specific or arbitrary set of times selectable on the picker. + * Accepts an array of Date objects, arrays formatted as [HOUR, MINUTE], + * integers representing hours (from 0 to 23), or objects with a range of + * times. Switch to a whitelist by setting `true` as the first item in the + * collection. Enable times that fall within a range of disabled times by + * adding an `inverted` parameter to the item within the collection. + */ disable?: any[]; - // Root container selector (string) or element (JQuery) - container?: any; - - // Events - onStart?: () => void; - onRender?: () => void; - onOpen?: () => void; - onClose?: () => void; - onSet?: (context: {[key: string]: any}) => void; - onStop?: () => void; - // Classes klass?: TimeKlassOptions; } - export interface TimeKlassOptions { - // The element states - input?: string; - active?: string; - - // The root picker and states - picker?: string; - opened?: string; - focused?: string; - - // The picker holder - holder?: string; - - // The picker frame, wrapper, and box - frame?: string; - wrap?: string; - box?: string; - - // List of times - list?: string; - listItem?: string; - - // Time states - disabled?: string; - selected?: string; - highlighted?: string; - viewset?: string; - now?: string; - - // Clear button - buttonClear?: string; + interface Item { + /** + * The "pick" value used for comparisons. + */ + pick: number; } + + export interface DateItem extends Item { + /** + * The full year. + */ + year: number; + + /** + * The month with zero-as-index. + */ + month: number; + + /** + * The date of the month. + */ + date: number; + + /** + * The day of the week with zero-as-index. + */ + day: number; + + /** + * The underlying JavaScript Date object. + */ + obj: Date; + } + + export interface TimeItem extends Item { + /** + * Hour of the day from 0 to 23. + */ + hour: number; + + /** + * The minutes of the hour from 0 to 59 (based on the interval). + */ + mins: number; + } + + export interface CallbackObject { + open?: () => void; + close?: () => void; + render?: () => void; + start?: () => void; + stop?: () => void; + set?: (thingSet: any) => void; + } + + export interface SetObject { + clear?: any; + select?: any; + highlight?: any; + view?: any; + min?: any; + max?: any; + disable?: any; + enable?: any; + } + + export interface TimeSetObject extends SetObject { + /** + * Choose the minutes interval between each time in the list. + * Defaults to 30. + */ + interval?: number; + } + + export interface SetOptions { + /** + * By default, any callbacks bound with the on method will be fired + * when its relevant thing is set. To silently set a thing, pass an + * options object with the muted parameter set to true. + */ + muted?: boolean; + format?: string; + } + + interface Picker { + /** + * The picker's relative input element wrapped as a jQuery object. + */ + $node: JQuery; + + /** + * The picker's relative root holder element wrapped as a jQuery object. + */ + $root: JQuery; + + /** + * This is the picker’s relative hidden element, which is undefined if + * there’s no formatSubmit option. There should be no reason to use this + * – it's mostly for internal use. If you have a valid reason for using + * this, please mention it in the issues. + */ + _hidden: HTMLInputElement; + + open(withoutFocus?: boolean): TPickerObject; + close(withFocus?: boolean): TPickerObject; + + /** + * Rebuild the picker. + */ + start(): TPickerObject; + + /** + * Destroy the picker. + */ + stop(): TPickerObject; + + /** + * Refresh the picker box after adding something to the holder. + * By default, only the "face" of the picker (i.e. the box element) + * has it’s contents re-rendered. To render the entire picker from + * the root up, pass true as the first argument. + */ + render(entirePicker?: boolean): TPickerObject; + + /** + * Clear the value in the picker's input element. + */ + clear(): TPickerObject; + + /** + * Short for picker.get('value') + */ + get(): string; + + /** + * Get the properties, objects, and states that make up the current + * state of the picker. + */ + get(thing: string): any; + + /** + * Returns the string value of the picker's input element. + */ + get(thing: 'value'): string; + + /** + * Returns the item object that is visually selected. + */ + get(thing: 'select'): TItemObject; + + /** + * Returns the item object that is visually highlighted. + */ + get(thing: 'highlight'): TItemObject; + + /** + * Returns the item object that sets the current view. + */ + get(thing: 'view'): TItemObject; + + /** + * Returns the item object that limits the picker's lower range. + */ + get(thing: 'min'): TItemObject; + + /** + * Returns the item object that limits the picker's upper range. + */ + get(thing: 'max'): TItemObject; + + /** + * Returns a boolean value of whether the picker is open or not. + */ + get(thing: 'open'): boolean; + + /** + * Returns a boolean value of whether the picker has started or not. + */ + get(thing: 'start'): boolean; + + /** + * Returns a unique 9-digit integer that is the ID of the picker. + */ + get(thing: 'id'): number; + + /** + * Returns an array of items that determine which item objects to + * disable on the picker. + */ + get(thing: 'disable'): any[]; + + /** + * Returns a formatted string for the item object specified by `thing` + */ + get(thing: string, format: string): string; + + /** + * Set the properties, objects, and states to change the state of the picker. + */ + set(thing: string, value?: any, options?: SetOptions): TPickerObject; + set(things: TOptions, options?: SetOptions): TPickerObject; + + /** + * Bind callbacks to get fired off when the relative picker method is called. + */ + on(methodName: string, callback: (data?: any) => void): TPickerObject; + + /** + * Bind multiple callbacks at once to get fired off when the relative + * picker method is called. + */ + on(callbackObject: CallbackObject): TPickerObject; + + /** + * Unbind callbacks that are bound using the on method. + */ + off(...methodName: string[]): TPickerObject; + + /** + * Trigger callbacks that have been queued up using the the on method. + */ + trigger(event: string, data?: any): TPickerObject; + } + + export interface DatePicker extends Picker { } + export interface TimePicker extends Picker { } } interface JQuery { /** - * Access the API object after initialization. + * Access the API object on an initialized date picker element. */ - pickadate(keyword: "picker"): Pickadate.DateApi; + pickadate(keyword: "picker"): Pickadate.DatePicker; pickadate(objectName: "$node"): JQuery; pickadate(objectName: "$root"): JQuery; - pickadate(objectName: "_hidden"): JQuery; + pickadate(objectName: "_hidden"): HTMLInputElement; /** - * Invoke API methods after picker initialization. - * @param methodName - * @param arguments any arguments to pass to the method + * Invoke API methods after date picker initialization. */ pickadate(methodName: string, ...arguments: any[]): any; /** * Initialize a date picker. - * @returns the original JQuery selection */ pickadate(options?: Pickadate.DateOptions): JQuery; - - pickatime(keyword: "picker"): Pickadate.TimeApi; + /** + * Access the API object on an initialized time picker element. + */ + pickatime(keyword: "picker"): Pickadate.TimePicker; pickatime(objectName: "$node"): JQuery; pickatime(objectName: "$root"): JQuery; - pickatime(objectName: "_hidden"): JQuery; - + pickatime(objectName: "_hidden"): HTMLInputElement; + /** - * Invoke API methods after picker initialization. - * @param methodName - * @param arguments any arguments to pass to the method + * Invoke API methods after time picker initialization. */ pickatime(methodName: string, ...arguments: any[]): any; /** * Initialize a time picker. - * @returns the original JQuery selection */ pickatime(options?: Pickadate.TimeOptions): JQuery; } -