项目作者: mammad2c

项目描述 :
A pure js persian datepicker, powered by TypeScript :)
高级语言: TypeScript
项目地址: git://github.com/mammad2c/mmd-persian-datepicker.git
创建时间: 2018-12-21T22:30:12Z
项目社区:https://github.com/mammad2c/mmd-persian-datepicker

开源协议:MIT License

下载


still in development

mmd-persian-datepicker

mmd-persian-datepicker

A pure js persian datepicker, powered by TypeScript :)

how to test

you have to installed NodeJS v8 up and recommended install Yarn.

  1. - git clone https://github.com/mammad2c/mmd-persian-datepicker
  2. - yarn or npm i
  3. - yarn start or npm start
  4. - open `example/index.html` at your browser

Dependencies:

planing to migrate from moment to jalaali-js

Todo:

  • writing tests.
  • modular codes.
  • migrate to jalaali-js and drop usage of moment.

Configs:

  • defaultValue: initial value, should be today by default on initial render.
  • numberOfMonths: how many months should be rendered.
  • mode: single or range.
  • disabledDates: disable only some dates.
  • enabledDates: disable whole picker’s dates except these dates.
  • inline: render picker like a normal calendar.
  • maxDate: maximum date user can select.
  • minDate: minimum date user can select.
  • highlightWeekends: show weekends with a different color.
  • monthChanger: enable selecting from months, also by set false could disable it.
  • yearChanger: enable selecting from years, also by set false could disable it.
  • altInput: alt input for actual sending data to server.
  • altFormat: date formats for altInput.
  • readonly: input could not editable directly. only changes by picker.
  • clearButton: render a button to clear selected date(s), useful when multiple is true.
  • todayButton: go to today on picker.
  • firstDayOfWeek: weeks start days. for example on jalali is saturday and on georgian is monday. should be configurable.

Events:

  • onBeforeOpen: the event fires before datepicker open.
  • onBeforeClose: the event fires before datepicker close.
  • onAfterMonthChange: the event fires after changing the month.
  • onAfterYearChange: the event fires after changing the year.
  • onDayCreate: handle rendering date creates. adding custom element to day items and … .

Methods:

  • destroy: destroy instance, remove addEventListeners and … for nothing exists about the picker. this feature enable using this library in SPA frameworks such as react, vue and … .
  • jumpToDate: move picker to specific date.
  • setDate: set picker selected date(s) programmatically.
  • toggle: toggle between open and close of picker.