Import
import { InputDateRange } from '@adoptaunabuelo/react-components';
import moment from 'moment';
Usage
import moment from 'moment';
const [startDate, setStartDate] = useState<moment.Moment | null>(null);
const [endDate, setEndDate] = useState<moment.Moment | null>(null);
<InputDateRange
startDate={startDate}
endDate={endDate}
onChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
isOutsideRange={(date) => date.isBefore(moment())}
/>
Props
startDate
moment.Moment | null
required
The selected start date as a moment.js object. Use null for no selection.
endDate
moment.Moment | null
required
The selected end date as a moment.js object. Use null for no selection.
onChange
(data: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void
required
Callback fired when either date changes. Receives both start and end dates.
isOutsideRange
(date: moment.Moment) => boolean
Optional function to disable specific dates. Return true to disable a date. Commonly used to prevent past date selection.
Custom CSS properties for the input container.
Controls whether the input has focus styling (not functional for actual focus state).
Styling
- Height: 56px
- Border radius: 12px
- Border: 1px solid neutral soft gray, 2px neutral medium on focus
- Padding: 0-6px
- Spanish placeholders: “Fecha inicio” and “Fecha final”
Dependencies
This component uses:
react-dates from Airbnb for the date picker UImoment for date handling- Custom CSS overrides in
./react_dates_overrides.css
You must import the react-dates CSS in your app:import 'react-dates/lib/css/_datepicker.css';
Features
- Clear dates button: Built-in button to clear both dates
- No border mode: Uses
noBorder={true} for seamless integration
- Keyboard shortcuts hidden:
hideKeyboardShortcutsPanel={true}
- Spanish UI: Date picker interface in Spanish locale
Examples
Prevent Past Dates
import moment from 'moment';
<InputDateRange
startDate={startDate}
endDate={endDate}
onChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
isOutsideRange={(date) => date.isBefore(moment(), 'day')}
/>
Only Allow Current Month
<InputDateRange
startDate={startDate}
endDate={endDate}
onChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
isOutsideRange={(date) => {
const today = moment();
return !date.isSame(today, 'month');
}}
/>
With Custom Styling
<InputDateRange
startDate={startDate}
endDate={endDate}
style={{ maxWidth: 400 }}
onChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
/>
Booking System Example
const [startDate, setStartDate] = useState<moment.Moment | null>(null);
const [endDate, setEndDate] = useState<moment.Moment | null>(null);
const [bookedDates, setBookedDates] = useState<moment.Moment[]>([]);
const isDateBooked = (date: moment.Moment) => {
return bookedDates.some(bookedDate => date.isSame(bookedDate, 'day'));
};
<InputDateRange
startDate={startDate}
endDate={endDate}
onChange={({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
}}
isOutsideRange={(date) => {
// Disable past dates and already booked dates
return date.isBefore(moment(), 'day') || isDateBooked(date);
}}
/>
Working with moment.js
// Convert Date to moment
const momentDate = moment(new Date());
// Convert moment to Date
const jsDate = momentDate.toDate();
// Format moment date
const formatted = momentDate.format('YYYY-MM-DD');
// Parse string to moment
const parsed = moment('2024-01-15', 'YYYY-MM-DD');
