Skip to content

React component that helps you to makes simple Farsi/Jalali/Shamsi date picker

License

Notifications You must be signed in to change notification settings

map-ir/react-jalali-datepicker

 
 

Repository files navigation

Jalali React Date-Picker

Build Status All Contributors

🚨 I start to redesigning this package. Here you can see the new artboards that well designed by eanlami. If you want to collabrate for this version feel free to make changes or contact me 😊

alt-text

React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.

Installation

$ npm install -S jalali-react-datepicker

Date Picker

props type default
gregorian boolean false
modal boolean false. If set to true, date picker will be opened in modal.
value timestamp Or Date Or Moment Date Moment today date
weekend number[] [6] for jalali and [0, 6] for gregorian
ArrowLeft React.ReactType default component
ArrowLeft React.ReactType default component
submittable boolean false. if it is true rangeDatePicker show submit and cancel
ClockIcon React.ReactType default component
DateIcon React.ReactType default component
timePicker boolean true.
onClickSubmitButton function null. if you passed this will be something like this
onDateChange function null. if you passed this will be something like this
modalZIndex number 9999
theme object default theme you can see here
label string default is null
open boolean default is false. control opening and close modal from outside
onToggle function default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { DatePicker } from "jalali-react-datepicker";

render(<DatePicker />, document.getElementById("root"));

onClickSubmitButton

You can access to datePicker value when submit button is clicked.

example:

function submitExample({ value }) {
  console.log("value ", value);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Calender

props type default
gregorian boolean false
value timestamp Or Date Or Moment
Date Moment today date
weekend number[] [6] for jalali and [0, 6] for gregorian
ArrowLeft React.ReactType default component
ArrowLeft React.ReactType default component
submittable boolean false. if it is true rangeDatePicker show submit and cancel
ClockIcon React.ReactType default component
DateIcon React.ReactType default component
timePicker boolean true.
onClickSubmitButton function null. if you passed this will be something like this
onDateChange function null. if you passed this will be something like this
modalZIndex number 9999
theme object default theme you can see here
label string default is null
open boolean default is false. control opening and close modal from outside
onToggle function default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { Calender } from "jalali-react-datepicker";

render(<Calender />, document.getElementById("root"));

onClickSubmitButton

You can access to datePicker value when submit button is clicked.

example:

function submitExample({ value }) {
  console.log("value ", value);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Date Picker

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props type default
gregorian boolean false
modal boolean false. If set to true, date picker will be opened in modal.
start string. ex: 1397/5/18 today date
end string. ex: 1397/5/18 today date
weekend number[] [6] for jalali and [0, 6] for gregorian
ArrowLeft React.ReactType default component
ArrowRight React.ReactType default component
submittable boolean false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton function null. if you passed this will be something like this
onDateChange function null. if you passed this will be something like this
modalZIndex number 9999
theme object default theme you can see here
fromLabel string default is از تاریخ
toLabel string default is تا تاریخ
open boolean default is false. control opening and close modal from outside
onToggle function default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeDatePicker } from "jalali-react-datepicker";

render(<RangeDatePicker />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Calender

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props type default
gregorian boolean false
start string. ex: 1397/5/18 today date
end string. ex: 1397/5/18 today date
weekend number[] [6]
ArrowLeft React.ReactType default component
ArrowRight React.ReactType default component
submittable boolean false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton function null. if you passed this will be something like this
onDateChange function null. if you passed this will be something like this
modalZIndex number 9999
theme object default theme you can see here
fromLabel string default is از تاریخ
toLabel string default is تا تاریخ
open boolean default is false. control opening and close modal from outside
onToggle function default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeCalender } from "jalali-react-datepicker";

render(<RangeCalender />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Calender Vertical

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props type default
gregorian boolean false
hasHead boolean true
inputDate string or moment.Moment today
start string. ex: 1397/5/18 today date
end string. ex: 1397/5/18 today date
weekend number[] [6]
ArrowLeft React.ReactType default component
ArrowRight React.ReactType default component
submittable boolean false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton function null. if you passed this will be something like this
onDateChange function null. if you passed this will be something like this
modalZIndex number 9999
theme object default theme you can see here
fromLabel string default is از تاریخ
toLabel string default is تا تاریخ
open boolean default is false. control opening and close modal from outside
onToggle function default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeCalenderVertical } from "jalali-react-datepicker";

render(<RangeCalenderVertical />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

ToDo

  • write DatePicker
  • add label to inputs
  • create codesandbox page for preview
  • add TimePicker

Contributors

Thanks goes to these wonderful people (emoji key):

Reza Khosroshahi
Reza Khosroshahi

💻 📖 💡 🤔 ⚠️
saeedjalali
saeedjalali

💬 🐛 💻 🤔 👀 📢
ZMashhadizadeh
ZMashhadizadeh

💻 📦

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT License

About

React component that helps you to makes simple Farsi/Jalali/Shamsi date picker

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 93.7%
  • JavaScript 4.5%
  • HTML 1.8%