## Pickers Documetation

#### Date Time Picker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

#### Pick-A-Date Picker

Pickadate.js is a mobile-friendly, responsive, and lightweight jQuery date picker.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="picker.js"></script>
                        <script src="picker.date.js"></script>
                        <script src="legacy.js"></script>
                        <link rel="stylesheet" type="text/css" href="pickadate.css">

###### 2. Call the pick-a-date-function after the page has loaded

                        $("#pickadate").pickadate();

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | http://amsul.ca/pickadate.js/
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/pickers-date-&-time-picker.html#pickadate

#### Pick-A-Time Picker

Pickatime.js is a mobile-friendly, responsive, and lightweight jQuery time picker.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="picker.js"></script>
                        <script src="picker.time.js"></script>
                        <script src="legacy.js"></script>
                        <link rel="stylesheet" type="text/css" href="pickadate.css">

###### 2. Call the pick-a-time-function after the page has loaded

                        $("#pickatime").pickatime();

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | http://amsul.ca/pickadate.js/
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/pickers-date-&-time-picker.html#pickatime

#### Bootstrap DateRange Picker

A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="daterangepicker.js"></script>

###### 2. Call the pick-a-time-function after the page has loaded

                        $("#daterange").daterangepicker();

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | http://www.daterangepicker.com/
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/pickers-date-&-time-picker.html#bs-daterange

#### Color Picker

Add color picker to field or to any other element. It can be used as a component, alpha picker and more.

#### jQuery MiniColors

A project by A Beautiful Site, originally developed for Surreal CMS.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="jquery.minicolors.min.js"></script>
                        <link rel="stylesheet" type="text/css" href="jquery.minicolors.css">

###### 2. Call the minicolors-function after the page has loaded

                        $("#minicolors").minicolors();

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | http://labs.abeautifulsite.net/jquery-minicolors/
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/pickers-color-picker.html#jq-minicolors

#### Spectrum Color Picker

This is No Hassle jQuery Colorpicker.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="spectrum.js"></script>
                        <link rel="stylesheet" type="text/css" href="spectrum.css">

###### 2. Call the spectrum-function after the page has loaded

                        $("#spectrum").spectrum();

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | http://bgrins.github.io/spectrum/
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/pickers-color-picker.html#spectrum-color