Add active menu styles to shortcuts for Date Range input

[ajmagic]

Environment

• Package version(s): 3.15.2
• Browser and OS versions: Chrome

Feature request

Expose selectedShortcutIndex and onShortcutChange props to DateRange Input, similar to DateRangePicker

Examples

I'm looking to use DateRangeInput to allow selection of month(s) at a time. Usually, the users are interested in current month, and forward and backward a couple of months. Hence I'm providing them dynamic shortcuts, depending on their current month selection. Since the selected shortcut index isn't exposed, the component erroneously shows the previous month being selected. The shortcuts to months are dynamically generated, so when April is selected it looks so:

And when March is selected, and then re-opening it, the page loads with February selected since it is now at index 1:

[dmackerman]

Just ran into this also, as I expected onShortcutChange and selectedShortcutIndex to be available DateRangeInput, because well...it's the same component? 😄

[iusfof]

+1. This props are present in the documentation, but they don't work https://blueprintjs.com/docs/#datetime/daterangepicker.shortcuts

[dmackerman]

@iusfof We ended up extending the Component like so:

import { DateRangeInput } from '@blueprintjs/datetime';

class DateRangeInputShortcuts extends DateRangeInput {
  static getDerivedStateFromProps(props, state) {
    const { selectedShortcutIndex } = props;
    if (typeof selectedShortcutIndex === 'number') {
      return { ...state, selectedShortcutIndex };
    }

    return state;
  }

  handleShortcutChange = (shortcut, selectedShortcutIndex) => {
    const { onShortcutChange } = this.props;
    if (onShortcutChange) {
      onShortcutChange(shortcut, selectedShortcutIndex);
    }
    this.setState({ selectedShortcutIndex });
  };
}

export default DateRangeInputShortcuts;