我如何以格式（YYYY-MM-DD）獲取時刻格式日期選擇器的值

Question

我有一個包含 ant-design-vue 返回的 datepicker 的 vue 應用程序

Moment {…}
_d: Thu Oct 24 1996 00:00:00 GMT+0800 (Malaysia Time)
_f: "YYYY-MM-DD"
_i: "1996-10-15"
_isAMomentObject: (...)
_isUTC: (...)
_isValid: (...)
_locale: (...)
_pf: (...)
__ob__: Observer {value: Moment, dep: Dep, vmCount: 0}
get _d: ƒ reactiveGetter()
set _d: ƒ reactiveSetter(newVal)
get _f: ƒ reactiveGetter()
set _f: ƒ reactiveSetter(newVal)
get _i: ƒ reactiveGetter()
set _i: ƒ reactiveSetter(newVal)
get _isAMomentObject: ƒ reactiveGetter()
set _isAMomentObject: ƒ reactiveSetter(newVal)
get _isUTC: ƒ reactiveGetter()
set _isUTC: ƒ reactiveSetter(newVal)
get _isValid: ƒ reactiveGetter()
set _isValid: ƒ reactiveSetter(newVal)
get _locale: ƒ reactiveGetter()
set _locale: ƒ reactiveSetter(newVal)
get _pf: ƒ reactiveGetter()
set _pf: ƒ reactiveSetter(newVal)
__proto__: Object

我需要YYYY-MM-DD的日期格式

使用此代碼直接從 onChange 事件獲得成功。

function(date = moment, dateString) {
      if (date) {
        console.log(dateString)
}

但在我的項目中，我正在使用 v-decorator，其中通過表單獲取所有數據。 這是我嘗試調用日期的腳本：

this.form.validateFields((error, values) => {
          console.log(values.birthday);
)}

這是我的日期選擇器結構：

<a-form-item v-bind="formItemLayout" label="Date Of Birth">
    <a-date-picker
     v-decorator="[ 'birthday',
      {
       initialValue: moment(profile.birthday),
        rules: [{required: true, message: 'Date Of Birth is required.'}]
      },
     ]"
       @change="handleAge"
       format="DD/MM/YYYY"
      style="width:120px;"
      />
     </a-form-item>

它返回上述時刻。 我怎樣才能得到 YYYY-MM-DD 格式？

Answer 1

你試過下面這個嗎？ 它

對於初始渲染 initialValue：moment(profile.birthday).format("YYYY-MM-DD")

<a-form-item v-bind="formItemLayout" label="Date Of Birth">
<a-date-picker
 v-decorator="[ 'birthday',
  {
    rules: [{required: true, message: 'Date Of Birth is required.'}],
    initialValue: moment(profile.birthday).format("YYYY-MM-DD"),
  },
 ]"
   @change="handleAge"
   format="DD/MM/YYYY"
  style="width:120px;"
  />
 </a-form-item>

提交：

this.form.validateFields((error, values) => {
     let birthday = moment(values.birthday).format("YYYY-MM-DD");

          console.log(birthday);
)}

讓我知道它是否適合您，以及您是否需要更多說明。

Answer 2

在 ant-design 中， Datepicke默認返回 moment 對象作為值，所以我使用了一些邏輯來僅返回 moment 對象中的 Date 值。 這是您如何以 YYYY-MM-DD 格式返回日期。

創建一個函數來改變矩對象以返回YYYY-MM-DD格式的唯一日期

以下是您在項目中的做法：

const convert = (str) => {
    var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
    return [date.getFullYear(), mnth, day].join("-");
  };

this.form.validateFields((error, values) => {
    console.log(convert(values.birthday));
)}