Merge pull request #4152 from theodorejb/consolidate-pickadate-definitions

Consolidate pickadate definitions
This commit is contained in:
Masahiro Wakame committed 2015-05-08 21:14:13 +09:00
commit 08bf6c3f8b
6 files changed
+1227 -1380

No files matched your search

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