方法一 (  采用选择器 type= datetimerange 默认获取内容为时间戳 )

<template>
  <div class="machineApp">
    <el-date-picker
      v-model="formInline.value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="timestamp"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        value1: this.getDateTime() //methods优先级高于data  (props==>methods==>data==>computed==>watch)
      }
    }
  },
  methods: {
    getDateTime() {
      return [new Date(new Date().getTime() - 3600 * 1000 * 24 * 7).getTime(), new Date().getTime()]
    }
  }
}
</script>

方法二 (  采用选择器 type= daterange 默认获取内容为  yyyy-MM-dd hh:mm:ss 例如:2022-07-18 07:59:29 )

<template>
  <div class="machineApp">
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="审批人">
        <el-date-picker v-model="formInline.value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        value1: []
      }
    }
  },
  created() {
    this.formInline.value1 = this.getNowTime()
  },
  methods: {
    //初始默认执行(重点)
    getNowTime() {
      const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
        .toISOString()
        .replace('T', ' ')
        .split('.')[0] //默认开始时间7天前
      const end = new Date(new Date().getTime() - 3600 * 1000 * 24)
        .toISOString()
        .replace('T', ' ')
        .split('.')[0]//默认结束时间1天前
      console.log([start, end])
      return [start, end]
    }
  }
}
</script>

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐