still in development

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:

• moment js
• moment jalaali

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.