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

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