启用特定日期的 DatePicker

Question

我正在使用 Office Fabric 建立一个网站 UI 但没有找到一种方法来启用 DatePicker 组件中的特定日期（并禁用所有其他日期）。

我的堆栈由 Nodejs 和 React 组成，因此我使用的是 office-ui-fabric-react 包。这是我的：

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

我认为 pickadate.js 可以这样实现：

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

但我真的不明白如何将该脚本与 React 组件连接起来……有什么想法吗？我错过了什么吗？

谢谢！

P.S.: 我知道日历组件实现了一个 restrictedDates 属性来禁用日期数组。但我正在尝试使用 DatePicker 做相反的事情（禁用所有内容并启用某些内容）。

Answer 1

坏消息：您要求的（“仅启用特定日期”）似乎不受支持。

好消息：可能仍然有办法解决这个问题。

<DatePicker> accepts a calendarProps prop. And <Calendar> 接受 restrictedDates 道具。这允许您排除某些日期（与您的请求相反），但您可以通过排除所有其他日期来表达您想要的日期。查看文档了解具体语法。

启用特定日期的 DatePicker

Enable specific days of DatePicker

javascript

calendar

reactjs

pickadate

office-ui-fabric