【vue開發問題-解決方法】（五）vue Element UI 日期選擇器獲取日期格式問題 t.getTime is not a function

現有一表單需要填寫日期，采用了elementUI中日期選擇器，但是獲取到的數據格式是

Mon Jun 18 2018 00:00:00 GMT+0800 (中國標准時間)

而我需要的數據格式為

2018-06-18

查看elementUI文檔，有對應的解決方法：

使用 value-format設置獲取日期格式，使用format設置顯示日期格式。

 <el-date-picker v-model="p" type="date" placeholder="選擇日期" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日"></el-date-picker>

結果是

但是使用的時候出現了問題，因為我的日期選擇器是在表單中，此表單使用了rule驗證，這樣的話只要修改選擇器時間就會出現下面錯誤。

rule驗證規則是控制的change事件，與value-format沖突，導致getTime報錯。

date: [
          { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
      ],

所以我們使用@change事件來修改日期格式：

<el-form class="performance-month-form" :model="F" :rules="rules" ref="F" label-width="80px" label-position="left">
        <el-row>
            <el-col :span="12" :offset="5">
                <el-form-item label="考核周期">
                    <el-input v-model="cycle" readonly>{{cycle}}</el-input>
                </el-form-item>
                <el-form-item label="所屬部門" prop="dep">
                    <el-select v-model="F.dep" placeholder="請選擇所屬部門" :readonly="IsReadOnly.SSBM">
                        <el-option v-for="item in department" :key="item.name" :label="item.name" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="職位" prop="position">
                    <el-input type="text" v-model="F.position" :readonly="IsReadOnly.ZW"></el-input>
                </el-form-item>
                <el-form-item label="發起人" prop="initiator">
                    <el-input type="text" v-model="F.initiator" :readonly="IsReadOnly.FQR"></el-input>
                </el-form-item>
                <el-form-item label="登記日期" prop="date">
                    <el-date-picker v-model="F.date" type="date" placeholder="選擇日期" @change="getTime" :readonly="IsReadOnly.DJRQ"></el-date-picker>
                </el-form-item>
                <el-form-item class="text-right" v-if="init_data">
                    <el-button type="primary" @click="onSubmit('F')">立即創建</el-button>
                    <el-button @click="onCancel">取消</el-button>
                </el-form-item>
            </el-col>

        </el-row>

    </el-form>

 //日期格式轉化
            getTime(val) {
                const d = new Date(val);
                this.F.rdate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            },

這是處理表單中日期選擇器格式問題的一個小方法。

 

補充： 如果設置value-format="yyyy-MM-dd HH:mm:ss" 獲取日期格式為年月日時分秒。則初始化日期格式也應該為相同的格式，否則會報錯。