1

I'm setting up a website using Office Fabric UI but didn't found a way to enable specific days from the DatePicker component (and disable all the others).

My stack consists of Nodejs and React, thus I'm using the office-ui-fabric-react package. This is what I have:

<DatePicker
  isRequired={true}
  ariaLabel={"This field is required."}
  value={this.state.startDate}
  firstDayOfWeek={DayOfWeek.Monday}
  onSelectDate={this.handleDateChange}
/>

I think this can be achieve with pickadate.js this way:

picker.set('disable', true); // Disable all
picker.set('enable', enableDates); // Enable some

But I can't really understand how to connect that script with the React component... any ideas? Am I missing something?

Thank you!

P.S.: I know that the Calendar component implements a restrictedDates attribute to disable an array of dates. But I'm trying to do the opposite (disable everything and enable some) using the DatePicker.

benhid
  • 124
  • 1
  • 17

1 Answers1

5

The bad news: what you are asking for (“enable only certain dates”) doesn’t seem to be supported.

The good news: there still might be a way to tackle this.

<DatePicker> accepts a calendarProps prop. And <Calendar> accepts a restrictedDates prop. This allows you to exclude certain dates (the opposite of your request), but you might be able to express the dates you want by excluding all the others. Check out the docs for the specific syntax.

gscottolson
  • 126
  • 4
  • 1
    Thank you! This is the approach I've followed: exclude all the others dates with the `restrictedDates` prop by means of the Moment.js library (and `moment-range`) and specify the minimum/maximum allowable date with the `MinDate`/`MaxDate` props – benhid Mar 09 '19 at 12:59