显示何时交付订单并禁用无法在 react-datepicker 中进行交付的天数答案

【问题标题】：Display when order will be delivered & disable days deliveries can't be made in react-datepicker显示何时交付订单并禁用无法在 react-datepicker 中进行交付的天数
【发布时间】：2020-08-09 09:31:25
【问题描述】：

我需要一些帮助，根据用户下订单的时间以及他们有资格收到订单的日期来显示下一个可用的交货日期。

我还需要一些帮助来禁用/过滤除用户有资格获得的交货日和未来交货日之外的所有工作日。

我正在使用 React、React-Datepicker、MomentJS 和 auth0。

问题在于，一家公司的送货卡车在特定日期会前往特定地点。例如，他们周一去位置 1，周二他们去位置 2。

当获得新客户（又名用户）时，他们会为该用户分配一天/秒。因此，如果 UserA 位于位置 1，他们将被分配到星期一，如果 UserB 位于位置 2，他们将被分配到星期二。

我从 auth0 的 user_metadata 中获得这些数据。所以我得到了数据。

我在stackoverflow上搜索和研究发现了这篇文章：https://stackoverflow.com/questions/34979051/find-next-instance-of-a-given-weekday-ie-monday-with-moment-js#:~:text=In%20a%20nutshell%2C%20you%20want,day(1)%20。

它允许我根据用户订购的日期获得下一个可用日期。

但我无法弄清楚如何应用它来动态显示消息。这意味着用户A将根据他的数据看到有关交货日期的信息，而用户B将根据他的数据看到有关交货日期的信息。

另一个问题是我可以使用 react-datepicker 过滤周末，但我不知道如何将这些 momentjs 函数应用于每个用户的 react-datepicker。

我用我的进度（不是很多进度）创建了一个代码框，我创建了两个用户但卡住了。

https://codesandbox.io/embed/dry-violet-trjrq?codemirror=1

如果我需要提供更多信息或更好地发布问题，请告诉我。

如果有帮助，这里是 github 存储库的链接（链接到代码和框代码所在的组件）：

https://github.com/Chizzah/core-water/blob/master/src/components/tableContainer/tableView.js

提前感谢您的帮助或指导。

【问题讨论】：

标签： javascript reactjs momentjs auth0 react-dates

【解决方案1】：

我假设 Auth0 的 user_metadata 对每个用户都是单独的，并且可以在组件内访问。假设您在 user_metadata.delivery 中传递用户的一周中的某一天

要使其与 react-datepicker 一起使用，您必须将工作日作为数字，星期一为 1，星期日为 7（ISO 星期日期标准）。然后，您将在日历下拉列表中仅提供用户交付工作日的日期：

<DatePicker
filterDate={(date) => date.getDay() === weekdayNo }
 *...your other props*
/>

也可能有一种方法可以使用 excludeDates 道具，尽管在这种情况下，这似乎是一个不太有效的选择： https://reactdatepicker.com/#example-exclude-dates

现在，如果您的 user_metadata.delivery 的值为 1-7，您可以直接使用它。如果是“Monday”、“Sunday”之类的字符串值，您可以使用 Moment.js 将其解析为工作日数字：

const weekdayNo = moment().isoWeekday(weekdayString).isoWeekday();

https://momentjscom.readthedocs.io/en/latest/moment/02-get-set/08-iso-weekday/

否则（如果它像“mon”、“sun”）您可能需要自己编写一个返回工作日数字的函数。

据我所知，如果用户是在他/她的送货工作日订购，它会在一周后到达，如果不是 - 下一个送货工作日。你可以用这样的函数来确定

function calculateDeliveryDate(weekdayNo){
    const todayNo = moment().isoWeekday();
    if (todayNo === weekdayNo) {
      return moment().add(1, "weeks");
    } else if (todayNo < weekdayNo) {
      return moment().add(weekdayNo - todayNo, "days");
    } else if (todayNo > weekdayNo) {
      return moment().add(7 - (todayNo - weekdayNo), "days");
    }   
};

或用三元组重构


    const todayNo = moment().isoWeekday();
    const nextWeekdayDate = (todayNo, weekdayNo) => {
      return todayNo < weekdayNo
        ? today.add(weekdayNo - todayNo, "days")
        : today.add(7 - (todayNo - weekdayNo), "days");
    };

    return todayNo === weekdayNo
      ? today.add(1, "weeks")
      : nextWeekdayDate(todayNo, weekdayNo);   
    };

这将为您返回一个日期对象，因此要向用户显示它，您可以使用 moment.js 对其进行格式化：

const deliveryDateString = moment(calculateDeliveryDate(weekdayNo)).format("DD MM YYYY", true).toString();

https://momentjs.com/docs/#/displaying/

祝你好运

【讨论】：