You can try it here https://ezdatepicker.netlify.app/
- Easy control of the selectable range
- Doesn't come with default input, so you get to make your own
- Its just a calendar, so place anywhere you want
- You can rename the month and weekdays easily
npm install ez-date-range-picker
or
yarn add ez-date-range-picker
import { DateRangePicker } from 'ez-date-range-picker';
function Home() {
const [first, setFirst] = useState(undefined);
const [last, setLast] = useState(undefined);
const startDate = new Date();
const limitDate = new Date('3-01-2022');
return (
<DateRangePicker
first={first}
last={last}
startDate={startDate}
limitDate={limitDate}
onFirstDateSelected={(date) => setFirst(date)}
onLastDateSelected={(date) => setLast(date)}
onRequestClose={() => alert('Requested Close')}
onSelectionComplete={() => alert('Selected !')}
visible={true}
multiple={true}
/>
);
}
<DateRangePicker
first={first}
// Must be a date
last={last}
// Must be a date
startDate={startDate}
// The first day that can be selected (optional)
limitDate={limitDate}
// The last day that can be selected (optional)
onFirstDateSelected={(date) => setFirst(date)}
// Callback when the day is clicked, you receive the date clicked
onLastDateSelected={(date) => setLast(date)}
// Callback when the day is clicked, you receive the date clicked
onSelectionComplete={() => alert('Selected !')}
// Callback when the user picked both dates
visible={true} // Diplay block or none
multiple={true} // Diplay two calendars instead of one
singleDate={true} // Changes the calendar from date-range to just a simple date picker
// This disables the last date option, every click is going to be a first date selection
/>
<DateRangePicker
weekdaysName={['周一', '周二', '周三', '周四', '周五', '周六', '星期日']}
monthsName={['Jan', 'February', 'any name']}
/>
These props allows you to rename the weekdays and month names. Just make sure you provide 7 days name, and 12 month names (/ω\)
You can change some css by passing some props
<DateRangePicker
customStyles={{
HeaderContainer: {
backgroundColor: 'pink',
},
ColorPallet: {
BackgroundColor: {
firstSelected: 'pink',
lastSelected: 'green',
between: 'red',
},
BackgroundHoverColor: {
allowed: 'pink',
},
},
}}
/>
ColorPallet props can only receive the new color value, but the components container can receive any valid css property.