Question

我正在尝试针对不同情况显示不同的日期选择器/日历。我需要以下类型，并遇到了calendarAs属性，但找不到实现该示例的任何示例。

我想要... -日期时间选择器（不确定是否可用） -日期选择器（默认情况下附带的那个） -月选择器 -年选择器 -Quarter Picker（不确定是否可用）

Answer 1

下面是一个CodePen，可帮助您开始使用calendarAs：https://codepen.io/naethell/pen/eYOLxGb。

它看起来像这样：

    <DatePicker 
      firstDayOfWeek={firstDayOfWeek} 
      strings={DayPickerStrings} 
      placeholder="Select a date..." 
      ariaLabel="Select a date"
      calendarAs={
        () =>
        <Calendar
          onSelectDate={this._onSelectDate}
          onDismiss={this._onDismiss}
          isMonthPickerVisible={false}
          dateRangeType={DateRangeType.Day}
          autoNavigateOnSelection={false}
          showGoToToday={true}
          value={this.state.selectedDate!}
          firstDayOfWeek={this.state.firstDayOfWeek}
          strings={DayPickerStrings}
          showSixWeeksByDefault={true}
        />
      }
    />

要查看在Fabric演示页面上的每个DatePicker示例中传递了哪些道具，建议您查看Calendar.doc.tsx文件：https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Calendar/Calendar.doc.tsx。

如何在Fabric用户界面的DatePicker组件中使用calendarAs属性？

1 个答案: