1.7.4 • Published 8 months ago
react-calendar-datetime-picker v1.7.4
react-calendar-datetime-picker
The Simple and fast English and Persian calender for React
⚙️ Install
npm install react-calendar-datetime-picker
or
yarn add react-calendar-datetime-picker
⚡️ Usage
import { DtPicker } from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/dist/style.css'
const App = () => {
const [date, setDate] = useState(null)
return <DtPicker onChange={setDate} />
}
📄 Documentation
🎯 Features
- Supports Gregorian and Jalali calender
- Uses context api to share data
- Supports three types of calender: single day - date range - multiple dates
- Fully customizable
- Supports maximum and minimum dates
- Capability to add a list of disabled dates
- Supports time for single and range type
- Capability to mark weekends
- Function called for change, open and close events
- Supports Typescript
🔧 Props
Property | Type | Required | Default | Description | |
---|---|---|---|---|---|
onChange | func | true | - | A function that returns an object of selected date/dates. | |
initValue | Day | null | null | You can set a default value for your date using this property. | |
type | string | single | You can choose the selection type that you need to use. There exist 3 types: "single", "range", "multi" | ||
local | string | en | This date picker supports both Gregorian and Jalali calenders.To select Gregorian calendar you have to set "local" to "en" and to "fa" for Jalali. | ||
withTime | boolean | false | Should you need to use time in your date picker you can set this prop to true.This prop works only in single and range types. | ||
showTimeInput | boolean | false | Helps you to show time in input date picker | ||
showWeekend | boolean | false | Marks weekends by changing the color. | ||
clearBtn | boolean | false | Add a button to your input to clear you calendar initial date/dates. | ||
isRequired | boolean | false | This prop makes your input as a required field in the form validation | ||
todayBtn | boolean | false | A button to move fast to the date of today in the calendar. | ||
onCalenderChange | func | A callback that runs when the calendar value is changed | |||
onCalenderShow | func | A callback that runs when the calendar opens | |||
onCalenderHide | func | A callback that runs when the calendar closes | |||
maxDate | Day | You can set this prop to limit the maximum date that the user can select.Periods partially overlapped by maxDate will also be selectable, although React-calendar-dateTime-picker will ensure that no later date is selected. | |||
minDate | Day | You can set this prop to limit the minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-calendar-dateTime-picker will ensure that no earlier date is selected. | |||
disabledDates | Day[] | A list of dates that you want the user not to select. | |||
isDisabled | boolean | false | Use to disable the calendar input | ||
yearListStyle | string | grid | Use to change year item list style(accepted value: grid, list) |
🎨 Customization
Property | Type | Default | Description |
---|---|---|---|
placeholder | string | "select" | To change input date picker placeholder |
inputClass | string | To change calendar's input style | |
clearBtnClass | string | To change calendar's clear button style | |
calenderModalClass | string | To change calendar's main modal style | |
headerClass | string | To change calendar's green header style | |
timeClass | string | To change calendar's time view style | |
daysClass | string | To change calendar's days view style | |
monthsClass | string | To change calendar's months view style | |
yearsClass | string | To change calendar's years view style | |
NextBtnIcon | svg as component | ">" | To change next month button icon. |
PreviousBtnIcon | svg as component | "<" | To change previous month button icon. |
nextMonthBtnTitle | string | "next" | To change next month button title(shows by hover). |
previousMonthBtnTitle | string | "previous" | To change previous month button title(shows by hover). |
fromLabel | string | "from" | Starting date label in input result(works only in range type). |
toLabel | string | "to" | Ending date label in input result(works only in range type). |
clockFromLabel | string | "from" | Title for starting time in the time component(works only in range type). |
clockToLabel | string | "to" | Title for ending time in the time component(works only in range type). |
clockLabel | string | "clock" | Label for time in the time component(works in single and range type). |
✔️ bundle size
You can check out this package bundle size in this Link
🙇 Special Thanks
Thanks to jalaali-js, the only dependency of this date picker.
📋 License
MIT © mehdinasiri
1.7.3
8 months ago
1.7.2
8 months ago
1.7.1
8 months ago
1.7.0
8 months ago
1.7.4
8 months ago
1.6.3
2 years ago
1.6.2
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.7
2 years ago
1.5.6
3 years ago
1.5.5
3 years ago
1.5.4
3 years ago
1.5.3
3 years ago
1.5.2
3 years ago
1.5.1
3 years ago
1.5.0
3 years ago
1.3.4
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.3
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.9
3 years ago
1.2.8
3 years ago
1.2.7
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago