自己寫的一款基於jquery的日曆元件

gregzhang616發表於2017-09-18

注:這款元件的開發初衷是覺得jquery領域的日曆元件的質量不是特別好,有大部分情況都不太符合業務團隊的開發需求,在UI設計方面也沒有亮點,所以這款在沒有UI設計的情況下,參考elementUI的日曆元件的UI設計進行開發,也非常感謝餓了麼ued團隊的設計,歡迎大家能夠在使用中提出相關issue,感謝大家的支援。

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
Date Image

Type: month

Month Image
Month Image

Type: year

Year Image
Year Image

Type: datetime

Datetime Image
Datetime Image

Type: date-range

Date range Image
Date range Image

Type: datetime-range

Datetime range Image
Datetime range Image

Getting started

Quick start

  • Clone the repository: git clone github.com/gregzhang61….
  • Install with Npm: npm install gemini-datepicker.
  • Install with Bower: bower install gemini-datepicker.

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>複製程式碼

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

相關文章