عکس mammad2c
A pure JS Persian datepicker, powered by Typescript :)TypeScript
موضوع‌ها
۴
فورک‌ها
۰
ستاره‌ها
۷
تاریخ ایجاد
۱ دی ۱۳۹۷
آخرین بروزرسانی
۱۷ روز قبل
لایسنس
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.

- git clone https://github.com/mammad2c/mmd-persian-datepicker
- yarn or npm i
- yarn start or npm start
- 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.