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.
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 ; |
24 |
&n
|