Customizable Datetime And Date Range Picker Plugin - Gemini DatePicker

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:

• 50 Best Date And Time Picker jQuery Plugins 

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.