Git Product home page Git Product logo

mmd-persian-datepicker's Introduction

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.

mmd-persian-datepicker's People

Contributors

dependabot[bot] avatar mammad2c avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mmd-persian-datepicker's Issues

Could you add time-picker?

Hello
We have a really huge gap for Jalali Date-Time picker's that not depends on any framework like vue,react,angular and...
I think you are the first person on the persian web who made a VanillaJS Persian DatePicker!
###So please add a time picker!
u can refer to this date-picker that wrote for VueJS and use it if u can.
best regards.

How we can use this library

Hi,
Thank you for publish this libery, but I think there is some problems:

  1. How we can use this library in our projects? please write a document and explain how we can use it.
  2. How we can build all js your code in single files without dependencies such as momentjs or moment-jalali.
  3. Which browsers supported?

bug: in range mode with highlightWeekends

Hi,
When we set the following option to mmd-persian, and when we change the year until we reach فروردین 1402 or فروردین 1403 or فروردین 1404 and etc, the days of weekends are displayed incorrectly. (only left side on view)

new MmdPersianDatepicker("#input-picker", {
  mode: 'range',
  numberOfMonths: 2,
  highlightWeekends: true
});

next-year
next-year2
1043
1043-2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.