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.

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 https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/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 https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/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/stack-responsive-bootstrap-4-admin-template/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/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-menu-template/pickers-date-&-time-picker.html#bs-daterange