如何将动态日期时间选择器添加到我的应用程序？

【问题标题】：How can I add a dynamic date time picker to my app?如何将动态日期时间选择器添加到我的应用程序？
【发布时间】：2021-06-22 05:08:37
【问题描述】：

我正在尝试创建一个支持在线预订/预订系统的网络应用。我想创建一个动态日期选择器，允许用户根据可用性选择一些特定日期。

假设可用日期的数据存储在数组slots 中。如何修改日期选择器以仅允许用户从这些日期集中进行选择，同时禁用其余日期。

我正在使用来自 @material-ui/pickers 的 DatePicker，我找到了 disablePast，它禁用了所有以前的日期，但找不到任何适合我用例的道具。

谁能帮帮我？

【问题讨论】：

DatePicker 有shouldDisableDate。也许这个答案有帮助：stackoverflow.com/a/49492979/13199774
感谢分享！

标签： javascript reactjs

【解决方案1】：

您可以为此做的是，您可以使用 shouldDisableDate 道具，您必须在其中传递一个接受 date 作为参数的函数并返回布尔值 true/false 是否应该呈现日期或不是。

例如：

在组件的 shouldDisableDate 属性中，您可以传递这样的函数

<DatePicker  
  shouldDisableDate={renderDateFunction}
  ...

然后将函数定义为

const renderDateFunction = (renderDate) => {
    
   // If the current date passed to this function is included in the slots
   // then enable selection of that date
   if(slots?.includes(renderDate)) return true;

   // else prevent the user from selecting that date
    return false;
  };

您可以从此处的文档中阅读有关 DatePicker 组件 API 的更多信息：https://material-ui-pickers.dev/api/DatePicker

【讨论】：

这正是我想要的，谢谢。