From d484d07be66b5eb84addadc19dcba058ae2dfa5a Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Sun, 19 Apr 2015 14:40:48 -0500 Subject: [PATCH 01/15] Move jquery.pickadate definitions to module and support Pickadate v3.5.5 --- jquery.pickadate/jquery.pickadate-tests.ts | 451 ++++++++++++++--- jquery.pickadate/jquery.pickadate.d.ts | 532 +++++++++++---------- 2 files changed, 677 insertions(+), 306 deletions(-) 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; } - From 35243e64dff30581c3f577173fc92cd5ebaa7bc9 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Sun, 19 Apr 2015 16:56:28 -0500 Subject: [PATCH 02/15] Add definitions and tests for muted callbacks --- jquery.pickadate/jquery.pickadate-tests.ts | 20 ++++++++++++++++++++ jquery.pickadate/jquery.pickadate.d.ts | 12 ++++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/jquery.pickadate/jquery.pickadate-tests.ts b/jquery.pickadate/jquery.pickadate-tests.ts index 15ebcbc3a..3bd3f0721 100644 --- a/jquery.pickadate/jquery.pickadate-tests.ts +++ b/jquery.pickadate/jquery.pickadate-tests.ts @@ -421,6 +421,26 @@ 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 diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts index 2c30eb046..4d5e52949 100644 --- a/jquery.pickadate/jquery.pickadate.d.ts +++ b/jquery.pickadate/jquery.pickadate.d.ts @@ -255,6 +255,14 @@ declare module Pickadate { interval?: number; } + 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; + } + interface Picker { /** The picker's relative input element wrapped as a jQuery object. */ $node: JQuery; @@ -322,8 +330,8 @@ declare module Pickadate { 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; + 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; From e507992e6352c488e7b5e4c438e17259abd4c5d7 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Sun, 19 Apr 2015 17:29:04 -0500 Subject: [PATCH 03/15] Remove duplicate, less complete pickadate definitions Fixes #3078 --- pickadate/pickadate-tests.ts | 279 --------------------- pickadate/pickadate.d.ts | 474 ----------------------------------- 2 files changed, 753 deletions(-) delete mode 100644 pickadate/pickadate-tests.ts delete mode 100644 pickadate/pickadate.d.ts diff --git a/pickadate/pickadate-tests.ts b/pickadate/pickadate-tests.ts deleted file mode 100644 index 4700310b8..000000000 --- a/pickadate/pickadate-tests.ts +++ /dev/null @@ -1,279 +0,0 @@ -/// -/// - -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'); - - api.start().open().close().stop(); - - 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: () => { } -}); - -datePickerInput.pickadate({ - klass: { - // The element states - input: 'picker__input', - active: 'picker__input--active', - - // The root picker and states * - picker: 'picker', - 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', - - // The picker header - header: 'picker__header', - - // Month navigation - navPrev: 'picker__nav--prev', - navNext: 'picker__nav--next', - navDisabled: 'picker__nav--disabled', - - // Month & year labels - month: 'picker__month', - year: 'picker__year', - - // Month & year dropdowns - selectMonth: 'picker__select--month', - selectYear: 'picker__select--year', - - // Table of dates - table: 'picker__table', - - // Weekday labels - weekdays: 'picker__weekday', - - // 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', - - // The picker footer - footer: 'picker__footer', - - // Today, clear, & close buttons - buttonClear: 'picker__button--clear', - buttonClose: 'picker__button--close', - buttonToday: 'picker__button--today' - } -}); - -var datePickerApi = datePickerInput.pickadate('picker'); - -datePickerInput.pickadate('open'); -datePickerInput.pickadate('get', 'value'); -datePickerInput.pickadate('$node').show(); -datePickerInput.pickadate('$root').show(); -datePickerInput.pickadate('_hidden').show(); - -testApiMethods(datePickerApi); -testDateApiMethods(datePickerApi); - -// ==================================================================================================================== - -var timePickerInput = $("input.time"); - -timePickerInput.pickatime(); - -timePickerInput.pickatime({ - // Translations and clear button - clear: 'Clear', - - // Formats - format: '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: () => { } -}); - -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' - } -}); - -var timePickerApi = timePickerInput.pickatime('picker'); - -timePickerInput.pickatime('open'); -timePickerInput.pickatime('get', 'value'); -timePickerInput.pickatime('$node').show(); -timePickerInput.pickatime('$root').show(); -timePickerInput.pickatime('_hidden').show(); - -testApiMethods(timePickerApi); -testTimeApiMethods(timePickerApi); - diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts deleted file mode 100644 index 1f96085f7..000000000 --- a/pickadate/pickadate.d.ts +++ /dev/null @@ -1,474 +0,0 @@ -// Type definitions for pickadate.js 3.5.4 -// Project: https://github.com/amsul/pickadate.js -// Definitions by: Adi Dahiya -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -declare module Pickadate { - - export interface Api { - /** - * Clear the value in the picker's input element. - */ - clear(): Pickadate.Api; - - /** - * Close the picker. - * - * @param keepFocus whether to retain focus on the input element (default: false) - */ - close(keepFocus?: boolean): Pickadate.Api; - - /** - * 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; - - /** - * Returns the string value of the picker’s input element. - */ - get(field: "value"): string; - - /** - * 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; - } - - export interface DateApi extends Api { - get(field: string, format?: string): any; - - /** - * 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; - - /** - * 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; - - /** - * 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; - - /** - * 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; - - /** - * 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; - } - - export interface DateItem { - // 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; - - // The "pick" value used for comparisons. - pick: number; - } - - export interface DateOptions { - // String and translations - monthsFull?: string[]; - monthsShort?: string[]; - weekdaysFull?: string[]; - weekdaysShort?: string[] - showMonthsShort?: boolean; - showWeekdaysFull?: boolean; - - // Button labels (if falsy, the corresponding button is disabled) - today?: string; - clear?: string; - close?: string; - - // Accessibility labels - labelMonthNext?: string; - labelMonthPrev?: string; - labelMonthSelect?: string; - labelYearSelect?: string; - - // Formats - format?: string; - formatSubmit?: string; - hiddenPrefix?: string; - hiddenSuffix?: string; - hiddenName?: string; - - // Editable input - editable?: 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; - - // First day of the week - firstDay?: number - - // Disable dates (elements can be Dates, [YEAR, MONTH, DATE] arrays, or integers of the week) - 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; - - /** - * 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 - interval?: number; - - // Time limits (can be Dates, arrays formatted as [HOUR, MINUTE], integers, or booleans) - min?: any; - max?: any; - - // Disable dates (elements can be Dates, [YEAR, MONTH, DATE] arrays, or integers of the week) - 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 JQuery { - /** - * Access the API object after initialization. - */ - pickadate(keyword: "picker"): Pickadate.DateApi; - pickadate(objectName: "$node"): JQuery; - pickadate(objectName: "$root"): JQuery; - pickadate(objectName: "_hidden"): JQuery; - - /** - * Invoke API methods after picker initialization. - * @param methodName - * @param arguments any arguments to pass to the method - */ - 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; - pickatime(objectName: "$node"): JQuery; - pickatime(objectName: "$root"): JQuery; - pickatime(objectName: "_hidden"): JQuery; - - /** - * Invoke API methods after picker initialization. - * @param methodName - * @param arguments any arguments to pass to the method - */ - pickatime(methodName: string, ...arguments: any[]): any; - - /** - * Initialize a time picker. - * @returns the original JQuery selection - */ - pickatime(options?: Pickadate.TimeOptions): JQuery; -} - From 502b8d8c58d747862bd24dbb030e4fac3cf0f7b2 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Sun, 19 Apr 2015 17:41:42 -0500 Subject: [PATCH 04/15] Consistent comment indentation --- jquery.pickadate/jquery.pickadate.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts index 4d5e52949..b1e4ebb28 100644 --- a/jquery.pickadate/jquery.pickadate.d.ts +++ b/jquery.pickadate/jquery.pickadate.d.ts @@ -280,11 +280,11 @@ declare module Pickadate { 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. - */ + * 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. */ From 0ebd3ae49c2e1b56b40435a72595d4a3060665ec Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Sun, 19 Apr 2015 18:06:15 -0500 Subject: [PATCH 05/15] SetOptions can have an optional format --- jquery.pickadate/jquery.pickadate.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts index b1e4ebb28..0754fa765 100644 --- a/jquery.pickadate/jquery.pickadate.d.ts +++ b/jquery.pickadate/jquery.pickadate.d.ts @@ -260,7 +260,8 @@ declare module Pickadate { * 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; + muted?: boolean; + format?: string; } interface Picker { From 6c43946f8ad8490b624c253c32436f7e32ce5475 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Mon, 4 May 2015 23:34:24 -0500 Subject: [PATCH 06/15] Add missing semicolons to tests --- jquery.pickadate/jquery.pickadate-tests.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jquery.pickadate/jquery.pickadate-tests.ts b/jquery.pickadate/jquery.pickadate-tests.ts index 3bd3f0721..d47dc3b58 100644 --- a/jquery.pickadate/jquery.pickadate-tests.ts +++ b/jquery.pickadate/jquery.pickadate-tests.ts @@ -209,12 +209,12 @@ $('.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({ @@ -431,7 +431,7 @@ picker.set({ // Muted callbacks // One at a time -picker.set('disable', 'flip', { muted: true }) +picker.set('disable', 'flip', { muted: true }); // Multiple at once picker.set({ From c132e6e5dcecce5f658e42e8f002d749e193c674 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Wed, 6 May 2015 22:21:52 -0500 Subject: [PATCH 07/15] Match npm package name and remove empty tscparams --- jquery.pickadate/jquery.pickadate-tests.ts.tscparams | 1 - jquery.pickadate/jquery.pickadate.d.ts.tscparams | 1 - .../jquery.pickadate-tests.ts => pickadate/pickadate-tests.ts | 2 +- .../jquery.pickadate.d.ts => pickadate/pickadate.d.ts | 0 4 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 jquery.pickadate/jquery.pickadate-tests.ts.tscparams delete mode 100644 jquery.pickadate/jquery.pickadate.d.ts.tscparams rename jquery.pickadate/jquery.pickadate-tests.ts => pickadate/pickadate-tests.ts (99%) rename jquery.pickadate/jquery.pickadate.d.ts => pickadate/pickadate.d.ts (100%) 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.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/jquery.pickadate/jquery.pickadate-tests.ts b/pickadate/pickadate-tests.ts similarity index 99% rename from jquery.pickadate/jquery.pickadate-tests.ts rename to pickadate/pickadate-tests.ts index d47dc3b58..eca4e8d36 100644 --- a/jquery.pickadate/jquery.pickadate-tests.ts +++ b/pickadate/pickadate-tests.ts @@ -1,4 +1,4 @@ -/// +/// // Date picker tests from http://amsul.ca/pickadate.js/date/ diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/pickadate/pickadate.d.ts similarity index 100% rename from jquery.pickadate/jquery.pickadate.d.ts rename to pickadate/pickadate.d.ts From 8f4dd4a68b92a324859632783d0c01be38231f39 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Wed, 6 May 2015 22:34:39 -0500 Subject: [PATCH 08/15] Export additional interfaces --- pickadate/pickadate.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 0754fa765..d6dd7e2a3 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -255,7 +255,7 @@ declare module Pickadate { interval?: number; } - interface SetOptions { + 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. @@ -347,8 +347,8 @@ declare module Pickadate { trigger(event: string, data?: any): TPickerObject; } - interface DatePicker extends Picker { } - interface TimePicker extends Picker { } + export interface DatePicker extends Picker { } + export interface TimePicker extends Picker { } } interface JQuery { From fe5406b820f645346b9a401b6c3bebc94c04933e Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Wed, 6 May 2015 23:21:06 -0500 Subject: [PATCH 09/15] Improve JSDoc comments and use a union type for min/max properties --- pickadate/pickadate-tests.ts | 3 + pickadate/pickadate.d.ts | 296 ++++++++++++++++++++++++++--------- 2 files changed, 223 insertions(+), 76 deletions(-) diff --git a/pickadate/pickadate-tests.ts b/pickadate/pickadate-tests.ts index eca4e8d36..09e9d57ad 100644 --- a/pickadate/pickadate-tests.ts +++ b/pickadate/pickadate-tests.ts @@ -382,6 +382,9 @@ var $input = $('.datepicker').pickadate(); // Use the picker object directly. var picker = $input.pickadate('picker'); +picker.$node; +picker.$root; + picker.open().clear().close(); picker.open(); diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index d6dd7e2a3..5056096ce 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -6,7 +6,7 @@ /// declare module Pickadate { - /** KlassOptions shared between date and time pickers */ + // KlassOptions shared between date and time pickers interface KlassOptions { // The element states input?: string; // default 'picker__input' @@ -83,44 +83,80 @@ declare module Pickadate { viewset?: string; // default 'picker__list-item--viewset' } - /** Options shared between date and time pickers */ + // options shared between date and time pickers interface Options { - /** Set clear button text */ - clear?: string; // default 'Clear' + /** + * 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; // default 'd mmmm, yyyy' - - /** An alternate format to submit to the server. */ - formatSubmit?: string; // default undefined - hiddenPrefix?: string; // default undefined - hiddenSuffix?: string; // default '_submit' + format?: 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: + * An alternate format to submit to the server. + * Defaults to undefined. */ - hiddenName?: boolean; // default undefined + formatSubmit?: string; /** - * 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. + * 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 */ - container?: string; // default undefined + /** + * 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 */ - containerHidden?: string; // default undefined + /** + * The hidden input container. + * Defaults to undefined. + */ + containerHidden?: string; - // Close on a user action - closeOnSelect?: boolean; // default true - closeOnClear?: boolean; // default true + /** + * 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; @@ -133,10 +169,10 @@ declare module Pickadate { 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' + 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; @@ -152,12 +188,15 @@ declare module Pickadate { /** * 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. + * 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; + selectYears?: boolean | number; - /** True enables the dropdown selector and false replaces it with text */ + /** + * True enables the dropdown selector and false replaces it with text + */ selectMonths?: boolean; /** @@ -166,12 +205,30 @@ declare module Pickadate { */ 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; + /** + * 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?: Date | [number, number, number] | number | boolean; - // 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`. + /** + * Set the maximum selectable date on the picker. + * Accepts the same values as the `min` property. + */ + max?: Date | [number, number, number] | number | boolean; + + /** + * 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[]; // Classes klass?: DateKlassOptions; @@ -182,7 +239,7 @@ declare module Pickadate { * 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); + formatLabel?: string | ((time: TimeItem) => string); /** * Choose the interval in minutes between each time in the list. @@ -190,44 +247,77 @@ declare module Pickadate { */ 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; + /** + * 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?: Date | [number, number] | number | boolean; - // 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. + /** + * Set the maximum selectable time on the picker. + * Accepts the same values as the `min` property. + */ + max?: Date | [number, number] | number | boolean; + + /** + * 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[]; // Classes klass?: TimeKlassOptions; } interface Item { - /** The "pick" value used for comparisons. */ + /** + * The "pick" value used for comparisons. + */ pick: number; } export interface DateItem extends Item { - /** The full year. */ + /** + * The full year. + */ year: number; - /** The month with zero-as-index. */ + /** + * The month with zero-as-index. + */ month: number; - /** The date of the month. */ + /** + * The date of the month. + */ date: number; - /** The day of the week with zero-as-index. */ + /** + * The day of the week with zero-as-index. + */ day: number; - /** The underlying JavaScript Date object. */ + /** + * The underlying JavaScript Date object. + */ obj: Date; } export interface TimeItem extends Item { - /** Hour of the day from 0 to 23. */ + /** + * Hour of the day from 0 to 23. + */ hour: number; - /** The minutes of the hour from 0 to 59 (based on the interval). */ + /** + * The minutes of the hour from 0 to 59 (based on the interval). + */ mins: number; } @@ -252,98 +342,152 @@ declare module Pickadate { } 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. + * 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. */ + /** + * 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. */ + /** + * 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. */ + /** + * Rebuild the picker. + */ start(): TPickerObject; - /** Destroy the picker. */ + /** + * 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 + * 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 the value in the picker's input element. + */ clear(): TPickerObject; - /** Short for picker.get('value') */ + /** + * Short for picker.get('value') + */ get(): string; - /** Get the properties, objects, and states that make up the current state of the picker. */ + /** + * 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. */ + /** + * Returns the string value of the picker's input element. + */ get(thing: 'value'): string; - /** Returns the item object that is visually selected. */ + /** + * Returns the item object that is visually selected. + */ get(thing: 'select'): TItemObject; - /** Returns the item object that is visually highlighted. */ + /** + * Returns the item object that is visually highlighted. + */ get(thing: 'highlight'): TItemObject; - /** Returns the item object that sets the current view. */ + /** + * Returns the item object that sets the current view. + */ get(thing: 'view'): TItemObject; - /** Returns the item object that limits the picker's lower range. */ + /** + * 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. */ + /** + * 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. */ + /** + * 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. */ + /** + * 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. */ + /** + * 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. */ + /** + * 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` */ + /** + * 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 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. */ + /** + * 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. */ + /** + * 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. */ + /** + * 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 callbacks that have been queued up using the the on method. + */ trigger(event: string, data?: any): TPickerObject; } From 56b8491cbb40a9618ab4231cb38afae601e4c99a Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 00:37:11 -0500 Subject: [PATCH 10/15] Support accessing/invoking API objects and methods on initialized pickers --- pickadate/pickadate-tests.ts | 19 ++++++++++++++++ pickadate/pickadate.d.ts | 44 ++++++++++++++++++++++++++++++++---- 2 files changed, 59 insertions(+), 4 deletions(-) diff --git a/pickadate/pickadate-tests.ts b/pickadate/pickadate-tests.ts index 09e9d57ad..91ffe7e4c 100644 --- a/pickadate/pickadate-tests.ts +++ b/pickadate/pickadate-tests.ts @@ -384,6 +384,25 @@ 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(); diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 5056096ce..7b96dedb9 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -370,6 +370,14 @@ declare module Pickadate { */ $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; @@ -496,11 +504,39 @@ declare module Pickadate { } interface JQuery { - pickadate(methodName: "picker"): Pickadate.DatePicker; - pickadate(methodName: string): any; + /** + * Access the API object on an initialized date picker element. + */ + pickadate(keyword: "picker"): Pickadate.DatePicker; + pickadate(objectName: "$node"): JQuery; + pickadate(objectName: "$root"): JQuery; + pickadate(objectName: "_hidden"): HTMLInputElement; + + /** + * Invoke API methods after date picker initialization. + */ + pickadate(methodName: string, ...arguments: any[]): any; + + /** + * Initialize a date picker. + */ pickadate(options?: Pickadate.DateOptions): JQuery; - pickatime(methodName: "picker"): Pickadate.TimePicker; - pickatime(methodName: string): any; + /** + * 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"): HTMLInputElement; + + /** + * Invoke API methods after time picker initialization. + */ + pickatime(methodName: string, ...arguments: any[]): any; + + /** + * Initialize a time picker. + */ pickatime(options?: Pickadate.TimeOptions): JQuery; } From 8f6b638c3f508690566f15514c28e1ee432fa376 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 01:32:53 -0500 Subject: [PATCH 11/15] Fix implicit any --- pickadate/pickadate.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 7b96dedb9..4f23d2582 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -327,7 +327,7 @@ declare module Pickadate { render?: () => void; start?: () => void; stop?: () => void; - set?: (thingset) => void; + set?: (thingset: any) => void; } export interface SetObject { From 6ebceeb8bdd57aafa7861f78f54dc003ef265ae6 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 09:49:48 -0500 Subject: [PATCH 12/15] Remove duplicate object property tests --- pickadate/pickadate-tests.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/pickadate/pickadate-tests.ts b/pickadate/pickadate-tests.ts index 91ffe7e4c..21bc5b074 100644 --- a/pickadate/pickadate-tests.ts +++ b/pickadate/pickadate-tests.ts @@ -794,6 +794,3 @@ picker.on('open', function (data) { console.log('This logs without opening with this data:', data); }); picker.trigger('open', { some: 'value' }); - -picker.$node; -picker.$root; From 668800dbfb8b67c4e2485602fa3dc8ef0ed3ad3c Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 09:54:24 -0500 Subject: [PATCH 13/15] Consistent whitespace for union types --- pickadate/pickadate.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 4f23d2582..0463503ea 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -203,7 +203,7 @@ declare module Pickadate { * 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; + firstDay?: boolean | number; /** * Set the minimum selectable date on the picker. Accepts a Date object, From 8cf87c48c6aec99f3ddfde293362edb3e99f413a Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 10:34:12 -0500 Subject: [PATCH 14/15] Use type aliases for min/max date and time options --- pickadate/pickadate.d.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 0463503ea..38aed639a 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -166,6 +166,9 @@ declare module Pickadate { 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 @@ -211,13 +214,13 @@ declare module Pickadate { * for a date relative to today, or a boolean (`true` sets it to today, * `false` removes any limit). */ - min?: Date | [number, number, number] | number | boolean; + min?: MinOrMaxDateOption; /** * Set the maximum selectable date on the picker. * Accepts the same values as the `min` property. */ - max?: Date | [number, number, number] | number | boolean; + max?: MinOrMaxDateOption; /** * Disable a specific or arbitrary set of dates selectable on the @@ -253,13 +256,13 @@ declare module Pickadate { * for a time relative to now, or a boolean (`true` sets it to now, and * `false` removes any limit). */ - min?: Date | [number, number] | number | boolean; + min?: MinOrMaxTimeOption; /** * Set the maximum selectable time on the picker. * Accepts the same values as the `min` property. */ - max?: Date | [number, number] | number | boolean; + max?: MinOrMaxTimeOption; /** * Disable a specific or arbitrary set of times selectable on the picker. From 66320d234bcb4f199cafcbc2b7490a9c51a710f1 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Thu, 7 May 2015 10:36:32 -0500 Subject: [PATCH 15/15] Use camelCase for thingSet parameter --- pickadate/pickadate.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pickadate/pickadate.d.ts b/pickadate/pickadate.d.ts index 38aed639a..ac8e7b181 100644 --- a/pickadate/pickadate.d.ts +++ b/pickadate/pickadate.d.ts @@ -330,7 +330,7 @@ declare module Pickadate { render?: () => void; start?: () => void; stop?: () => void; - set?: (thingset: any) => void; + set?: (thingSet: any) => void; } export interface SetObject {