Element中From表单（活动时间）的说明

1、在一些项目中，可能会需要用户选择时间或更改时间，此篇文章主要是来说明下图中红色内容和蓝色内容的设置。

2、样式图：

3、代码说明：

第一种情况：默认Element中的样式都是蓝色框的形式，代码如下：

<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          date1: '',
          date2: ''
        }
      }
    }
  }
</script>

第二种情况： 上图红色框内容，即默认显示当前时间：

代码如下：

 

注： today的设置如下：

 util.js中的文件：

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  if(time==null){
    return ''
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return timeStr
}

 以上即为显示当前时间或默认开始（结束）时间的方法。