@react-shamsi/timepicker

Jalali date picker

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 />;
}

Configuration

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