diff --git a/jquery.pickadate/jquery.pickadate-tests.ts b/jquery.pickadate/jquery.pickadate-tests.ts index fde52f3e3..15ebcbc3a 100644 --- a/jquery.pickadate/jquery.pickadate-tests.ts +++ b/jquery.pickadate/jquery.pickadate-tests.ts @@ -1,20 +1,30 @@ /// -/* -* Date picker tests -* From http://amsul.ca/pickadate.js/date.htm -*/ +// Date picker tests from http://amsul.ca/pickadate.js/date/ $('.datepicker').pickadate(); +// Change the month and weekday labels $('.datepicker').pickadate({ weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], showMonthsShort: true }); +// Change button text or hide a button completely $('.datepicker').pickadate({ today: '', - clear: 'Clear selection' + clear: 'Clear selection', + close: 'Cancel' +}); + +// 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 }); // Extend the default picker options for all instances. @@ -35,6 +45,7 @@ $('.datepicker').pickadate({ formatSubmit: 'yyyy/mm/dd' }); +// 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', @@ -43,30 +54,51 @@ $('.datepicker').pickadate({ hiddenSuffix: '__suffix' }); +// Send the hidden value only +$('.datepicker').pickadate({ + formatSubmit: 'yyyy/mm/dd', + hiddenName: true +}); + +// Editable input +$('.datepicker').pickadate({ + editable: true +}); + +// Display select menus to pick the month and year $('.datepicker').pickadate({ selectYears: true, selectMonths: true }); +// 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 }); +// 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 }); +// Date Limits + +// Using JavaScript dates $('.datepicker').pickadate({ min: new Date(2013, 3, 20), max: new Date(2013, 7, 14) }); +// 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, @@ -74,21 +106,9 @@ $('.datepicker').pickadate({ max: true }); -$('.datepicker').pickadate({ - disable: [ - [2013, 3, 3], - [2013, 3, 12], - [2013, 3, 20], - [2013, 3, 29] - ] -}); - -$('.datepicker').pickadate({ - disable: [ - 1, 4, 7 - ] -}); +// Disable dates +// Using JavaScript dates $('.datepicker').pickadate({ disable: [ new Date(2013, 3, 13), @@ -96,6 +116,30 @@ $('.datepicker').pickadate({ ] }); +// 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, @@ -103,14 +147,40 @@ $('.datepicker').pickadate({ [2013, 3, 3], [2013, 3, 12], [2013, 3, 20], - [2013, 3, 29] + 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({ - container: '#root-outlet' + 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 :)') @@ -127,22 +197,31 @@ $('.datepicker').pickadate({ onStop: function () { console.log('See ya.') }, - onSet: function (event) { - console.log('Just set stuff:', event) + onSet: function (context) { + console.log('Just set stuff:', context) } }); -/* -* Time picker tests -* From http://amsul.ca/pickadate.js/time.htm -*/ +// Time picker tests from http://amsul.ca/pickadate.js/time/ $('.timepicker').pickatime(); +// 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' +}) + +// Change the text or hide the button completely by passing a false-y value $('.timepicker').pickatime({ clear: '' }); +// 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', @@ -152,23 +231,47 @@ $('.timepicker').pickatime({ hiddenSuffix: '__suffix' }); +// 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: TimePickerItemObject) { + 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).toString() : '') + label + '' + return 'h:i a ' + (hours ? Math.abs(hours) : '') + label + '' } }); -$('.datepicker').pickadate({ +// Send the hidden value only +$('.timepicker').pickatime({ + formatSubmit: 'HH:i', + hiddenName: true +}); + +// Editable input +$('.timepicker').pickatime({ + editable: true +}); + +// 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, @@ -176,6 +279,17 @@ $('.timepicker').pickatime({ 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], @@ -185,12 +299,21 @@ $('.timepicker').pickatime({ ] }); +// 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, @@ -202,10 +325,35 @@ $('.timepicker').pickatime({ ] }); +// Enable times that fall within a range of disabled times by adding +// the inverted parameter to the item within the collection $('.timepicker').pickatime({ - container: '#root-outlet' + 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 :)') @@ -222,15 +370,12 @@ $('.timepicker').pickatime({ onStop: function () { console.log('See ya.') }, - onSet: function (event) { - console.log('Just set stuff:', event) + onSet: function (context) { + console.log('Just set stuff:', context) } }); -/* -* API tests -* From http://amsul.ca/pickadate.js/api.htm -*/ +// API tests from http://amsul.ca/pickadate.js/api/ var $input = $('.datepicker').pickadate(); @@ -243,17 +388,18 @@ picker.open(); picker.close(); picker.close(true); -picker.open(false) +picker.open(false); $(document).on('click', function () { - picker.close() + picker.close(); }); picker.start(); picker.stop(); picker.render(); +picker.render(true); picker.clear(); -picker.get() // Short for `picker.get('value')` +picker.get(); // Short for `picker.get('value')` picker.get('select'); picker.get('select', 'yyyy/mm/dd'); @@ -262,6 +408,7 @@ 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'); @@ -271,63 +418,105 @@ picker.get('max', 'yyyy/mm/dd'); picker.get('open'); picker.get('start'); picker.get('id'); +picker.get('enable'); picker.get('disable'); picker.set('clear'); -// reset disabled dates -picker.set('disable', undefined); +// 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,03,20)); +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(2013,7,14)); +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)); +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(2013,7,14)); +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); @@ -338,9 +527,17 @@ 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); @@ -350,11 +547,16 @@ 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(2013,7,14)); +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); @@ -365,9 +567,17 @@ 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); @@ -377,16 +587,131 @@ picker.set('max', true); // Using `false` to remove. picker.set('max', false); -picker.on('open', function () { - console.log('Opened.. and here I am!'); -}); +// 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.. and here I am!'); + console.log('Opened up!') }, close: function () { - console.log('Closed.. and here I am!'); + 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) } }); @@ -406,15 +731,27 @@ $('.datepicker').pickadate({ onStop: function () { console.log('See ya') }, - onSet: function (event) { - console.log('Set stuff:', event) + onSet: function (thingSet) { + console.log('Set stuff:', thingSet) } }); picker.on('open', function () { - console.log('Didn\'t open.. yet here I am!'); -}) + 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' }); + picker.$node; -picker.$root; \ No newline at end of file +picker.$root; diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts index 62b20bb22..2c30eb046 100644 --- a/jquery.pickadate/jquery.pickadate.d.ts +++ b/jquery.pickadate/jquery.pickadate.d.ts @@ -1,69 +1,19 @@ -// Type definitions for pickadate.js 3.3.0 +// Type definitions for pickadate.js 3.5.5 // 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?: { - +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' // The root picker and states - picker?: string; // default 'picker' + picker?: string; // default 'picker' or 'picker picker--time' opened?: string; // default 'picker--opened' focused?: string; // default 'picker--focused' @@ -75,6 +25,17 @@ interface pickadateOptions extends pickerOptions { wrap?: string; // default 'picker__wrap' box?: string; // default 'picker__box' + // 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' + + // Clear button + buttonClear?: string; // default 'picker__button--clear' + } + + interface DateKlassOptions extends KlassOptions { // The picker header header?: string; // default 'picker__header' @@ -99,221 +60,294 @@ interface pickadateOptions extends pickerOptions { // 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' + // Today & close buttons + buttonClose?: string; // default 'picker__button--close' 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' + interface TimeKlassOptions extends KlassOptions { + // The root picker + picker?: string; // default 'picker picker--time' // 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' } + + /** Options shared between date and time pickers */ + interface Options { + /** Set clear button text */ + clear?: string; // default 'Clear' + + /** + * The human-friendly display format. + * Escape any "rule" characters with an exclamation mark (!). + */ + format?: string; // default 'd mmmm, yyyy' + + /** An alternate format to submit to the server. */ + formatSubmit?: string; // default undefined + hiddenPrefix?: string; // default undefined + hiddenSuffix?: string; // default '_submit' + + /** + * 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: + */ + hiddenName?: boolean; // default undefined + + /** + * 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 */ + container?: string; // default undefined + + /** The hidden input container */ + containerHidden?: string; // default undefined + + // Close on a user action + closeOnSelect?: boolean; // default true + closeOnClear?: boolean; // default true + + // 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; + } + + export interface DateOptions extends Options { + // 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' + close?: string; // default 'Close' + + // Accessibility labels + labelMonthNext?: string; // default 'Next month' + labelMonthPrev?: string; // default 'Previous month' + labelMonthSelect?: string; // default 'Select a month' + labelYearSelect?: string; //default 'Select a year' + + /** + * 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; + + /** True enables the dropdown selector and false replaces it with text */ + selectMonths?: boolean; + + /** + * 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; + + // 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?: DateKlassOptions; + } + + 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); + + /** + * Choose the interval in minutes between each time in the list. + * Default is 30. + */ + interval?: number; + + // 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?: TimeKlassOptions; + } + + 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) => 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 { + interval?: number; + } + + 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; + + 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: 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; + } + + interface DatePicker extends Picker { } + interface TimePicker extends Picker { } } -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: "picker"): Pickadate.DatePicker; pickadate(methodName: string): any; - pickadate(options?: pickadateOptions): JQuery; + pickadate(options?: Pickadate.DateOptions): JQuery; - pickatime(methodName: "picker"): TimePickerObject; + pickatime(methodName: "picker"): Pickadate.TimePicker; pickatime(methodName: string): any; - pickatime(options?: pickatimeOptions): JQuery; + pickatime(options?: Pickadate.TimeOptions): JQuery; } -