diff --git a/README.md b/README.md index 83e4ffbca5..960c06c804 100755 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ List of Definitions * [jQuery.Globalize](https://github.com/jquery/globalize) (by [Boris Yankov](https://github.com/borisyankov)) * [jQuery.jNotify](http://jnotify.codeplex.com) (by [James Curran](https://github.com/jamescurran/)) * [jQuery.noty](http://needim.github.io/noty/) (by [Aaron King](https://github.com/kingdango/)) +* [jQuery.pickadate](https://github.com/amsul/pickadate.js) (by [Theodore Brown](https://github.com/theodorejb)) * [jQuery.scrollTo](https://github.com/flesler/jquery.scrollTo) (by [Neil Stalker](https://github.com/nestalk/)) * [jQuery.simplePagination](https://github.com/flaviusmatis/simplePagination.js) (by [Natan Vivo](https://github.com/nvivo/)) * [jQuery.timeago](http://timeago.yarp.com/) (by [François Guillot](http://fguillot.developpez.com/)) diff --git a/jquery.pickadate/jquery.pickadate-tests.ts b/jquery.pickadate/jquery.pickadate-tests.ts new file mode 100644 index 0000000000..ca68d6e91e --- /dev/null +++ b/jquery.pickadate/jquery.pickadate-tests.ts @@ -0,0 +1,400 @@ +/// + +/* +* Date picker tests +* From http://amsul.ca/pickadate.js/date.htm +*/ + +$('.datepicker').pickadate(); + +$('.datepicker').pickadate({ + weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], + showMonthsShort: true +}); + +$('.datepicker').pickadate({ + today: '', + clear: 'Clear selection' +}); + +// Extend the default picker options for all instances. +$.extend($.fn.pickadate.defaults, { + monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], + weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], + today: 'aujourd\'hui', + clear: 'effacer', + formatSubmit: 'yyyy/mm/dd' +}); + +// Or, pass the months and weekdays as an array for each invocation. +$('.datepicker').pickadate({ + monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], + weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], + today: 'aujourd\'hui', + clear: 'effacer', + formatSubmit: 'yyyy/mm/dd' +}); + +$('.datepicker').pickadate({ + // Escape any "rule" characters with an exclamation mark (!). + format: 'You selecte!d: dddd, dd mmm, yyyy', + formatSubmit: 'yyyy/mm/dd', + hiddenSuffix: '--submit' +}); + +$('.datepicker').pickadate({ + selectYears: true, + selectMonths: true +}); + +$('.datepicker').pickadate({ + // `true` defaults to 10. + selectYears: 4 +}); + +$('.datepicker').pickadate({ + firstDay: 1 +}); + +$('.datepicker').pickadate({ + min: new Date(2013, 3, 20), + max: new Date(2013, 7, 14) +}); + +$('.datepicker').pickadate({ + min: [2013, 3, 20], + max: [2013, 7, 14] +}); + +$('.datepicker').pickadate({ + // An integer (positive/negative) sets it relative to today. + min: -15, + // `true` sets it to today. `false` removes any limits. + max: true +}); + +$('.datepicker').pickadate({ + disable: [ + [2013, 3, 3], + [2013, 3, 12], + [2013, 3, 20], + [2013, 3, 29] + ] +}); + +$('.datepicker').pickadate({ + disable: [ + 1, 4, 7 + ] +}); + +$('.datepicker').pickadate({ + disable: [ + true, + 1, 4, 7, + [2013, 3, 3], + [2013, 3, 12], + [2013, 3, 20], + [2013, 3, 29] + ] +}); + +$('.datepicker').pickadate({ + onStart: function () { + console.log('Hello there :)') + }, + onRender: function () { + console.log('Whoa.. rendered anew') + }, + onOpen: function () { + console.log('Opened up') + }, + onClose: function () { + console.log('Closed now') + }, + onStop: function () { + console.log('See ya.') + }, + onSet: function (event) { + console.log('Just set stuff:', event) + } +}); + +/* +* Time picker tests +* From http://amsul.ca/pickadate.js/time.htm +*/ + +$('.timepicker').pickatime(); + +$('.timepicker').pickatime({ + clear: '' +}); + +$('.timepicker').pickatime({ + // Escape any "rule" characters with an exclamation mark (!). + format: 'T!ime selected: h:i a', + formatLabel: 'h:i a', + formatSubmit: 'HH:i', + hiddenSuffix: '--submit' +}); + +$('.timepicker').pickatime({ + formatLabel: function (time: TimePickerItemObject) { + var hours = (time.pick - this.get('now').pick) / 60, + label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now' + return 'h:i a ' + (hours ? Math.abs(hours).toString() : '') + label + '' + } +}); + +$('.datepicker').pickadate({ + interval: 150 +}); + +$('.timepicker').pickatime({ + min: [7, 30], + max: [14, 0] +}); + +$('.timepicker').pickatime({ + // An integer (positive/negative) sets it as intervals relative from now. + min: -5, + // `true` sets it to now. `false` removes any limits. + max: true +}); + +$('.timepicker').pickatime({ + disable: [ + [0, 30], + [2, 0], + [8, 30], + [9, 0] + ] +}); + +$('.timepicker').pickatime({ + disable: [ + 3, 5, 7 + ] +}); + +$('.timepicker').pickatime({ + disable: [ + true, + 3, 5, 7, + [0, 30], + [2, 0], + [8, 30], + [9, 0] + ] +}); + +$('.timepicker').pickatime({ + onStart: function () { + console.log('Hello there :)') + }, + onRender: function () { + console.log('Whoa.. rendered anew') + }, + onOpen: function () { + console.log('Opened up') + }, + onClose: function () { + console.log('Closed now') + }, + onStop: function () { + console.log('See ya.') + }, + onSet: function (event) { + console.log('Just set stuff:', event) + } +}); + +/* +* API tests +* From http://amsul.ca/pickadate.js/api.htm +*/ + +var $input = $('.datepicker').pickadate(); + +// Use the picker object directly. +var picker = $input.pickadate('picker'); + +picker.open().clear().close(); + +picker.open(); +picker.close(); +picker.close(true); + +picker.open(false) +$(document).on('click', function () { + picker.close() +}); + +picker.start(); +picker.stop(); +picker.render(); +picker.clear(); + +picker.get() // Short for `picker.get('value')` + +picker.get('select'); +picker.get('select', 'yyyy/mm/dd'); + +picker.get('highlight'); +picker.get('highlight', 'yyyy/mm/dd'); + +picker.get('view'); + +picker.get('min'); +picker.get('min', 'yyyy/mm/dd'); +picker.get('max'); +picker.get('max', 'yyyy/mm/dd'); + +picker.get('open'); +picker.get('start'); +picker.get('id'); +picker.get('disable'); + +picker.set('clear'); + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('select', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('select', new Date(2013,03,20)); + +// Using positive integers as UNIX timestamps. +picker.set('select', 1365961912346); + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('select', [3, 0]); + +// Using positive integers as minutes. +picker.set('select', 540); + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('highlight', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('highlight', new Date(2013,7,14)); + +// Using positive integers as UNIX timestamps. +picker.set('highlight', 1365961912346); + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('highlight', [15, 30]); + +// Using positive integers as minutes. +picker.set('highlight', 1080); + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('view', [2000, 3, 20]); + +// Using JavaScript Date objects. +picker.set('view', new Date(1988,7,14)); + +// Using positive integers as UNIX timestamps. +picker.set('view', 1587355200000); + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('view', [15, 30]); + +// Using positive integers as minutes. +picker.set('view', 1080); + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('min', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('min', new Date(2013,7,14)); + +// Using integers as days relative to today. +picker.set('min', -4); + +// Using `true` for "today". +picker.set('min', true); + +// Using `false` to remove. +picker.set('min', false); + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('min', [15, 30]); + +// Using integers as intervals relative from now. +picker.set('min', -4); + +// Using `true` for "now". +picker.set('min', true); + +// Using `false` to remove. +picker.set('min', false); + +// Using arrays formatted as [YEAR,MONTH,DATE]. +picker.set('max', [2013, 3, 20]); + +// Using JavaScript Date objects. +picker.set('max', new Date(2013,7,14)); + +// Using integers as days relative to today. +picker.set('max', 4); + +// Using `true` for "today". +picker.set('max', true); + +// Using `false` to remove. +picker.set('max', false); + +// Using arrays formatted as [HOUR,MINUTE]. +picker.set('max', [15, 30]); + +// Using integers as intervals relative from now. +picker.set('max', 4); + +// Using `true` for "now". +picker.set('max', true); + +// Using `false` to remove. +picker.set('max', false); + +picker.on('open', function () { + console.log('Opened.. and here I am!'); +}); + +picker.on({ + open: function () { + console.log('Opened.. and here I am!'); + }, + close: function () { + console.log('Closed.. and here I am!'); + } +}); + +$('.datepicker').pickadate({ + onOpen: function () { + console.log('Opened up!') + }, + onClose: function () { + console.log('Closed now') + }, + onRender: function () { + console.log('Just rendered anew') + }, + onStart: function () { + console.log('Hello there :)') + }, + onStop: function () { + console.log('See ya') + }, + onSet: function (event) { + console.log('Set stuff:', event) + } +}); + +picker.on('open', function () { + console.log('Didn't open.. yet here I am!'); +}) +picker.trigger('open'); + +picker.$node; +picker.$root; \ No newline at end of file diff --git a/jquery.pickadate/jquery.pickadate.d.ts b/jquery.pickadate/jquery.pickadate.d.ts new file mode 100644 index 0000000000..0de7851087 --- /dev/null +++ b/jquery.pickadate/jquery.pickadate.d.ts @@ -0,0 +1,375 @@ +// Type definitions for pickadate.js 3.0.5 +// Project: https://github.com/amsul/pickadate.js +// Definitions by: Theodore Brown +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface pickadateOptions { + // 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' + clear?: string; // default 'Clear' + + // Formats + format?: string; // default 'd mmmm, yyyy' + formatSubmit?: string; // e.g. 'yyyy/mm/dd' + hiddenSuffix?: string; // default '_submit' + + // 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[]; // 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`. + + // 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; + + // Classes + klass?: { + + // The element states + input?: string; // default 'picker__input' + active?: string; // default 'picker__input--active' + + // The root picker and states + picker?: string; // default 'picker' + opened?: string; // default 'picker--opened' + focused?: string; // default 'picker--focused' + + // The picker holder + holder?: string; // default 'picker__holder' + + // The picker frame, wrapper, and box + frame?: string; // default 'picker__frame' + wrap?: string; // default 'picker__wrap' + box?: string; // default 'picker__box' + + // The picker header + header?: string; // default 'picker__header' + + // Month navigation + navPrev?: string; // default 'picker__nav--prev' + navNext?: string; // default 'picker__nav--next' + navDisabled?: string; // default 'picker__nav--disabled' + + // Month & year labels + month?: string; // default 'picker__month' + year?: string; // default 'picker__year' + + // Month & year dropdowns + selectMonth?: string; // default 'picker__select--month' + selectYear?: string; // default 'picker__select--year' + + // Table of dates + table?: string; // default 'picker__table' + + // Weekday labels + weekdays?: string; // default 'picker__weekday' + + // Day states + day?: string; // default 'picker__day' + disabled?: string; // default 'picker__day--disabled' + selected?: string // default 'picker__day--selected' + highlighted?: string // default 'picker__day--highlighted' + now?: string; // default 'picker__day--today' + infocus?: string; // default 'picker__day--infocus' + outfocus?: string; // default 'picker__day--outfocus' + + // The picker footer + footer?: string; // default 'picker__footer' + + // Today & clear buttons + buttonClear?: string; // default 'picker__button--clear' + buttonToday?: string; // default 'picker__button--today' + } +} + +interface pickatimeOptions { + // Translations and clear button + clear?: string; // default 'Clear' + + // Formats + format?: string; // default 'h:i A' + formatLabel?: any; + formatSubmit?: string; + 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. + + // 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; + + // Classes + klass?: { + + // The element states + input?: string; // default 'picker__input' + active?: string; // default 'picker__input--active' + + // The root picker and states + picker?: string; // default 'picker picker--time' + opened?: string; // default 'picker--opened' + focused?: string; // default 'picker--focused' + + // The picker holder + holder?: string; // default 'picker__holder' + + // The picker frame, wrapper, and box + frame?: string; // default 'picker__frame' + wrap?: string; // default 'picker__wrap' + box?: string; // default 'picker__box' + + // List of times + list?: string; // default 'picker__list' + listItem?: string; // default 'picker__list-item' + + // Time states + disabled?: string; // default 'picker__list-item--disabled' + selected?: string; // default 'picker__list-item--selected' + highlighted?: string; // default 'picker__list-item--highlighted' + viewset?: string; // default 'picker__list-item--viewset' + now?: string; // default 'picker__list-item--now' + + // Clear button + buttonClear?: string; // default 'picker__button--clear' + } +} + +interface PickerItemObject { + /** The "pick" value used for comparisons. */ + pick: number; +} + +interface DatePickerItemObject extends PickerItemObject { + /** The full year. */ + year: number; + + /** The month with zero-as-index. */ + month: number; + + /** The date of the month. */ + date: number; + + /** The day of the week with zero-as-index. */ + day: number; + + /** The underlying JavaScript Date object. */ + obj: Date; +} + +interface TimePickerItemObject extends PickerItemObject { + /** Hour of the day from 0 to 23. */ + hour: number; + + /** The minutes of the hour from 0 to 59 (based on the interval). */ + mins: number; +} + +interface CallbackObject { + open?: () => void; + close?: () => void; + render?: () => void; + start?: () => void; + stop?: () => void; + set?: () => void; +} + +interface SetThings { + clear?; + select?: any; + highlight?: any; + view?: any; + min?: any; + max?: any; + disable?: any; + enable?: any; +} + +interface TimePickerSetThings extends SetThings { + interval?: any; +} + +interface PickerObject { + /** The picker's relative input element wrapped as a jQuery object. */ + $node: JQuery; + + /** The picker's relative root holder element wrapped as a jQuery object. */ + $root: JQuery; +} + +interface DatePickerObject extends PickerObject { + open(withoutFocus?: boolean): DatePickerObject; + close(withFocus?: boolean): DatePickerObject; + + /** Rebuild the picker. */ + start(): DatePickerObject; + + /** Destroy the picker. */ + stop(): DatePickerObject; + + /** Refresh the picker after adding something to the holder. */ + render(): DatePickerObject; + + /** Clear the value in the picker's input element. */ + clear(): DatePickerObject; + + /** 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'): DatePickerItemObject; + + /** Returns the item object that is visually highlighted. */ + get(thing: 'highlight'): DatePickerItemObject; + + /** Returns the item object that sets the current view. */ + get(thing: 'view'): DatePickerItemObject; + + /** Returns the item object that limits the picker�s lower range. */ + get(thing: 'min'): DatePickerItemObject; + + /** Returns the item object that limits the picker�s upper range. */ + get(thing: 'max'): DatePickerItemObject; + + /** 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): DatePickerObject; + set(things: SetThings): DatePickerObject; + + /** Bind callbacks to get fired off when the relative picker method is called. */ + on(methodName, callback: () => void ): DatePickerObject; + + /** Bind multiple callbacks at once to get fired off when the relative picker method is called. */ + on(callbackObject: CallbackObject): DatePickerObject; + + /** Trigger callbacks that have been queued up using the the on method. */ + trigger(event: string): DatePickerObject; +} + +interface TimePickerObject extends PickerObject { + open(withoutFocus?: boolean): TimePickerObject; + close(withFocus?: boolean): TimePickerObject; + + /** Rebuild the picker. */ + start(): TimePickerObject; + + /** Destroy the picker. */ + stop(): TimePickerObject; + + /** Refresh the picker after adding something to the holder. */ + render(): TimePickerObject; + + /** Clear the value in the picker�s input element. */ + clear(): TimePickerObject; + + /** 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'): TimePickerItemObject; + + /** Returns the item object that is visually highlighted. */ + get(thing: 'highlight'): TimePickerItemObject; + + /** Returns the item object that sets the current view. */ + get(thing: 'view'): TimePickerItemObject; + + /** Returns the item object that limits the picker�s lower range. */ + get(thing: 'min'): TimePickerItemObject; + + /** Returns the item object that limits the picker�s upper range. */ + get(thing: 'max'): TimePickerItemObject; + + /** 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): TimePickerObject; + set(things: TimePickerSetThings): TimePickerObject; + + /** Bind callbacks to get fired off when the relative picker method is called. */ + on(methodName, callback: () => void ): TimePickerObject; + + /** Bind multiple callbacks at once to get fired off when the relative picker method is called. */ + on(callbackObject: CallbackObject): TimePickerObject; + + /** Trigger callbacks that have been queued up using the the on method. */ + trigger(event: string): TimePickerObject; +} + +interface JQuery { + pickadate(options?: pickadateOptions): HTMLInputElement; + pickatime(options?: pickatimeOptions): HTMLInputElement; +} + +interface HTMLInputElement { + pickadate(picker: string): DatePickerObject; + pickatime(picker: string): TimePickerObject; + +} \ No newline at end of file