All Projects → rzkhosroshahi → React Jalali Datepicker

rzkhosroshahi / React Jalali Datepicker

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

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Jalali Datepicker

Vue Mj Daterangepicker
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Stars: ✭ 48 (-45.45%)
Mutual labels:  datepicker
Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+1212.5%)
Mutual labels:  datepicker
Rc Datetime Picker
React component for datetime picker by Moment.js
Stars: ✭ 85 (-3.41%)
Mutual labels:  datepicker
Intl Date Time
International DateTime for Laravel Nova
Stars: ✭ 50 (-43.18%)
Mutual labels:  datepicker
Material Vue Daterange Picker
a date-range-picker follows the Material Design spec powered by vue.js (alpha)
Stars: ✭ 64 (-27.27%)
Mutual labels:  datepicker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (-17.05%)
Mutual labels:  datepicker
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+8845.45%)
Mutual labels:  datepicker
Rangedatepicker
📆 A simple vertical date picker for Android, written in kotlin 🇮🇩
Stars: ✭ 87 (-1.14%)
Mutual labels:  datepicker
Datepicker
⚠️ [Deprecated] No longer maintained. A simple jQuery datepicker plugin.
Stars: ✭ 1,133 (+1187.5%)
Mutual labels:  datepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-10.23%)
Mutual labels:  datepicker
React Native Jalali Datepicker
📅 React Native Jalali DatePicker component for both Android and iOS ✨
Stars: ✭ 52 (-40.91%)
Mutual labels:  datepicker
Datetimepicker
This is a custom android holo datepicker timepicker
Stars: ✭ 56 (-36.36%)
Mutual labels:  datepicker
Almostmaterialdatepicker
Date picker made in material design style with some additional spinners
Stars: ✭ 75 (-14.77%)
Mutual labels:  datepicker
Persianrangedatepicker
Persian range date picker for android.
Stars: ✭ 48 (-45.45%)
Mutual labels:  datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-3.41%)
Mutual labels:  datepicker
React Dates
React date(range) inputs/pickers
Stars: ✭ 43 (-51.14%)
Mutual labels:  datepicker
Vue2 Datepicker
A datepicker / datetimepicker component for Vue2
Stars: ✭ 1,154 (+1211.36%)
Mutual labels:  datepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+1364.77%)
Mutual labels:  datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-2.27%)
Mutual labels:  datepicker
Angular Mydatepicker
Angular datepicker and date range picker 📅
Stars: ✭ 76 (-13.64%)
Mutual labels:  datepicker

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
value timestamp | Date | Moment Date
weekend number[] [6]
ArrowLeft React.ReactType default component
ArrowLeft React.ReactType default component
ClockIcon React.ReactType default component
DateIcon React.ReactType default component
timePicker boolean true.
onClickSubmitButton function null. if you passed this will be something like
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);
}

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
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
isRenderingButtons boolean true. if it is false rangeDatePicker doesnt show submit and cancel buttons
onClickSubmitButton 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);
}

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].