Customizable Datetime And Date Range Picker Plugin - Gemini DatePicker

File Size: 691 KB
Views Total: 17073
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="//"></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.


4. All possible plugin options to customize the date picker.


  // 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.


  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.

// Clears the date input
Clear the picker date (when date is cleared, the current date is displayed by default).

// Shows the date picker calendar

// Hides the date picker

// Disables the date picker
$().datepicker('disable', true);

// Enables the date picker
$().datepicker('disable', false);

// Destroys the date picker

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:


  • v1.0.14


  • update module mode


  • Week start date and russian translation


  • Week start date and russian translation


  • update picker's position issue


  • solve the compatibility of style


  • fixed 'destroy' method.


  • add locales code in jquery.datepicker


  • 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.