时间戳

首页 > 解决方案 > Vue材料日期选择器清除日期后更改格式

vue.js - Vue材料日期选择器清除日期后更改格式

问题描述

我有一个 DatePicker 组件，如下所示：

<div class="date-picker">
   <md-datepicker v-model="monthStart" md-immediately>
      <label>From</label>
   </md-datepicker>
</div>

像monthStart这样定义：

data() {
    return {
      monthStart: moment()
        .startOf("month")
        .format("YYYY-MM-DD"),

现在，当我第一次打开页面时 DatePicker 默认为2020-11-01，如果我触发使用monthStart它的方法，则会2020-11-01在请求中发送。如果我更改 DatePicker 中的日期而不做任何其他事情，这也可以正常工作。但是，如果我首先 X 出日期，因此 DatePicker 为空白，然后选择一个新日期，它仍然2020-11-01在 DatePicker 字段中显示，但是当我触发该方法时，请求中发送的日期显示为Wed Nov 11 2020 00:00:00 GMT+0100。如何设置 DatePicker 的格式，以便我选择的日期始终采用“YYYY-MM-DD”格式？

标签： vue.jsdatepickervue-material

解决方案

答案只是添加:md-model-type="String"到文档底部（https://vuematerial.io/components/datepicker/）中描述的 DatePicker ：

   <div class="date-picker">
       <md-datepicker v-model="monthStart" md-immediately :md-model-type="String">
          <label>From</label>
       </md-datepicker>
    </div>

推荐阅读