Lightweight jQuery Date Input Picker - Free Download Lightweight jQuery Date Input Picker - pickadate

Free Download Lightweight jQuery Date Input Picker – pickadate

By Posted on

This time I will share jQuery Plugin and tutorial about Lightweight jQuery Date Input Picker – pickadate, hope it will help you in programming stack.

Lightweight jQuery Date Input Picker - Free Download Lightweight jQuery Date Input Picker - pickadate
File Size: 165 KB
Views Total: 25929
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

pickadate is a lightweight, fully responsive, accessible, and mobile-compatible date & time picker plugin for the web.

This is the #1 jQuery date picker plugin around the web.

Key Features:

  • Mobile friendly. Supports both desktop and touch devices.
  • WCAG compliant.
  • Supports more than 40 languages.
  • RTL supported as well.
  • Tons of customization options.
  • Powerful API.

How to use it :

1. Include a Pickadate theme of your choice on the page.

view source
01 <!-- Default Theme (Core) -->
02 <link rel="stylesheet" href="lib/themes/pickadate.default.css">
03 <!-- Default Theme (Date Picker) -->
04 <link rel="stylesheet" href="lib/themes/default.date.css">
05 <!-- Default Theme (Time Picker If Needed)-->
06 <link rel="stylesheet" href="lib/themes/default.time.css">
07  
08 <!-- Classic Theme (Core) -->
09 <link rel="stylesheet" href="lib/themes/pickadate.classic.css">
10 <!-- Classic Theme (Date Picker) -->
11 <link rel="stylesheet" href="lib/themes/classic.date.css">
12 <!-- Classic Theme (Time Picker If Needed)-->
13 <link rel="stylesheet" href="lib/themes/classic.time.css">
14  
15 <!-- For RTL Layout -->
16 <link rel="stylesheet" href="lib/themes/rtl.css">

2. Create an input field for the date & time picker.

view source
1 <input id="exampleDate" class="datepicker" name="date" type="text" value="14 August, 2014" data-value="2014-08-08" />
2 <input id="exampleTime" class="timepicker" type="time" name="time" valuee="2:30 AM" data-value="0:00" />

3. Include jQuery library and the pickadate.js plugin’s files on your web page.

view source
01 <!-- jQuery -->
02 <script src="/path/to/cdn/jquery.min.js"></script>
03 <!-- Core -->
04 <script src="/path/to/lib/picker.js"></script>
05 <!-- Date Picker -->
06 <script src="/path/to/lib/picker.date.js"></script>
07 <!-- Time Picker -->
08 <script src="/path/to/lib/picker.time.js"></script>
09 <!-- Language -->
10 <script src="/path/to/lib/translations/fr_FR.js"></script>
11 <!-- Required For Legacy Browsers (IE 8-) -->
12 <script src="/path/to/lib/legacy.js"></script>

4. Call the function on the input filed and one.

view source
1 // date picker
2 $('.datepicker').pickadate();
3  
4 // time picker
5 $('.timepicker').pickatime();

5. Possible options for the date picker.

view source
01 $('.datepicker').pickadate({
02   // The title label to use for the month nav buttons
03   labelMonthNext: 'Next month',
04   labelMonthPrev: 'Previous month',
05  
06   // The title label to use for the dropdown selectors
07   labelMonthSelect: 'Select a month',
08   labelYearSelect: 'Select a year',
09  
10   // Months and weekdays
11   monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
12   monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
13   weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
14   weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
15  
16   // Today and clear
17   today: 'Today',
18   clear: 'Clear',
19   close: 'Close',
20  
21   // Picker close behavior
22   closeOnSelect: true,
23   closeOnClear: true,
24  
25   // Update input value on select/clear
26   updateInput: true,
27  
28   // The format to show on the input element
29   format: 'd mmmm, yyyy',
30  
31   // Classes
32   klass: {
33  
34     table: prefix + 'table',
35  
36     header: prefix + 'header',
37  
38     navPrev: prefix + 'nav--prev',
39     navNext: prefix + 'nav--next',
40     navDisabled: prefix + 'nav--disabled',
41  
42     month: prefix + 'month',
43     year: prefix + 'year',
44  
45     selectMonth: prefix + 'select--month',
46     selectYear: prefix + 'select--year',
47  
48     weekdays: prefix + 'weekday',
49  
50     day: prefix + 'day',
51     disabled: prefix + 'day--disabled',
52     selected: prefix + 'day--selected',
53

Share this:

Related posts: