Mantine DatePicker Jalali

Jalali 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

Installation

Install mantine-datepicker-jalali with npm

  npm i mantine-datepicker-jalali @mantine/core @mantine/hooks

Examples

DateInput:

import { DateValue, DateInput } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"

function Demo() {
    const [singleValue, setSingleValue] = useState<DateValue>(null);
    return(
        <div>
            <DateInput        
            label="تاریخ"
            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
            />
        </div>
    );
}

DatePicker(multiple):

import { DateValue, DatePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"

function Demo() {
    const [multipleDates, setMultipleDates] = useState<Date[]>([]);
    return(
        <div>
            <DatePicker
            type="multiple" // Picker type: range, multiple or default 
            value={multipleDates}
            onChange={setMultipleDates}
            locale="fa"
            firstDayOfWeek={6} 
            weekendDays={[5]} 
            />
        </div>
    );
}

DatePicker(range):

import { DatesRangeValue, DateValue, DatePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"

function Demo() {
    const [rangeValue, setRangeValue] = useState<DatesRangeValue>([null, null]);
    return(
        <div>
            <DatePicker
            type="range" // Picker type: range, multiple or default 
            value={rangeValue}
            onChange={setRangeValue}
            locale="fa"
            firstDayOfWeek={6} 
            weekendDays={[5]} 
            />
        </div>
    );
}

DateTimePicker:

import { DateTimePicker } from "mantine-datepicker-jalali";
import "dayjs/locale/fa"

function Demo() {
    const [singleValue, setSingleValue] = useState<DateValue>(null);
    return(
        <div>
            <DateTimePicker        
            label="تاریخ و زمان"
            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
            />
        </div>
    );
}

Features

• YearPicker Component
• MonthPicker Component
• YearPickerInput Component
• MonthPickerInput Component
• TimeInput Component

Support

For support, email [email protected]

License

MIT