日期格式Date类型转化String类型

页面

 <el-dialog :title="arrangeExamType==='add'?'新增考试计划':'编辑考试计划'" :visible.sync="arrangeExamDialogVisible" width="60%"
               :before-close="closeRefuseDialog"
               :close-on-click-modal="false">
      <el-form :model="arrangeForms" ref="arrangeExamForm" :inline="true" label-width="80px" class="mt15">
        <el-row>
          <el-col :span="8">
            <el-form-item label="机考编号" label-width="100px">:
              <span style="margin: 10px;font-weight: bold"> {{arrangeForms.computerNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类型" prop="industryTypeName">
              <Tree :default-props="defaultProps" :peop-type-name="arrangeForms.industryTypeName"
                    @rangeNodeClick="rangeNodeClickPlan"></Tree>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训类型" prop="trainType">
              <el-select v-model="arrangeForms.trainType" placeholder="培训类型">
                <el-option v-for="item in sysTrainTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-top: 20px;border-top: 1px solid #ebebeb;">
          <p>理论考试预安排</p>
          <el-col :span="12">
            <el-form-item label="选择考场" label-width="100px" prop="theoryExamId">
              <el-select v-model="arrangeForms.theoryExamId" placeholder="选择考场"
                         @change="changeAddress(arrangeForms.theoryExamId, '理论', LlExamAddressList)">
                <el-option v-for="(item, index) in LlExamAddressList" :key="item.serialId + index"
                           :label="item.serialNum" :value="item.serialId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试日期" label-width="100px" prop="theoryDate">
              <el-date-picker
                :clearable="false"
                v-model="theoryDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                @change="changeTime" //changeTime方法
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考场地址" prop="theoryExamName" label-width="100px">:
              <span> {{arrangeForms.theoryExamName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试时间" label-width="100px" prop="theoryTime">
              <el-time-picker
                is-range
                :clearable="false"
                v-model="theoryTime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="changeTime" //changeTime方法
                format="HH:mm"
                value-format="HH:mm:ss"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-top: 20px;border-top: 1px solid #ebebeb;">
          <p>实操考试预安排</p>
          <el-col :span="12">
            <el-form-item label="选择考场" label-width="100px" prop="operExamId">
              <el-select v-model="arrangeForms.operExamId" placeholder="选择考场"
                         @change="changeAddress(arrangeForms.operExamId, '实操', ScExamAddressList)">
                <el-option v-for="(item, index) in ScExamAddressList" :key="item.serialId + index" :label="item.serialNum"
                           :value="item.serialId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试日期" label-width="100px" prop="operDate">
              <el-date-picker
                :clearable="false"
                v-model="operDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                @change="changeTime"//changeTime方法
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考场地址" prop="operExamName" label-width="100px">:
              <span>{{arrangeForms.operExamName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试时间" label-width="100px" prop="operTime">
              <el-time-picker
                is-range
                v-model="operTime"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm:ss"
                @change="changeTime"//changeTime方法
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExam()">确 定</el-button>
      </span>
    </el-dialog>

声明变量

return{ //String类型
theoryDate: '', //理论考试日期
      operDate: '', //理论考试时间
      theoryTime: '', //实操考试日期
      operTime: '', //实操考试时间
}

时间获取

changeTime(time) {
      this.arrangeForms.theoryExamTimeStart = `${this.theoryDate} ${this.theoryTime[0]}`
      this.arrangeForms.theoryExamTimeEnd = `${this.theoryDate} ${this.theoryTime[1]}`
      this.arrangeForms.operExamTimeStart = `${this.operDate} ${this.operTime[0]}`
      this.arrangeForms.operExamTimeEnd = `${this.operDate} ${this.operTime[1]}`
    },

获取详情（日期获取）

getExaminationDetails(data) {
      this.arrangeExamDialogVisible = true;
      this.arrangeExamType = 'edit';
      examApi.getExaminationDetails({computerNumber: data.computerNumber}).then(res => {

        this.arrangeForms = res.data;
        //日期转化成String
        this.theoryDate = res.data.theoryExamTimeStart.split(' ')[0];
        this.theoryTime = [res.data.theoryExamTimeStart.split(' ')[1],res.data.theoryExamTimeEnd.split(' ')[1]];
        this.operDate = res.data.operExamTimeStart.split(' ')[0];
        this.operTime = [res.data.operExamTimeStart.split(' ')[1],res.data.operExamTimeEnd.split(' ')[1]];
      })
    },