Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Overview Official Website

flatpickr is a lightweight and powerful datetime picker.

Usage

Flatpickr's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.

Basic#
                                                                 
                                                                      <input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('basic-datepicker').flatpickr();
                                                                 
                                                            
DateTime#
                                                                 
                                                                      <input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('datetime-datepicker').flatpickr({
                                                                           enableTime: true,
                                                                           dateFormat: "Y-m-d H:i"
                                                                      });
                                                                 
                                                            
Human-friendly Dates#
                                                                 
                                                                      <input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('humanfd-datepicker').flatpickr({
                                                                           altInput: true,
                                                                           altFormat: "F j, Y",
                                                                           dateFormat: "Y-m-d",
                                                                      });
                                                                 
                                                            
MinDate and MaxDate#
                                                                 
                                                                      <input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
                                                                 
                                                            
                                                                  
                                                                      document.getElementById('minmax-datepicker').flatpickr({
                                                                           minDate: "2020-01",
                                                                           maxDate: "2020-03"
                                                                      });
                                                                 
                                                            
Disabling dates#
                                                                 
                                                                      <input type="text" id="disable-datepicker" class="form-control" placeholder="disable datepicker">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('disable-datepicker').flatpickr({
                                                                           onReady: function () {
                                                                               this.jumpToDate("2025-01")
                                                                           },
                                                                           disable: ["2025-01-10", "2025-01-21", "2025-01-30", new Date(2025, 4, 9) ],
                                                                           dateFormat: "Y-m-d",
                                                                      });
                                                                 
                                                            
Selecting multiple dates#
                                                                 
                                                                      <input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('multiple-datepicker').flatpickr({
                                                                           mode: "multiple",
                                                                           dateFormat: "Y-m-d"
                                                                      });
                                                                 
                                                            
Selecting multiple dates - Conjunction#
                                                                 
                                                                      <input type="text" id="conjunction-datepicker" class="form-control" placeholder="2018-10-10 :: 2018-10-11">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('conjunction-datepicker').flatpickr({
                                                                           mode: "multiple",
                                                                           dateFormat: "Y-m-d",
                                                                           conjunction: " :: "
                                                                      });
                                                                 
                                                            
Range Calendar#
                                                                 
                                                                      <input type="text" id="range-datepicker" class="form-control" placeholder="2018-10-03 to 2018-10-10">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('range-datepicker').flatpickr({
                                                                           mode: "range"
                                                                      });
                                                                 
                                                            
Inline Calendar#
                                                                 
                                                                      <input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('inline-datepicker').flatpickr({
                                                                           inline: true
                                                                      });
                                                                 
                                                            
Basic Timepicker#
                                                                 
                                                                      <input type="text" id="basic-timepicker" class="form-control" placeholder="Basic timepicker">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('basic-timepicker').flatpickr({
                                                                           enableTime: true,
                                                                           noCalendar: true,
                                                                           dateFormat: "H:i"
                                                                      });
                                                                 
                                                            
24-hour Time Picker#
                                                                 
                                                                      <input type="text" id="24hours-timepicker" class="form-control" placeholder="16:21">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('24hours-timepicker').flatpickr({
                                                                           enableTime: true,
                                                                           noCalendar: true,
                                                                           dateFormat: "H:i",
                                                                           time_24hr: true
                                                                      });
                                                                 
                                                            
Time Picker w/ Limits#
                                                                 
                                                                      <input type="text" id="minmax-timepicker" class="form-control" placeholder="Limits">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('minmax-timepicker').flatpickr({
                                                                           enableTime: true,
                                                                           noCalendar: true,
                                                                           dateFormat: "H:i",
                                                                           minDate: "16:00",
                                                                           maxDate: "22:30",
                                                                      });
                                                                 
                                                            
Preloading Time#
                                                                 
                                                                      <input type="text" id="preloading-timepicker" class="form-control" placeholder="Pick a time">
                                                                 
                                                            
                                                                 
                                                                      document.getElementById('preloading-timepicker').flatpickr({
                                                                           enableTime: true,
                                                                           noCalendar: true,
                                                                           dateFormat: "H:i",
                                                                           defaultDate: "01:45"
                                                                      });
                                                                 
                                                            
© Larkon. Crafted by Techzaa