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

<!-- 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>

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

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

Spectrum options and documentation

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

<!-- 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>

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

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

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

<!-- 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 input field -->
<input id="address" class="form-control typeahead" type="text" placeholder="Enter an address">

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

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

Plugin events

// 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'));
});

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.

Usage

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

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

Format options

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

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

<!-- 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 input field -->
<input type="text" class="form-control daterange-basic" value="01/01/2015 - 01/31/2015"> 

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

Plugin options

Plugin methods

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

Plugin events

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

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

<!-- 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 input field -->
<input type="text" class="form-control pickadate" placeholder="Try me">

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