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.
Bootstrap DateTime Picker
Date/time picker widget based on twitter bootstrap.
1. Initialize the plugin by referencing the necessary files:
<script src="moment-with-locales.min.js"></script>
<script src="bootstrap-datetimepicker.min.js"></script>
2. Call the datetimepicker-function after the page has loaded
$("#datetime").datetimepicker();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://eonasdan.github.io/bootstrap-datetimepicker/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/pickers-date-&-time-picker.html#bs-datetime |
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 | http://demo.pixinvent.com/robust-admin/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 | http://demo.pixinvent.com/robust-admin/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 | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/pickers-date-&-time-picker.html#bs-daterange |
Add color picker to field or to any other element. It can be used as a component, alpha picker and more.
Bootstrap Color Picker
Fancy and customizable colorpicker plugin for Twitter Bootstrap.
1. Initialize the plugin by referencing the necessary files:
<script src="bootstrap-colorpicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-colorpicker.min.css">
2. Call the colorpicker-function after the page has loaded
$("#colorpicker").colorpicker();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://itsjavi.com/bootstrap-colorpicker/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/pickers-color-picker.html#bs-color |
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 | http://demo.pixinvent.com/robust-admin/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 | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/pickers-color-picker.html#spectrum-color |