office-ui-fabric-react#DayOfWeek TypeScript Examples

function DateTimePicker(props: DateTimePickerProps) {
  function getDatePickerStrings(): IDatePickerStrings {
    const localeData = moment.localeData();
    return {
      months: localeData.months(),
      shortMonths: localeData.monthsShort(),
      days: localeData.weekdays(),
      shortDays: localeData.weekdaysMin(),
      goToToday: translate('datePicker.goToToday'),
      prevMonthAriaLabel: translate('datePicker.previousMonth.ariaLabel'),
      nextMonthAriaLabel: translate('datePicker.nextMonth.ariaLabel'),
      prevYearAriaLabel: translate('datePicker.previousYear.ariaLabel'),
      nextYearAriaLabel: translate('datePicker.nextYear.ariaLabel'),
      closeButtonAriaLabel: translate('datePicker.close.ariaLabel'),
    };
  }

  function onDayPicked(date: Date | null | undefined) {
    const currentDateTime = moment(props.dateTime);

    const offsetFromStartOfDay = currentDateTime.diff(
      moment(currentDateTime).startOf('day')
    );
    const newDateTime = moment(date ?? currentDateTime)
      .startOf('day')
      .add(offsetFromStartOfDay);

    props.onTimeUpdated(newDateTime);
  }

  function onTimePicked(
    event: React.FormEvent<IComboBox>,
    option?: IComboBoxOption,
    index?: number,
    value?: string
  ) {
    const currentDateTimeStartOfDay = moment(props.dateTime).startOf('day');

    let newDateTime: moment.Moment;
    if (option) {
      const offsetFromStartOfDay = moment.duration(option.key, 'minutes');
      newDateTime = currentDateTimeStartOfDay.add(offsetFromStartOfDay);
    } else {
      // User entered a free-form string, try to parse it as a time
      const enteredTime = moment(value, timePickerFormat);
      if (enteredTime.isValid()) {
        const offsetFromStartOfDay = enteredTime.diff(
          moment(enteredTime).startOf('day')
        );
        newDateTime = currentDateTimeStartOfDay.add(offsetFromStartOfDay);
      } else {
        newDateTime = moment(props.dateTime);
      }
    }

    props.onTimeUpdated(newDateTime);
  }

  function onFormatDate(dateToFormat?: Date): string {
    return moment(dateToFormat).format(datePickerFormat);
  }

  function onParseDateFromString(value: string): Date {
    return moment(value, datePickerFormat).toDate();
  }

  const timeSuggestions = _.range(0, 1440, 30).map(minutes => {
    // if the selection is before the min value
    const projectedEndTime = moment(props.dateTime)
      .startOf('day')
      .add(moment.duration(minutes, 'minutes'));
    const isDisabled = moment(props.minDate).isAfter(projectedEndTime);
    const timeTag = moment()
      .startOf('day')
      .minutes(minutes)
      .format(timePickerFormat);
    const projectedDuration = moment.duration(
      moment(projectedEndTime).diff(props.minDate)
    );
    const projectedDurationString = _.trim(formatDuration(projectedDuration));

    return {
      key: minutes,
      text:
        props.includeDuration &&
        !isDisabled &&
        projectedDurationString.length > 0
          ? `${timeTag} (${projectedDurationString})`
          : timeTag,
      disabled: isDisabled
    };
  });

  return (
    <Stack horizontal>
      <DatePicker
        className="newMeetingDatePicker"
        borderless
        firstDayOfWeek={moment.localeData().firstDayOfWeek() as DayOfWeek}
        strings={getDatePickerStrings()}
        value={props.dateTime?.toDate()}
        formatDate={onFormatDate}
        parseDateFromString={onParseDateFromString}
        onSelectDate={onDayPicked}
        minDate={props.minDate?.toDate()}
      />
      <ComboBox
        className="newMeetingComboBox"
        styles={{ root: { maxHeight: '500px' } }}
        useComboBoxAsMenuWidth={!props.includeDuration}
        scrollSelectedToTop={true}
        allowFreeform={true}
        autoComplete="on"
        options={timeSuggestions}
        onChange={onTimePicked}
        text={props.dateTime?.format(timePickerFormat)}
      />
      {props.iconName === 'ReplyAlt' ? (
        <FontIcon className="newMeetingPickerIcon" iconName={props.iconName} />
      ) : (
        <Text className="newMeetingPickerIncrement" variant="smallPlus">
          {formatDuration(
            moment.duration(moment(props.dateTime).diff(moment(props.minDate)))
          )}
        </Text>
      )}
    </Stack>
  );
}