This time I will share jQuery Plugin and tutorial about Combo Box Date & Time Picker Plugin With jQuery – Combodate, hope it will help you in programming stack.
| File Size: | 7.63 KB |
|---|---|
| Views Total: | 15390 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Combodate is a jQuery and Moment.js based date & time picker plugin which lets you select date and time using combo dropdown boxes.
How to use it:
1. Load the needed JavaScript libraries (jQuery and Moment.js) in your html page.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/moment.min.js"></script> |
2. Download and load the JavaScript file combodate.js after jQuery library.
1 |
<script src="src/combodate.js"></script> |
3. Call the function to convert a specified input field into a datetime picker with default options.
1 |
$('input').combodate(); |
4. Available settings to customize the date & time picker.
01 |
$('input').combodate({ |
02 |
|
03 |
// date time format |
04 |
format: 'DD-MM-YYYY HH:mm', |
05 |
06 |
// default template |
07 |
template: 'D / MMM / YYYY H : mm', |
08 |
09 |
//initial value, can be new Date() |
10 |
value: null, |
11 |
12 |
// min year |
13 |
minYear: 1970, |
14 |
15 |
// max year |
16 |
maxYear: 2015, |
17 |
18 |
// years order. |
19 |
yearDescending: true, |
20 |
21 |
// step of values in minutes dropdown. |
22 |
minuteStep: 5, |
23 |
24 |
// step of values in seconds dropdown. |
25 |
secondStep: 1, |
26 |
27 |
//'name', 'empty', 'none' |
28 |
firstItem: 'empty', |
29 |
30 |
// CSS class applied if date is incorrect |
31 |
errorClass: null, |
32 |
33 |
// CSS class applied to each dropdow |
34 |
customClass: '', |
35 |
36 |
// whether to round minutes and seconds if step > 1 |
37 |
roundTime: true, |
38 |
39 |
// whether days in combo depend on selected month: 31, 30, 28 |
40 |
smartDays: false |
41 |
42 |
}); |
5. You can also pass the options via HTML5 data attributes on the input fields like this:
1 |
<input type="text" id="date" |
2 |
data-format="DD-MM-YYYY" |
3 |
data-template="D MMM YYYY" |
4 |
name="date" value="09-01-2013" |
5 |
> |
6. API methods.
1 |
// Returns current value. |
2 |
// If format is omitted, options.format is used. |
3 |
// If format is null, returned value is Momentjs object. |
4 |
$(element).combodate('getValue', format) |
5 |
6 |
// Sets new value. |
7 |
// Value can be javascript Date() object or string in options.format. |
8 |
$(element).combodate('setValue', value) |
This awesome jQuery plugin is developed by vitalets. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
