diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index 6d1887e..36e3873 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -237,6 +237,46 @@ export default class CalendarPicker extends Component { return { minRangeDuration, maxRangeDuration }; } + goToDate = (date = new Date(), options = {}) => { + + if (this.props.scrollable) { + console.error('goToDate() is not supported when scrollable is true'); + return; + } + + const defaultOptions = { + /* + * isSelected - if true, the date will be shown as selected. + * useful when you have different style for today and selected date. + */ + isSelected: true, + ...options, + } + + const cloneDate = new Date(date); + const fullYear = cloneDate.getFullYear(); + const fullMonth = cloneDate.getMonth(); + const fullDay = cloneDate.getDate(); + + if (!Utils.isSameMonthAndYear(cloneDate, this.state.selectedStartDate)) { + + if (defaultOptions.isSelected) { + this.handleOnPressDay({ year: fullYear, month: fullMonth, day: fullDay, setAsCurrentDate: true }); + const currentMonthYear = new Date(fullYear, fullMonth, 1, 12); + this.props.onMonthChange && this.props.onMonthChange(currentMonthYear); + } else { + this.handleOnPressFinisher({ year: fullYear, month: fullMonth, scrollFinisher: null, extraState: null }); + } + } else { + // the date is in the same month and year as the selected date + + if (defaultOptions.isSelected) { + this.handleOnPressDay({ year: fullYear, month: fullMonth, day: fullDay }); + + } + } + } + handleOnPressDay = ({ year, month, day }) => { const { selectedStartDate: prevSelectedStartDate, diff --git a/README.md b/README.md index 7608f61..979b7f6 100644 --- a/README.md +++ b/README.md @@ -405,9 +405,10 @@ These internal methods may be accessed through a ref to the CalendarPicker. | Name | Params | Description | | :-------------------------- | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`handleOnPressDay`** | `{year, month, day} (Integers)` | Programmatically select date. `year`, `month` and `day` are numbers. `day` is the day of the current month. date-fns example for today's day of month: `getDate(new Date())` | -| **`handleOnPressNext`** | | Programmatically advance to next month. | -| **`handleOnPressPrevious`** | | Programmatically advance to previous month. | -| **`resetSelections`** | | Clear date selections. Useful for resetting date range selection when user has picked a start date but not an end date. | +| **`handleOnPressNext`** | | Programmatically advance to next month. | +| **`handleOnPressPrevious`** | | Programmatically advance to previous month. | +| **`resetSelections`** | | Clear date selections. Useful for resetting date range selection when user has picked a start date but not an end date. | +| **`goToDate`** | `date, {isSelected}` | Goes to the passed `date` and is type of Date. `isSelected` is optional boolean and marks the passed date as selected. Default values are like `goToDate(new Date(), {isSelected: true})` | ## TypeScript diff --git a/example/example/App.js b/example/example/App.js index b2f2173..496a633 100644 --- a/example/example/App.js +++ b/example/example/App.js @@ -46,6 +46,9 @@ export default class App extends Component { this.toggleEnableRange = this.toggleEnableRange.bind(this); this.onMinRangeDuration = this.onMinRangeDuration.bind(this); this.onMaxRangeDuration = this.onMaxRangeDuration.bind(this); + this.goToToday = this.goToToday.bind(this); + + this.calendarPickerRef = React.createRef(); } onDateChange(date, type) { @@ -110,6 +113,12 @@ export default class App extends Component { } } + goToToday() { + this.calendarPickerRef.current.goToDate(new Date(), { + isSelected: false, + }); + } + render() { const { customDatesStyles, @@ -127,6 +136,7 @@ export default class App extends Component { return ( + +