CODEWITHSUNDEEP
office-ui-fabric
Ashit Vora
Ashit Vora

Reputation: 2922

How to use calendarAs property in DatePicker Component of Fabric UI?

I am trying to show different datepicker/calendar for different scenarios. I need the following types and came across calendarAs property but couldn't find any example for implement that.

I would like to have... - Date Time Picker (not sure if this is available) - Date Picker (the one that comes by default) - Month Picker - Year Picker - Quarter Picker (not sure if this is available)

Upvotes: 0

Views: 896

Answers (1)

Natalie Ethell
Natalie Ethell

Reputation: 11

Here's a CodePen to get you started with using calendarAs: https://codepen.io/naethell/pen/eYOLxGb.

It looks something like this:

    <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}
        />
      }
    />

To see which props are passed into each DatePicker example on the Fabric demo page, I'd suggest taking a look at the Calendar.doc.tsx file: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Calendar/Calendar.doc.tsx.

Upvotes: 1

Related Questions