Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mammad2c/mmd-persian-datepicker
A pure JS Persian datepicker, powered by Typescript.
https://github.com/mammad2c/mmd-persian-datepicker
calendar datepicker jalali-calendar javascript persian-calendar persian-datepicker typescript
Last synced: 16 days ago
JSON representation
A pure JS Persian datepicker, powered by Typescript.
- Host: GitHub
- URL: https://github.com/mammad2c/mmd-persian-datepicker
- Owner: mammad2c
- License: mit
- Created: 2018-12-21T22:30:12.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T22:59:57.000Z (almost 2 years ago)
- Last Synced: 2024-11-30T10:07:41.686Z (22 days ago)
- Topics: calendar, datepicker, jalali-calendar, javascript, persian-calendar, persian-datepicker, typescript
- Language: TypeScript
- Homepage:
- Size: 2.69 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# still in development
## mmd-persian-datepicker
A pure js persian datepicker, powered by TypeScript :)
## how to test
you have to installed [NodeJS v8](https://nodejs.org) up and recommended install [Yarn](https://yarnpkg.com/https://yarnpkg.com/).
```
- 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](https://github.com/moment/moment)
- [moment jalaali](https://github.com/jalaali/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:
- [x] `defaultValue`: initial value, should be today by default on initial render.
- [x] `numberOfMonths`: how many months should be rendered.
- [x] `mode`: `single` or `range`.
- [x] `disabledDates`: disable only some dates.
- [ ] `enabledDates`: disable whole picker's dates except these dates.
- [x] `inline`: render picker like a normal calendar.
- [x] `maxDate`: maximum date user can select.
- [x] `minDate`: minimum date user can select.
- [x] `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:
- [x] `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.
- [x] `setDate`: set picker selected date(s) programmatically.
- [ ] `toggle`: toggle between `open` and `close` of picker.