Zebra_DatePicker Demos
调用方法：
head中加入：
<link rel="stylesheet" href="public/css/zebra_datepicker.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="public/javascript/zebra_datepicker.src.js"></script>
1.A date picker with defaults settings.
|
1
|
$.Zebra_DatePicker('#datepicker-example1'); |
2.A “future-only” date picker: dates can be selected only from the future, starting one day in the future.
|
1
2
3
4
|
$.Zebra_DatePicker('#datepicker-example2', { direction: 1 // boolean true would've made the date picker future only // but starting from today, rather than tomorrow }); |
3. A “future-only” date picker where dates can be selected only from the future, starting today. Also, Saturday and Sundays are always disabled.
|
1
2
3
4
5
|
$.Zebra_DatePicker('#datepicker-example3', { direction: true, disabled_dates: ['* * * 0,6'] // all days, all monts, all years as long // as the weekday is 0 or 6 (Sunday or Saturday) }); |
4. A “future-only” date picker where the selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.
|
1
2
3
|
$.Zebra_DatePicker('#datepicker-example4', { direction: [1, 10] }); |
5. Set the format of the returned date:
|
1
2
3
|
$.Zebra_DatePicker('#datepicker-example5', { format: 'M d, Y'}); |
6. Show week number
|
1
2
3
|
$.Zebra_DatePicker('#datepicker-example6', { show_week_number: 'Wk'}); |
7. Start with the “years” view – recommended for when users need to select their birth date. Remember that you can always switch between views by clicking in the header of the date picker between the “previous” and “next” buttons!
|
1
2
3
|
$.Zebra_DatePicker('#datepicker-example7', { view: 'years'}); |