Add goToDate() method available via ref to go to any date including today (#409)

Author: MohammadAzimi

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,

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
 

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 (
       <View style={styles.container}>
         <CalendarPicker
+          ref={this.calendarPickerRef}
           scrollable
           selectedStartDate={selectedStartDate}
           selectedEndDate={selectedEndDate}
@@ -143,6 +153,10 @@ export default class App extends Component {
           headerWrapperStyle={styles.headerWrapperStyle}
         />
 
+        <View style={styles.topSpacing}>
+          <Button onPress={this.goToToday} title="Go to Today" />
+        </View>
+
         <View style={styles.topSpacing}>
           <Text style={styles.text}>Selected (Start) date:  {formattedStartDate}</Text>
           {!!formattedEndDate &&