How to use the @commercetools-uikit/calendar-utils.getToday function in @commercetools-uikit/calendar-utils

To help you get started, we’ve selected a few @commercetools-uikit/calendar-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github commercetools / ui-kit / src / components / inputs / date-range-input / date-range-input.js View on Github external
props.intl.locale !== state.prevLocale;

    if (!shouldUpdateInputValue) return null;

    return {
      prevLocale: props.intl.locale,
      // This is not the input value but the actual value passed to
      // DateRangeCalendar
      prevValue: props.value,
      inputValue: formatRange(props.value, props.intl.locale),
    };
  }
  inputRef = React.createRef();
  state = {
    calendarDate:
      this.props.value.length === 2 ? this.props.value[0] : getToday(),
    suggestedItems: [],
    startDate: null,
    highlightedIndex: null,
    isOpen: false,
    inputValue: formatRange(this.props.value, this.props.intl.locale),
    prevValue: this.props.value,
    prevLocale: this.props.intl.locale,
  };
  jumpMonth = amount => {
    this.setState(prevState => {
      const nextDate = changeMonth(prevState.calendarDate, amount);
      return { calendarDate: nextDate, highlightedIndex: 0 };
    });
  };
  showToday = () => {
    const today = getToday();
github commercetools / ui-kit / src / components / inputs / date-input / date-input.js View on Github external
clearSelection,

          highlightedIndex: downshiftHighlightedIndex,
          openMenu,
          setHighlightedIndex: setDownshiftHighlightedIndex,
          selectedItem,
          isOpen,
          inputValue,
        }) => {
          const calendarItems = createCalendarItems(calendarDate, intl);

          const paddingDayCount = getPaddingDayCount(calendarDate, intl.locale);
          const paddingDays = Array(paddingDayCount).fill();

          const weekdays = getWeekdayNames(intl.locale);
          const today = getToday();

          return (
            <div>
               {
                    // we remove the highlight so that the user can use the
                    // arrow keys to move the cursor when hovering
                    if (isOpen) setDownshiftHighlightedIndex(null);
                  },</div>
github commercetools / ui-kit / src / components / inputs / date-input / date-input.js View on Github external
}
            } else {
              // input changed because user selected a date
              setSuggestedItems([]);
              setHighlightedIndex(null);
            }
          }

          if (changes.hasOwnProperty('highlightedIndex')) {
            setHighlightedIndex(changes.highlightedIndex);
          }

          // ensure calendar always opens on selected item, or on current
          // month when there is no selected item
          if (changes.hasOwnProperty('isOpen') && changes.isOpen) {
            setCalendarDate(props.value === '' ? getToday() : props.value);
          }
          /* eslint-enable no-prototype-builtins */
        }}
      >
github commercetools / ui-kit / src / components / inputs / date-range-input / date-range-input.js View on Github external
setHighlightedIndex,
            isOpen,
            inputValue,
          }) =&gt; {
            const calendarItems = createCalendarItems(
              this.state.calendarDate,
              this.props.intl
            );
            const allItems = [...this.state.suggestedItems, ...calendarItems];

            const paddingDayCount = getPaddingDayCount(this.state.calendarDate);
            const paddingDays = Array(paddingDayCount).fill();

            const weekdays = getWeekdayNames(this.props.intl.locale);

            const today = getToday();

            return (
              <div>
                 {
                      // we remove the highlight so that the user can use the
                      // arrow keys to move the cursor when hovering
                      if (isOpen) setHighlightedIndex(null);
                    },</div>
github commercetools / ui-kit / src / components / inputs / date-input / date-input.js View on Github external
const DateInput = props => {
  const intl = useIntl();
  const [calendarDate, setCalendarDate] = React.useState(
    props.value || getToday()
  );
  const [suggestedItems, setSuggestedItems] = React.useState([]);
  const [highlightedIndex, setHighlightedIndex] = React.useState(
    props.value === '' ? null : getDateInMonth(props.value) - 1
  );
  const inputRef = React.useRef();

  const { onChange } = props;
  const emit = React.useCallback(
    value =>
      onChange({
        target: {
          id: props.id,
          name: props.name,
          // when cleared the value is null, but we always want it to be an
          // empty string when there is no value.
github commercetools / ui-kit / src / components / inputs / date-input / date-input.js View on Github external
const showToday = () => {
    const today = getToday();
    setCalendarDate(today);
    setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
    inputRef.current.focus();
  };
github commercetools / ui-kit / src / components / inputs / date-range-input / date-range-input.js View on Github external
showToday = () => {
    const today = getToday();
    this.setState(
      prevState => ({
        calendarDate: today,
        highlightedIndex:
          prevState.suggestedItems.length + getDateInMonth(today) - 1,
      }),
      () => this.inputRef.current.focus()
    );
  };
  handleBlur = () => {