【问题标题】:reactjs datepicker date formatreactjs datepicker日期格式
【发布时间】:2019-08-11 18:26:32
【问题描述】:

ReactJS 初学者,我现在使用很棒的 ReactJS Datepicker。关于我的自定义日期格式的问题:

  1. 我发现没有文档可以解释所有可能性,例如 M 是月份,MM 是 2 个字母的月份等(我应该查看 github 代码吗?哪个来源?)
  2. 如何添加一天的名称...比如星期六。我试过 dddd 但它显示的日期前有 2 个前导 0 !!
  3. 如何排除非办公时间(如 0 到 8 和 20 到 23 小时),我尝试了下面的 excludesTimes 但没有办法。

这是我的代码:

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    locale={fr}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={60}
    dateFormat="dddd, DDD, ddd, d, dd MMMM yyyy à HH'h'mm"
    timeCaption="Heure"
    minDate={new Date()}
    showDisabledMonthNavigation
    placeholderText="Choisir ici ..."
    excludeTimes={[0, 1, 2, 3, 4]}
/>

输入字段中显示的日期是:

0023, 082, 023, 23, 23 mar 2019 à 20h00

谢谢

【问题讨论】:

标签: reactjs date datepicker


【解决方案1】:

React datepicker 使用 Moment.js 作为日期,我认为您应该查看his website 的文档。

例如,MMMM Do YYYY, h:mm:ss a 应返回格式为 March 21st 2019, 8:50:37 am 的日期。

编辑

我去了 repo,似乎作者从包中删除了时刻,所以我尝试了找到 here 的格式化日期指南,它似乎现在可以工作了!例如,如果您想要一周中的哪一天,请使用“eeee”。

我在codesandbox 做了一个工作示例。

【讨论】:

  • 感谢您的帮助,但它没有解决.. 使用 dateFormat="MMMM Do YYYY, h:mm:ss a" ,它显示“2019 年 3 月 81 日,晚上 8:43:14” ..而我按照您的要求运行“npm install moment..您能提供更多线索吗?
  • 我去了 repo,似乎作者删除了那一刻,所以我尝试了找到 here 的格式化日期指南,它现在似乎正在工作!例如,如果您想要星期几,请使用“eeee”。我在codesandbox 为你做了一个工作示例。
  • PERFECT,你解决它!可惜必须看代码才能理解软件的使用..但这就是现在的生活!我们可以将此票标记为已解决(注意解决方案在前面的评论中,而不是关于 moment.js 的答案的开头)。
  • 糟糕的文档库是一场瘟疫...如果您想将其标记为已批准的解决方案,我编辑了答案:)
  • 来自@PabloHuetCarrasco 的链接已过时。作者使用format from date-fns package
【解决方案2】:

您也可以手动转换...

  const convertDate = str => {
  str = str.toString();
  let parts = str.split(" ");
  let months = {
    Jan: "01",
    Feb: "02",
    Mar: "03",
    Apr: "04",
    May: "05",
    Jun: "06",
    Jul: "07",
    Aug: "08",
    Sep: "09",
    Oct: "10",
    Nov: "11",
    Dec: "12"
  };
  return parts[3] + "-" + months[parts[1]] + "-" + parts[2];
};

:) 重新发明轮子

【讨论】:

    猜你喜欢
    • 2015-03-13
    • 2012-04-01
    • 2022-01-11
    • 2014-01-04
    • 2016-06-03
    • 2023-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多