A modern, beautiful, customizable date picker for React.
Installation 🚀
npm i @emranrastadi/kiarash-calendar-with-time
# or if you prefer Yarn:
yarn add @emranrastadi/kiarash-calendar-with-timeImport package css in head of your page
import "@emranrastadi/kiarash-calendar-with-time/lib/DatePicker.css"
import {Calendar} from "@emranrastadi/kiarash-calendar-with-time";
const App = () => {
const defaultRange = {
from: {
day: 3,
month: 5,
year: 1402
},
fromTime: {
hour: 15,
minute: 51,
second: 51
},
to: {
day: 17,
month: 5,
year: 1402
},
toTime: {
hour: 11,
minute: 11,
second: 11
},
};
const [selectedDayRange, setSelectedDayRange] = useState<any>(defaultRange);
return (
<Calendar
value={selectedDayRange}
onChange={setSelectedDayRange}
locale="fa"
shouldHighlightWeekends
/>
)
}new parameter for time picker
You can add this for active or deactive time-picker in calendar
enableTime={true|false}After enable time-picker , if you want to use date range , you can send fromTime and toTime by look likes value 19:17 by default value with from and to date.
After select time with day , we will give you an object with four key and values :
{
from : {
year : 1398,
month: 9,
day: 21
},
to : {
year : 1398,
month: 9,
day: 28
},
fromTime : {
hour: 21,
minute: 59,
second:5
},
toTime: {
hour: 23,
minute: 59,
second:15
}
}Minimum and Maximum date
Please if you wanna use minimum and maximum date, follow this structure:
const minimumDate = {
year:1401,
month: 9,
day: 8
}
const maximumDate = {
year:1401,
month: 9,
day: 28
}You should know , locale is important for currect implementation.
please sync date with your locale. You cann't use locale fa for AD date
Documentation 📄
You can find documentation on the website.
The documentation is divided into several sections:
- Getting Started
- Core Concepts
- Default Values
- Minimum & Maximum Date
- Disabled Days
- Customization
- Responsive Guide
- Utilities
- Different Locales
- TypeScript