Skip to content
A full-featured datepicker jquery plugin
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 05fba85 Sep 25, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist change font to base64 image Sep 23, 2017
src change font to base64 image Sep 23, 2017
.editorconfig update source file Feb 24, 2017
.gitattributes update source file Feb 24, 2017
.gitignore update .gitignore and remove .idea folder Feb 24, 2017
.npmignore update Mar 10, 2017
LICENSE add .npmignore and LICENSE Mar 10, 2017
README.md update document Sep 25, 2017
gulpfile.js change font to base64 image Sep 23, 2017
package.json 1.0.15 Sep 23, 2017

README.md

Date Image Gemini DatePicker

A full-featured datepicker jquery plugin.

Features

  • Supports more configurable options.
  • Supports more methods
  • Supports more events
  • Supports datetime mode
  • Supports range date and range datetime mode
  • Supports internationalization
  • Cross-browser support

Example image

Type: date

Date Image

Type: month

Year Image

Type: year

Month Image

Type: datetime

Datetime Image

Type: date-range

Date range Image

Type: datetime-range

Datetime range Image

Getting started

Quick start

Installation

Include files:

Css file

<link rel="stylesheet" href="/assets/css/iconfont.css">
<link rel="stylesheet" href="/css/jquery.datepicker.min.css">

Javascript file

<script src="/assets/js/jquery.min.js"></script>
<script src="/js/jquery.datepicker.min.js"></script>
// there is no need to import the next line of code when current language is 'en-US'
<script src="/i18n/datepicker.zh-CN.js"></script>
CommonJs / NodeJs:

Css file

require('gemini-datepicker/dist/css/jquery.datepicker.min.css');

Javascript file

require('gemini-datepicker');

Attributes

You may set datepicker options with $().datepicker(options), the options type is Object.

Name Type Default value Optional value Description
type String 'date' year/month/date/datetime/datetime-range/date-range type of the picker
readonly Boolean false false/ true whether DatePicker is read only
disabled Boolean false false/ true whether DatePicker is disabled
format String 'yyyy-MM-dd' year->yyyy, month->MM, day->dd, hour->HH, minute->mm, second->ss format of the picker
placeholder String 'Please pick a day' -- init input element's placeholder
align String 'left' 'left'/'center'/'right' the pick panel's alignment
weekStart Number 0 -- Start of the week
startDate Date null -- If the start date exists, the date before the start date is disabled
endDate Date null -- If the end date exists, the date after the end date is disabled
lang String 'en-US' 'en-US'/'zh-CN'/'vi' language of the datepicker
rangeSeparator String '-' -- if type is 'date-range' or 'datetime-range', use rangeSeparator to separate the date
defaultValue String/Date '' -- default date, if picker type is date-range or datetime-range, picker's type must be String
zIndex Number 2008 -- The CSS style z-index for the picker.

Methods

Common usage

$().datepicker(methodName, argument1, argument2, ..., argumentN);
setDate(date)

Set the current date with a new date, parameter date type is String or Date .

$().datepicker('setDate', '2016-02-09');
$().datepicker('setDate', new Date(2016, 1, 9));
getDate()

Get the current date.

$().datepicker('getDate');
clear()

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

$().datepicker('clear');
show()

Show the picker panel.

$().datepicker('show');
hide()

hide the picker panel.

$().datepicker('hide');
disable(value)

disable or enable the picker, if parameter value is true that can disable the picker, otherwise can enable the picker.

// disable the picker
$().datepicker('disable', true);
// enable the picker
$().datepicker('disable', false);
destroy()

Destroy the picker and remove the instance from target element.

$().datepicker('destroy');

Events

Common usage

$().on(eventName, function (e, arguments) {
  // todo
});
pick.datepicker

This event fires when date is changed.

  • event ( Type: Object )
    • newDate ( Type: String )
    • oldDate ( Type: String )
$().on('pick.datepicker', function (event) {
  console.log('newDate: ' + event.newDate);
  console.log('oldDate: ' + event.oldDate);
});
show.datepicker

This event fires when picker is show.

$().on('show.datepicker', function (e) {
  // todo
});
hide.datepicker

This event fires when picker is hide.

$().on('hide.datepicker', function (e) {
  // todo
});

Callbacks

Common usage

$().datepicker({
    CallbackName: function () {
      // todo
    }
});
onChange

A shortcut of the "pick.datepicker" event, this callback called when picker value is changed.

$().datepicker({
    onChange: function (events) {
      console.log('newDate: ' + event.newDate);
      console.log('oldDate: ' + event.oldDate);
    }
});
onShow

A shortcut of the "show.datepicker" event, this callback called when picker is show.

$().datepicker({
    onShow: function () {
      // todo
    }
});
onHide

A shortcut of the "hide.datepicker" event, this callback called when picker is hide.

$().datepicker({
    onHide: function () {
      // todo
    }
});

Locale

I18n config, default language is en-US

Usage
<script src="/js/jquery.datepicker.min.js"></script>
<script src="/i18n/datepicker.zh-CN.js"></script>
<script>
  $().datepicker({
    lang: 'zh-CN'
  });
</script>  

Run example

Please download the project, and then enter into this directory.(download gulp-sass plugin need to connect vpn)

Browser support

  • Chrome Most versions
  • Firefox Most versions
  • Safari Most versions
  • Opera Most versions
  • Edge Most versions
  • Internet Explorer 8+

Author

Greg Zhang from Baidu (gregzhang616@gmail.com).

Remarks

Thanks for the eleme UED team to provide such a good UI design.

You can’t perform that action at this time.