Date paginator
Date datepaginator.min.js
Overview

A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. Dates are selectable, scrollable and with the optional calendar select option thanks to eternicode's bootstrap-datepicker, you can easily jump to any calendar date.

Usage

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

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

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

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/pagination/datepaginator.min.js"></script>

Add element. Paginator will be injected as html into this div:

<!-- Markup example -->
<div id="date-paginator"></div>

Call the plugin via JavaScript:

// Basic initialization
$('#date-paginator').datepaginator({
	selectedDate: '2013-01-01',
	selectedDateFormat: 'YYYY-MM-DD',
    itemWidth: 70,
    navItemWidth: 28
});
Plugin options

Options explanation and default values:

Option Default Description
endDate End of time String. Sets the latest date that may be selected, all later dates will be disabled
endDateFormat 'YYYY-MM-DD' String. Sets the date format used when parsing string representations of endDate
highlightSelectedDate true Boolean. Whether or not to distinguish visually the selected date
highlightToday true Boolean. Whether or not to distinguish visually today's date
hint 'dddd, Do MMMM YYYY' String. Format used for on hover hint. String tokens are parsed against a given date
injectStyle true Boolean. By default the required styles are injected into the DOM automatically and no external css reference is required. In the event that you want to override and customize the default style, set injectStyle to false. Please note - where multiple paginators are applied to the same page, all must be set to injectStyle false otherwise the DOM injected style takes precedence
itemWidth 35 Integer. Minimum width specified in pixels for an item
navItemWidth 20 Integer. Minimum width specified in pixels for the nav items e.g. left and right arrows
offDays 'Sat,Sun' String (csv). Sets days of the week to be considered off days, visually greyed out
offDaysFormat 'ddd' String. Sets the format used when evaluating offDays. For example, 'ddd' formats as a 3 letter abbreviation representing the day of the week, therefore Saturday becomes 'Sat'
selectedDate moment(), equivalent to new Date() String or Moment. Sets the initial selected date, provided as either a Moment.js moment object or String
selectedDateFormat 'YYYY-MM-DD' String. Sets the date format used throughout the components lifecycle when parsing the selected date object
selectedItemWidth 120 Integer. Minimum width specified in pixels for the selected item
showCalendar true Boolean. Whether or not to display the clickable calendar icon visible on selected date. By setting to false you are effectively removing the calendar date select functionality from the user
showOffDays true Boolean. Whether or not to display off days
showStartOfWeek true Boolean. Whether or not to display the start of week divider
size 'normal' String. Sets the height of the paginator component. Accepts small, normal, large
startDate Beginning of time String or Moment. Sets the earliest date that may be selected, all earlier dates will be disabled
startDateFormat 'YYYY-MM-DD' String. Sets the date format used when parsing string representations of startDate
startOfWeek 'Mon' String. Sets for display purposes the start of the week, visually illustrated by a thicker dividing line betweeen dates
startOfWeekFormat 'ddd' String. Sets the format used when evaluating startOfWeek. For example, 'ddd' formats as a 3 letter abbreviation representing the day of the week, therefore Saturday becomes 'Sat'
squareEdges false Boolean. Toggles the border radius between Bootstrap's default rounded edges border-radius: 4px and overridden square edges border-radius: 0px
text 'ddd<br/>Do' String. Format used for item text i.e. date format. String tokens are parsed against a given date
textSelected 'dddd<br/>Do, MMMM YYYY' String. Format used for the selected items text. String tokens are parsed against a given date
width 0 (auto) Integer. By default the paginator will automatically fill the entire width of it's container. However, if you require more control over the component you can specify any given width in pixels e.g. width: 400
Plugin methods
Method Example Description
setSelectedDate .datepaginator('setSelectedDate', '2013-10-05'); Sets the selected date, triggering a refresh to reflect the new state. If called without passing a format argument, selectedDateFormat will be used
remove .datepaginator('remove'); Removes the date paginator component. Removing attached events, internal attached objects, and added HTML elements
Plugin info
Property Description
File name datepaginator.min.js
Location assets/js/plugins/pagination/
Updates 0
Links

Official plugin website

Github project page
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="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="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 assets/js/plugins/pickers/color/
Updates 0
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="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Google Maps -->
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>

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

Add element with attributes:

<!-- Markup example -->
<div id="locationpicker-default" class="map-wrapper"></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 datepaginator.min.js
Location assets/js/plugins/pickers/location/
Updates 0
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="assets/js/core/libraries/jquery.min.js"></script>

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

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

<!-- Load plugin -->
<script type="text/javascript" src="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 assets/js/plugins/pickers/location/
Updates 0
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="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="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 assets/js/plugins/pickers/
Updates 0
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="assets/js/core/libraries/jquery.min.js"></script>

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

<!-- Load plugin -->
<script type="text/javascript" src="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 assets/js/plugins/pickers/
Updates 0
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="assets/js/core/libraries/jquery.min.js"></script>

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

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

<!-- Load time picker -->
<script type="text/javascript" src="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 assets/js/plugins/pickers/pickadate/
Updates 0
Links

Official plugin website

Date picker docs

Time picker docs

API documentation

Github project page