Merge pull request #636 from theodorejb/pickadate

Added definitions and tests for pickadate.js

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/))

jquery.pickadate/jquery.pickadate-tests.ts

@@ -0,0 +1,400 @@
+///<reference path="jquery.pickadate.d.ts" />
+
+/*
+* 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: '<b>h</b>:i <!i>a</!i>',
+    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 <sm!all>' + (hours ? Math.abs(hours).toString() : '') + label + '</sm!all>'
+    }
+});
+
+$('.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;

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 <https://github.com/theodorejb/>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///<reference path="../jquery/jquery.d.ts" />
+
+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;
+
+}