Customizable Datetime And Date Range Picker Plugin - Gemini DatePicker
File Size: | 691 KB |
---|---|
Views Total: | 17497 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A cross-browser, highly customizable and multi-language jQuery date picker plugin that enables the user to select times, dates, months, years and date ranges from a well-designed calendar popup.
View more:
How to use it:
1. Put jQuery library together with the jQuery Gemini DatePicker's JavaScript and CSS files into your webpage.
<!-- Stylesheet --> <link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="jquery.datepicker.min.css"> <!-- Dependency --> <script src="//code.jquery.com/jquery.min.js"></script> <!-- JavaScript --> <script src="jquery.datepicker.js"></script>
2. Load an i18n file of you choice in the webpage.
<script src="i18n/datepicker.en-US.js"></script>
3. Enable the date picker plugin on a normal input field you specify.
$('.myDatepicker').datepicker();
4. All possible plugin options to customize the date picker.
$('.myDatepicker').datepicker({ // readonly mode readonly: false, // disable the date picker disabled: false, // year/month/date/date-range/datetime/datetime-range type: 'date', // date format format: 'yyyy-MM-dd', // placeholder text placeholder: 'Please pick a day', // alignment // 'left'/'center'/'right' align: 'left', // start/end dates startDate: null, endDate: null, // i18n lang: 'en-US', // character to separate the dates rangeSeparator: '-', // default date defaultValue: '', // z-index property zIndex: 999, });
5. Callback functions available.
$('.myDatepicker').datepicker({ onChange: null, onShow: null, onHide: null });
6. API methods.
// Sets a new date $().datepicker('setDate', '2016-02-09'); $().datepicker('setDate', new Date(2016, 1, 9)); // Gets the current date. $().datepicker('getDate'); // Clears the date input Clear the picker date (when date is cleared, the current date is displayed by default). // Shows the date picker calendar $().datepicker('show'); // Hides the date picker $().datepicker('hide'); // Disables the date picker $().datepicker('disable', true); // Enables the date picker $().datepicker('disable', false); // Destroys the date picker $().datepicker('destroy');
7. Events.
// fires when date is changed. $().on('pick.datepicker', function (e, params) { console.log('newDate: ' + params.newDate); console.log('oldDate: ' + params.oldDate); }); // fires when picker is show. $().on('show.datepicker', function (e) { // todo }); // fires when picker is hide. $().on('hide.datepicker', function (e) { // todo });
Change log:
2017-09-24
- v1.0.14
2017-09-23
- update module mode
2017-09-22
- Week start date and russian translation
2017-07-26
- Week start date and russian translation
2017-04-11
- update picker's position issue
2017-03-19
- solve the compatibility of style
2017-03-12
- fixed 'destroy' method.
2017-03-11
- add locales code in jquery.datepicker
2017-02-27
- update core js, css
This awesome jQuery plugin is developed by gregzhang616. For more Advanced Usages, please check the demo page or visit the official website.