Question

分为两个部分，首先，我一直在尝试更改日历的startDate格式。我研究了如何操作.toLocaleString()，但似乎无法重新格式化日期（MDN Docs）。

<a onClick={toggleDate} className="date-picker-toggler">
  {state.startDate && state.startDate.toLocaleString()} / {state.endDate && state.endDate.toLocaleString()} 
  <i className="fal fa-calendar"></i>
</a>

第二，是否可以添加占位符值？目前为空，在选择日期之前仅显示“ /”。

Answer 1

如果日期对象是普通js日期类型，则

.toLocaleDateString将起作用。您还可以指定语言环境（例如de）：

<a onClick={toggleDate} className="date-picker-toggler">
  {state.startDate && state.endDate
    ? `${state.startDate.toLocaleDateString('de')} / ${state.endDate.toLocaleDateString('de')}`
    : 'Default value'}
  <i className="fal fa-calendar"></i>
</a>

Answer 2

如果您同时拥有startDate和endDate，则此表达式将显示格式化的日期：

(state.startDate && state.endDate) ? (state.startDate && state.startDate.toLocaleString() / state.endDate && state.endDate.toLocaleString()) : "placeholder"

在示例中，两个日期的存在由(state.startDate && state.endDate)检查。如果此表达式正确，则?之后的表达式将被评估并生成您选择的日期格式。否则，:之后的部分将用作占位符。

更改日期格式并添加占位符日期

2 个答案: