Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:
import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";
export default function Example() {
return <DatePicker />;
}
Now we are going to explore every single prop that could be passed to DatePicker.
Prop name | Description | Default value |
---|---|---|
autoUpdate | Automatically updates the input whenever the user changes the active date. This means that the confirm button won't be needed for saving the date anymore. | false |
defaultDate | The date that will be displayed on the input by default | n/a |
calendarProps | Every prop for configuring the calendar component | n/a |
date | Changes the date in a controlled manner | n/a |
dateFormat | The format that the date will be displayed in | "yyyy/MM/dd" |
onChange | Function that gets called whenever the user selects a date. The new date will be passed as it's argument | n/a |
persianDigits | Will convert the input's date to persian digits | false |
...Input element props | Every other prop that can be passed to an input can be also passed to this component. | n/a |