显示订单何时交付并禁用无法在 react-datepicker 中进行交付的日期

Question

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

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

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

问题是公司的送货卡车在特定的日子去特定的地点。例如，星期一他们去位置 1，星期二他们去位置 2。

当获得新客户（又名用户）时，他们会为该用户分配 day/s。例如，如果用户 A 位于位置 1，他们将被分配到星期一，如果用户 B 位于位置 2，他们将被分配到星期二。

我从 auth0 获得的数据 user_metadata。所以我收到了数据。

我搜索和研究并在 Whosebug 上找到了这个 post：。

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

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

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

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

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

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

这里是 link 到 github 回购如果有帮助的话（linking 到 codesandbox 代码所在的组件）：

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

在此先感谢您的帮助或指导。

Answer 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，您可以直接使用它。如果它是像“星期一”、“星期日”这样的字符串值，您可以使用 Moment.js:

将其解析为工作日数字

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

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

否则（如果它像“mon”、“sun”），您可能需要自己编写一个 returns 星期几的函数。

据我了解，如果用户在 his/her 送货工作日订购，一周后就会送达，否则 - 下一个送货工作日。你可以用这样的函数来确定

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/

祝你好运

显示订单何时交付并禁用无法在 react-datepicker 中进行交付的日期

Display when order will be delivered & disable days deliveries can't be made in react-datepicker

javascript

momentjs

reactjs

auth0

react-dates