React-Datepicker：如何在按钮上格式化展示startDate与endDate

直接将startDate和endDate两个日期对象相加的方式是错误的，这会导致日期对象被强制转换为无效字符串（如[object Date][object Date]），无法被format函数正确解析。以下是两种符合你需求的实现方式：

方式一：MM dd ~ MM dd格式 #

分别对两个日期进行格式化后拼接：

<button className="example-custom-input" onClick={handleClick}>
  {format(startDate, "MM dd")} ~ {format(endDate, "MM dd")}
</button>

方式二：start:'MM dd' ~ end:'MM dd'格式 #

添加起始/结束标识后拼接格式化后的日期：

<button className="example-custom-input" onClick={handleClick}>
  start:{format(startDate, "MM dd")} ~ end:{format(endDate, "MM dd")}
</button>

额外提示：处理结束日期为空的情况 #

如果endDate可能未被选中（为空），可以添加条件判断避免展示无效内容：

<button className="example-custom-input" onClick={handleClick}>
  {format(startDate, "MM dd")}
  {endDate && ` ~ ${format(endDate, "MM dd")}`}
</button>

内容的提问来源于stack exchange，提问作者iseank