office-ui-fabric-react#IDatePickerStrings TypeScript Examples

The following examples show how to use office-ui-fabric-react#IDatePickerStrings. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MeetingPage.tsx    From msteams-meetings-template with MIT License 4 votes vote down vote up 
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>
  );
}