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-time

Import 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

LICENSE

MIT