如何格式化从 Element-UI 收到的日期

Question

我正在使用 Element Ui 中的日期选择器，用户可以在其中 select 日期范围。当用户填写日期选择器时，这就是我得到的结果： ['2018-01', '2019-02'] 。所以只是一个包含两个 String 元素的数组。不是 Date() 对象。

动态输出给用户时，我想显示为：January 2018 - February 2019

我在我的项目中得到了一些工作，但代码真的很糟糕而且也不能正常工作。检查此 gif of my current project and somewhat desired result. I was wondering if someone knows a good and easy way of achieving my desired result without too much hassle. I cannot use methods like toLocaleDateString() because it isn't a Date() object. I've got my code working in a Codesandbox。如果你们知道解决方案，请随时编辑列出的 Codesandbox，我将不胜感激！

在 Codesandbox 中我得到了一个计算属性 formateDate。计算的属性的基本思想是在 - 之前和之后切割我从 datepicker 返回的数组元素，有效地给我第一个月和第二个月以及第一个月和第二个月年。我存储在这些变量中的数据：

let monthOne;
let monthTwo;
let yearOne;
let yearTwo;

例如，由于我将月份返回为 '01' 和 '02'，因此我创建了一个对象数组以将 '01' 和 '02' 转换为 January 和 February 与 for 循环。然后我将结果存储在一个新变量中：

displayDate = monthOne + ' ' + yearOne + ' - ' + monthTwo + ' ' + yearTwo;

最后，我尝试将该结果存储到 timeperiodDisplayString 对象数组 experience 中正确的索引处。不管怎样，我可能把这种方式复杂化了，所以我真的很感激任何帮助。

Answer 1

也许您可以映射日期选择器组件的结果以创建日期对象数组。所以你可以使用 toLocaleDateString()

像这样的东西应该可以工作：

['2018-01', '2019-02'].map((date) => { 
    const split = date.split('-'); 

    return new Date(split[0], +split[1] - 1); 
});

Answer 2

您可以使用 javascript 中的 parse() 函数。

 var d = Date.parse("2019-01");
 console.log(new Date(d));

如何格式化从 Element-UI 收到的日期

How to format Date received from Element-UI

vue.js

vuejs2

element-ui