#### Limitless - Pickers

##### Spectrum - color picker

Color spectrum.js

###### Overview

Spectrum is a jQuery Colorpicker plugin. It is easy to skin and customize the plugin with CSS, and there are a wide range of modes and options to explore. Uses a polyfill for the `input[type=color]` HTML5 control. This mode needs to work without JavaScript enabled - and fallback to an `input[type=text]` like other HTML5 inputs. If you don't want this behavior to happen, but still want to use spectrum elsewhere on the page, you can set `$.fn.spectrum.load = false;` right after loading the script file.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/color/spectrum.js"></script>

Add input element with attributes:

    <!-- Markup example -->
    <input type="text" class="form-control colorpicker-basic" value="#20BF7E">

Call the plugin via JavaScript:

    // Basic initialization
    $(".colorpicker-basic").spectrum({
    	// options
    });

###### Spectrum options and documentation

Full Spectrum documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Spectrum library.

###### Plugin info

Property | Description
--- | ---
File name | spectrum.js
Location | global_assets/js/plugins/pickers/color/
Links | Official plugin website Full documentation Github project page

##### Location picker

Location location.js

###### Overview

This plug-in allows to easily find and select a location on the Google map. Along with a single point selection, it allows to choose an area by providing its center and the radius. All the data can be saved to any HTML input element automatically as well as be processed by Javascript (callback support).

The other feature of the plug-in is automatic address resolver which allows to get address line from the selected latitude and longitude. The plug-in also supports searching by address typed into the bound input element which uses auto-complete feature from Google API to make the search process easier. In this case the marker will be automatically positioned on the map after successful address resolution

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load Google Maps -->
    <script type="text/javascript" src='https://maps.google.com/maps/api/js?key=[...KEY...]&libraries=places'></script>

    <!-- Load plugin -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/location/location.js"></script>

Add element with attributes:

    <!-- Markup example -->
    <div id="locationpicker-default" class="map-container"></div>

Call the plugin via JavaScript:

    // Basic initialization
    $('#locationpicker-default').locationpicker({
        radius: 150,
        scrollwheel: false,
        zoom: 10
    });

###### Plugin options

Options and default values:

    // Options with default values
    {
        location: {latitude: 40.7324319, longitude: -73.82480799999996},
        locationName: "",
        radius: 500,
        zoom: 15,
        scrollwheel: true,
        inputBinding: {
            latitudeInput: null,
            longitudeInput: null,
            radiusInput: null,
            locationNameInput: null
        },
        enableAutocomplete: false,
        enableReverseGeocode: true,
    }

###### Plugin callbacks

Callback | Description
--- | ---
`onchanged(currentLocation, radius, isMarkerDropped)` | Will be fired once location has been changed. Parameter `isMarkerDropped` will be set to `true` in case when location has been set by dropping the marker on map. In case when position was set from test input or using API it will be set to `false`
`onlocationnotfound: function(locationName)` | Will be fired when it is impossible that resolve address from user input to coordinates
`oninitialized: function (component)` | Will be fired after initialization and positioning marker to the initial location

###### Plugin info

Property | Description
--- | ---
File name | location.js
Location | global_assets/js/plugins/pickers/location/
Links | Official plugin website Github project page

##### Address picker

Location /pickers/location/

###### Overview

Address picker built with typeahead autocomplete from twitter. It's not an extension of typeahead plugin itself, but a new data source for twitter typeahead. The `AddressPicker` is a subclass of a `Bloodhound` class. It connects suggestions to Google Map `AutocompleteService`. But it's much more than a simple suggestion engine because it can be linked to a google map to display/edit location.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load Typeahead library -->
    <script type="text/javascript" src="global_assets/js/plugins/forms/inputs/typeahead/typeahead.bundle.min.js"></script>

    <!-- Load Typeahead picker extension -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/location/typeahead_addresspicker.js"></script>

    <!-- Load plugin -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/location/autocomplete_addresspicker.js"></script>

Add element with attributes:

    <!-- Add input field -->
    <input id="address" class="form-control typeahead" type="text" placeholder="Enter an address">

    <!-- Add element -->
    <div id="map" class="map-wrapper"></div>

Instantiate an `AddressPicker` with the google map div element or ID and connect typeahead events:

    // Basic initialization, based on Bloodhound
    var addressPicker = new AddressPicker({
    	map: {
    		id: '#map'
    	}
    });

    // instantiate the typeahead UI
    $('#address').typeahead(null, {
    	displayKey: 'description',
    	source: addressPicker.ttAdapter()
    });

    // Bind some event to update map on autocomplete selection
    $('#address').bind('typeahead:selected', addressPicker.updateMap);
    $('#address').bind('typeahead:cursorchanged', addressPicker.updateMap);

###### Plugin options

When you instantiate a new `AddressPicker` you can pass a list of options new `AddressPicker(options)`. Available options:

Option | Default | Description
--- | --- | ---
`map` | none | Map id and options to link typeahead to a goggle map
`marker` | {draggable: true, visible: false, position: MAP_CENTER} | Marker options display on the map
`autocompleteService` | {types: ['geocode']} | Options passed to `google.maps.places.AutocompleteService#getPlacePredictions`. You can add a lot of options, like get only address for a country, or get only cities etc.
`zoomForLocation` | 16 | Number. Zoom value when an accurate address is selected
`reverseGeocoding` | false | Boolean. Reverse geocoding when marker is dragged on map
`placeDetails` | false | Boolean. If not using with a map, you can skip the getDetails portion to speed up the query

###### Plugin events

Only one event is trigger by AddressPicker object: addresspicker:selected. The event is fired when an address is selected or when the marker is dragged. If reverseGeocoding is activated, a full response is trigger, otherwise only lat/lng.

To simplify google response parsing, we fire an object of type AddressPickerResult with some accessors:

- `lat()`
- `lng()`
- `addressTypes()`
- `addressComponents()`
- `nameForType: (type, shortName = false)`

Listen that event to get values you need and store them in your form. Here is an example:

    // Proxy inputs typeahead events to addressPicker
    addressPicker.bindDefaultTypeaheadEvent($('#address'))

    // Listen for selected places result
    $(addressPicker).on('addresspicker:selected', function (event, result) {
    	$('#your_lat_input').val(result.lat());
    	$('#your_lng_input').val(result.lng());
    	$('#your_city_input').val(result.nameForType('locality'));
    });

###### Plugin info

Property | Description
--- | ---
File name | autocomplete_addresspicker.js, typeahead_addresspicker.js
Location | global_assets/js/plugins/pickers/location/
Links | Official plugin website Github project page

##### Anytime picker

Date/Time anytime.min.js

###### Overview

The Any+Time™ JavaScript Library includes a highly-customizable, jQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a powerful Date/String parse/format utility. Any+Time™ is different from other pickers. More powerful, yes, but more importantly, designed with speed and ease-of-use in mind. And not only can it create a date/time picker with advanced features and options not found in other calendar/clock widgets, it also allows you to format dates and times the way you want them. Or your database wants them. Or, better yet, the way your users want them.

For starters, take a look at these `DATE/TIME ALTERNATIVES`:

- 12-hour or 24-hour clock
- custom date/time format (countless possibilities, including JSON and XML)
- date-only, time-only, or specific fields!
- date/time range limits
- era-selection (BCE/CE, BC/AD, etc.)
- start week on any day (Sunday, Monday, etc.)
- custom base for 2-digit years (1900, 2000, etc.)
- UTC offsets and time zones

It's also `PROGRAMMER-FRIENDLY`:

- easy to implement
- easy AJAX validation
- easy Date/String conversion, including JSON and XML
- create multiple pickers at once
- easy removal
- easy to extend

And let's not forget those `USABILITY FEATURES`:

- single-click value selection
- double-click select-and-dismiss
- WAI-ARIA 1.0 keyboard accessibility
- em-based relative-size

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/anytime.min.js"></script>

Add element with attributes:

    <!-- Add input field -->
    <input type="text" class="form-control" id="anytime-date" value="Sunday, July 30th in the Year 1967 CE">

Call the plugin via JavaScript:

    // Basic initialization
    $("#anytime-date").AnyTime_picker({
        format: "%W, %M %D in the Year %z %E",
        firstDOW: 1
    });

###### Plugin options

When creating a picker with `AnyTime.picker()` or `$.AnyTime_picker()`, the following members may be specified as part of the options argument:

Option | Description
--- | ---

`ajaxOptions`

Options to pass to jQuery's `$.ajax()` method whenever the user dismisses a popup picker or selects a value in an inline picker. The input's `name` (or id) and `value` are passed to the server (appended to `ajaxOptions.data`, if present), and the "success" handler sets the input's value to the `responseText`. Therefore, the text returned by the server must be valid for the input's date/time format, and the server must either echo or correct the value chosen by the user

`askEra` | If `true`, buttons to select the era (BCE/CE) are shown on the year selector popup, even if the format specifier does not include the era. If `false`, buttons to select the era are NOT shown, even if the format specifier includes the era. Normally, era buttons are only shown if the format string specifies the era
`askSecond` | If `false`, buttons for number-of-seconds are not shown on the year selector popup, even if the format specifier includes seconds. Normally, the buttons are shown if the format string specifies seconds
`baseYear` | The `number` to add to two-digit years if the `"%y"` format specifier is used. By default, the MySQL convention that two-digit years are in the range 1970 to 2069 is used. The most common alternatives are 1900 and 2000. When using this option, you should also specify the earliest and latest options to the first and last dates in the century, respectively.
`dayAbbreviations` | An `array` of day abbreviations to replace Sun, Mon, etc. Note: if a different first day-of-week is specified by option `firstDOW`, this array should nonetheless start with the desired abbreviation for Sunday
`dayNames` | An `array` of day names to replace Sunday, Monday, etc. Note: if a different first day-of-week is specified by option `firstDOW`, this array should nonetheless start with the desired name for Sunday
`earliest` | `String` or `Date object` representing the earliest date/time that a user can select. If a `String` is specified, it is expected to match the format specifier. For best results if the field is only used to specify a date, be sure to set the time to 00:00:00
`eraAbbreviations` | An array of era abbreviations to replace BCE and CE. The most common replacements are the obsolete: BC and AD
`firstDOW` | A value from `0` (Sunday) to `6` (Saturday) stating which day should appear at the beginning of the week. The default is `0` (Sunday). The most common substitution is `1` (Monday). Note: if custom arrays are specified for `dayAbbreviations` and `dayNames`, they should nonetheless begin with the desired value for Sunday

`formatUtcOffset`

String specifying the format of the UTC offset choices displayed in the picker. Although all specifiers used by the format option are recognized, only those pertaining to UTC offsets (namely `%#`, `%+`, `%-`, `%:`, `%;` and `%@`) should be used. By default, the picker will extrapolate a format by scanning the format option for appropriate specifiers and their surrounding characters

`hideInput`

If `true`, the `<input>` is "hidden" (the picker appears in its place). This actually sets the border, height, margin, padding and width of the field as small as possible, so it can still get focus. Note: if you try to hide the field using traditional techniques (such as setting `display: none`), the picker will not behave correctly. This option should only be used with `placement: "inline"`; otherwise, a popup will only appear (seemingly from nowhere) if the user tabs to the hidden field

`init` | The initial value for the input field. This can be a `Date` object, a `Number` representing the time (in milliseconds), or a `String` in the correct format. If the field already contains a value, it will be replaced with this value when the picker is initialized
`labelDayOfMonth` | HTML to replace the Day of Month label
`labelDismiss` | HTML to replace the dismiss popup button's X label
`labelHour` | HTML to replace the Hour label
`labelMinute` | HTML to replace the Minute label
`labelMonth` | HTML to replace the Month label
`labelSecond` | HTML to replace the Second label
`labelTimeZone` | HTML to replace the Time Zone label
`labelTitle` | HTML for the title of the picker. If not specified, the picker automatically selects a title based on the format specifier fields
`labelYear` | HTML to replace the Year label
`latest` | `String` or `Date` object representing the latest date/time that a user can select. If a `String` is specified, it is expected to match the format specifier. For best results if the field is only used to specify a date, be sure to set the time to 23:59:59

`monthAbbreviations`

An `array` of month abbreviations to replace Jan, Feb, etc. Note: do not use an HTML entity reference (such as `ä`) in a month name or abbreviation; embed the actual character (such as `ä`) instead. Be careful to save your source files under the correct encoding, or the character may not display correctly in all browsers; this often happens when a character code from UTF-8 is saved with ISO-8859-1 encoding (or vice-versa)

`monthNames` | An `array` of month names to replace January, February, etc

`placement`

One of the following strings:

- popup - the picker appears above its input when the input receives focus, and disappears when it is dismissed. This is the default behavior
- inline - the picker follows the `<input>` and remains visible at all times. When choosing this placement, you might prefer to hide the input field using the hideInput option (the correct value will still be submitted with the form)

###### Format options

`format` option - string specifying the date/time format. The following format specifiers are recognized:

Option | Description
--- | ---
`%a` | Abbreviated weekday name (Sun...Sat)
`%B` | Abbreviation for Before Common Era (if year<1)*
`%b` | Abbreviated month name (Jan...Dec)
`%C` | Abbreviation for Common Era (if year&rt;=1)*
`%c` | Month, numeric (1..12)
`%D` | Day of the month with English suffix (1st, 2nd, ...)
`%d` | Day of the month, numeric (00...31)
`%E` | Era abbreviation*
`%e` | Day of the month, numeric (0...31)
`%H` | Hour (00...23)
`%h` | Hour (01...12)
`%I` | Hour (01...12)
`%i` | Minutes, numeric (00...59)
`%k` | Hour (0...23)
`%l` | Hour (1...12)
`%M` | Month name (January...December)
`%m` | Month, numeric (01...12)
`%p` | AM or PM
`%r` | Time, 12-hour (hh:mm:ss followed by AM or PM)
`%S` | Seconds (00...59)
`%s` | Seconds (00...59)
`%T` | Time, 24-hour (hh:mm:ss)
`%W` | Weekday name (Sunday...Saturday)
`%w` | Day of the week (0=Sunday...6=Saturday)
`%Y` | Year, numeric, four digits (possibly signed)
`%y` | Year, numeric, two digits (possibly signed)
`%Z` | Year, numeric, four digits (no sign)*
`%z` | Year, numeric, variable length (no sign)*
`%#` | Signed UTC offset in minutes*
`%+` | Signed UTC offset in `%h%i` format*
`%-` | Signed UTC offset in `%l%i` format*
`%:` | Signed UTC offset in `%h:%i` format*
`%;` | Signed UTC offset in `%l:%i` format*
`%@` | UTC offset time zone label*
`%%` | A literal `%` character

###### Plugin info

Property | Description
--- | ---
File name | anytime.min.js
Location | global_assets/js/plugins/pickers/
Links | Official plugin website

##### Date range picker

Date/Time daterangepicker.js

###### Overview

This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates. Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, optional time picker (for e.g. making appointments or reservations), and styles that match the default Bootstrap 3 theme

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load Moment.js extension -->
    <script type="text/javascript" src="global_assets/js/plugins/ui/moment/moment.min.js"></script>

    <!-- Load plugin -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/daterangepicker.js"></script>

Add element with attributes:

    <!-- Add input field -->
    <input type="text" class="form-control daterange-basic" value="01/01/2015 - 01/31/2015">

Call the plugin via JavaScript:

    // Basic initialization
    $('.daterange-basic').daterangepicker({
        applyClass: 'bg-slate-600',
        cancelClass: 'btn-default'
    });

###### Plugin options

Option | Type | Description
--- | --- | ---
`startDate` | Date object, moment object or string | The start of the initially selected date range
`endDate` | Date object, moment object or string | The end of the initially selected date range
`minDate` | Date object, moment object or string | The earliest date a user may select
`maxDate` | Date object, moment object or string | The latest date a user may select
`dateLimit` | object | The maximum span between the selected start and end dates. Can have any property you can add to a moment object (i.e. days, months)

`timeZone`

string or number

The timezone that will be used to display the `startDate` and `endDate` in the calendar. This may be a string such as "08:00" or an offset in minutes from Greenwich Mean Time. Uses Moment.js #utcOffset. If the `timeZone` option is not set, the calendar will use the time zone set on the `startDate` that has been passed in through the options, if it has one. Defaults to the local time zone

`showDropdowns` | boolean | Show year and month select boxes above calendars to jump to a specific month and year
`showWeekNumbers` | boolean | Show week numbers at the start of each week on the calendars
`timePicker` | boolean | Allow selection of dates with times, not just dates
`timePickerIncrement` | number | Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30)
`timePicker24Hour` | boolean | Use 24-hour instead of 12-hour times, removing the AM/PM selection
`timePickerSeconds` | boolean | Show seconds in the `timePicker`
`ranges` | object | Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range
`opens` | string | Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to. Available `left`, `right` and `center`
`drops` | string | Whether the picker appears below (default) or above the HTML element it's attached to. Available `up` and `down`
`buttonClasses` | array | CSS class names that will be added to all buttons in the picker
`applyClass` | string | CSS class string that will be added to the apply button
`cancelClass` | string | CSS class string that will be added to the cancel button
`locale` | object | Allows you to provide localized strings for buttons and labels, customize the date display format, and change the first day of week for the calendars
`singleDatePicker` | boolean | Show only a single calendar to choose one date, instead of a range picker with two calendars; the `start` and `end` dates provided to your callback will be the same single date chosen
`autoApply` | boolean | Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
`linkedCalendars` | boolean | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year
`parentEl` | string | jQuery selector of the parent element that the date range picker will be added to, if not provided this will be `'body'`
`isInvalidDate` | function | A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not
`autoUpdateInput` | boolean | Indicates whether the date range picker should automatically update the value of an `<input>` element it's attached to at initialization and when the selected dates change

###### Plugin methods

You can programmatically update the `startDate` and `endDate` in the picker using the `setStartDate` and `setEndDate` methods. You can access the Date Range Picker object and its functions and properties through data properties of the element you attached it to.

Example usage:

    // Create a new date range picker
    $('#daterange').daterangepicker({ startDate: '2014-03-05', endDate: '2014-03-06' });

    // Change the selected date range of that picker
    $('#daterange').data('daterangepicker').setStartDate('2014-03-01');
    $('#daterange').data('daterangepicker').setEndDate('2014-03-31');

Available methods

Option | Type | Description
--- | --- | ---
`setStartDate()` | Date/moment/string | Sets the date range picker's currently selected start date to the provided date
`setEndDate()` | Date/moment/string | Sets the date range picker's currently selected end date to the provided date

###### Plugin events

Several events are triggered on the element you attach the picker to, which you can listen for.

Example usage:

    // Event example
    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
    	console.log(picker.startDate.format('YYYY-MM-DD'));
    	console.log(picker.endDate.format('YYYY-MM-DD'));
    });

Available events

Event | Description
--- | ---
`show.daterangepicker` | Triggered when the picker is shown
`hide.daterangepicker` | Triggered when the picker is hidden
`showCalendar.daterangepicker` | Triggered when the calendar(s) are shown
`hideCalendar.daterangepicker` | Triggered when the calendar(s) are hidden
`apply.daterangepicker` | Triggered when the apply button is clicked, or when a predefined range is clicked
`cancel.daterangepicker` | Triggered when the cancel button is clicked

###### Plugin info

Property | Description
--- | ---
File name | daterangepicker.js
Location | global_assets/js/plugins/pickers/
Links | Official plugin website Github project page

##### Pick-a-date pickers

Date/Time /pickers/pickadate/

###### Overview

The mobile-friendly, responsive, and lightweight jQuery date & time input picker. There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker.

- Supports jQuery 1.7 and up
- Is ARIA-enabled to be WCAG 2.0 compliant
- Loads a tiny JS and CSS footprint
- Comes with translations for over 40 languages
- Has touch & keyboard friendliness
- Follows BEM style class naming
- Utilizes LESS based stylesheets

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script type="text/javascript" src="global_assets/js/main/jquery.min.js"></script>

    <!-- Load base -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/pickadate/picker.js"></script>

    <!-- Load date picker -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>

    <!-- Load time picker -->
    <script type="text/javascript" src="global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>

Add element with attributes:

    <!-- Add input field -->
    <input type="text" class="form-control pickadate" placeholder="Try me">

Call the plugin via JavaScript:

    // Date picker
    $('.pickadate').pickadate({
    	// options
    });

    // Time picker
    $('.pickatime').pickatime({
    	// options
    });

###### Date picker options

These are the default settings of a date picker:

    // Strings and translations
    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: undefined,
    showWeekdaysFull: undefined,

    // Buttons
    today: 'Today',
    clear: 'Clear',
    close: 'Close',

    // Accessibility labels
    labelMonthNext: 'Next month',
    labelMonthPrev: 'Previous month',
    labelMonthSelect: 'Select a month',
    labelYearSelect: 'Select a year',

    // Formats
    format: 'd mmmm, yyyy',
    formatSubmit: undefined,
    hiddenPrefix: undefined,
    hiddenSuffix: '_submit',
    hiddenName: undefined,

    // Editable input
    editable: undefined,

    // Dropdown selectors
    selectYears: undefined,
    selectMonths: undefined,

    // First day of the week
    firstDay: undefined,

    // Date limits
    min: undefined,
    max: undefined,

    // Disable dates
    disable: undefined,

    // Root picker container
    container: undefined,

    // Hidden input container
    containerHidden: undefined,

    // Close on a user action
    closeOnSelect: true,
    closeOnClear: true,

    // Events
    onStart: undefined,
    onRender: undefined,
    onOpen: undefined,
    onClose: undefined,
    onSet: undefined,
    onStop: undefined,

    // Classes
    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'
    }

###### Time picker options

These are the default settings of a time picker:

    // Translations and clear button
    clear: 'Clear',

    // Formats
    format: 'h:i A',
    formatLabel: undefined,
    formatSubmit: undefined,
    hiddenPrefix: undefined,
    hiddenSuffix: '_submit',

    // Editable input
    editable: undefined,

    // Time intervals
    interval: 30,

    // Time limits
    min: undefined,
    max: undefined,

    // Root picker container
    container: undefined,

    // Hidden input container
    containerHidden: undefined,

    // Close on a user action
    closeOnSelect: true,
    closeOnClear: true,

    // Events
    onStart: undefined,
    onRender: undefined,
    onOpen: undefined,
    onClose: undefined,
    onSet: undefined,
    onStop: undefined,

    // Classes
    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',
    }

###### Plugin info

Property | Description
--- | ---
File name | picker.js, picker.date.js, picker.time.js, legacy.js
Location | global_assets/js/plugins/pickers/pickadate/
Links | Official plugin website Date picker docs Time picker docs API documentation Github project page