jalali datepicker of mantine library
npm install mantine-datepicker-jalaliJalali DatePicker & Calendar of mantine library.
In this library, Mantine & Mantine-dates-v6 are used, and all their features are available.
Using all the features of this library requires the installation of two libraries: @mantine/core,@mantine/hooks
Install mantine-datepicker-jalali with npm
``bash`
npm i mantine-datepicker-jalali @mantine/core @mantine/hooks
Examples
#### DateInput:
`javascript
import { DateValue, DateInput } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"
function Demo() {
const [singleValue, setSingleValue] = useState
return(
placeholder="تاریخ را وارد کنید"
style={{ direction: "rtl" }} // RTL lable
defaultValue={new Date()} // Initial date that is displayed, used for uncontrolled component
value={singleValue}
onChange={setSingleValue}
locale="fa" // Required to use Jalali Calendar
firstDayOfWeek={6} // number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday
weekendDays={[5]} // Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider
/>
);
}
`
#### DatePicker(multiple):
`javascript
import { DateValue, DatePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"
function Demo() {
const [multipleDates, setMultipleDates] = useState
return(
value={multipleDates}
onChange={setMultipleDates}
locale="fa"
firstDayOfWeek={6}
weekendDays={[5]}
/>
);
}
`
#### DatePicker(range):
`javascript
import { DatesRangeValue, DateValue, DatePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"
function Demo() {
const [rangeValue, setRangeValue] = useState
return(
value={rangeValue}
onChange={setRangeValue}
locale="fa"
firstDayOfWeek={6}
weekendDays={[5]}
/>
);
}
`
#### DateTimePicker:
`javascript
import { DateTimePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"
function Demo() {
const [singleValue, setSingleValue] = useState
return(
placeholder="تاریخ و زمان را وارد کنید"
style={{ direction: "rtl" }} // RTL lable
defaultValue={new Date()} // Initial date that is displayed, used for uncontrolled component
value={singleValue}
onChange={setSingleValue}
locale="fa" // Required to use Jalali Calendar
firstDayOfWeek={6} // number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday
weekendDays={[5]} // Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider
clearable // Determines whether input value can be cleared, adds clear button to right section, false by default
/>
);
}
``
- YearPicker Component
- MonthPicker Component
- YearPickerInput Component
- MonthPickerInput Component
- TimeInput Component
For support, email saberi.soheil74@gmail.com