Super Tiny jQuery HTML5 Date Picker Plugin - Free Download Super Tiny jQuery & HTML5 Date Picker Plugin - DatePicker

Free Download Super Tiny jQuery & HTML5 Date Picker Plugin – DatePicker

Posted on

This time I will share jQuery Plugin and tutorial about Super Tiny jQuery & HTML5 Date Picker Plugin – DatePicker, hope it will help you in programming stack.

Super Tiny jQuery HTML5 Date Picker Plugin - Free Download Super Tiny jQuery & HTML5 Date Picker Plugin - DatePicker
File Size: 18.3 KB
Views Total: 28744
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A super lightweight and simple jQuery date picker plugin to display a clean calendar from which you can select a date for your app.

Features:

  • Popup and inline modes.
  • Dark and light themes.
  • Decade, year or month views.
  • Custom templates.
  • Custom date format.
  • Localization.

How to use it:

1. Include the jQuery datepicker plugin’s CSS in the head of your document.

1 <link href="jquery.datepicker2.css" rel="stylesheet">

2. Include the jQuery datepicker plugin’s script at the end of the document.

1 <script src="/path/to/jquery.min.js"></script>
2 <script src="jquery.datepicker2.js"></script>

3. Create a text input with data-select="datepicker" attribute to enable the date picker when clicked on.

1 <input type="text" name="date" id="date" data-select="datepicker">

4. Customize the date picker by overriding the following settings.

01 $.datePicker.defaults = {
02  
03   container: 'body',
04   mode: '<a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a>', // or inline
05   select: 'single', // single or multiple
06   theme: 'theme-light', // theme-light or theme-dark
07   show: 'month', // decade, year or month
08   doubleSize: false,
09   restrictDates: false, // past, future or custom
10   disable<a href="https://www.jqueryscript.net/animation/">Animation</a>s: false,
11   strings: {
12     months: [
13       'January',
14       'February',
15       'March',
16       'April',
17       'May',
18       'June',
19       'July',
20       'August',
21       'September',
22       'October',
23       'November',
24       'December'
25     ],
26     days: [
27       'Sunday',
28       'Monday',
29       'Tuesday',
30       'Wednesday',
31       'Thursday',
32       'Friday',
33       'Saturday'
34     ]
35   },
36   views: {
37     decade: {
38       show: null,
39       selected: [],
40       disabled: [],
41       forbidden: [],
42       enabled: [],
43       marked: []
44     },
45     year: {
46       show: null,
47       selected: [],
48       disabled: [],
49       forbidden: [],
50       enabled: [],
51       marked: []
52     },
53     month: {
54       show: null,
55       selected: [],
56       disabled: [],
57       forbidden: [],
58       enabled: [],
59       marked: [],
60       firstDayOfWeek: 0
61     }
62   },
63   templates: {
64     widget: '<div class="jquery-datepicker">',
65     header: '<div class="box-row row-header"><div class="header-title">{title}</div><div class="header-actions"><div class="header-action action-down"></div><div class="header-action action-up"></div></div></div>'
66   },
67   dateFormat: function(date) {
68     return (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
69   },
70   dateParse: function(string) {
71     return $.datePicker.api.date(string);
72   }
73 }

6. Callback functions.

01 $.datePicker.defaults = {
02  
03   callbacks: {
04     onCreate: function(calendar) {
05       // Do nothing
06     },
07     onShow: function(calendar) {
08       // Do nothing
09     },
10     onViewDecade: function(calendar, date) {
11       return true;
12     },
13     onViewYear: function(calendar, date) {
14       return true;
15     },
16     onViewMonth: function(calendar, date) {
17       return true;
18     },
19     onChangeDecade: function(calendar, date, direction) {
20       return true;
21     },
22     onChangeYear: function(calendar, date, direction) {
23       return true;