vue中element日期选择器+DateTimePicker

最新推荐文章于 2024-08-08 08:29:42 发布

% ゞ惜年〆

最新推荐文章于 2024-08-08 08:29:42 发布

阅读量1k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_50280782/article/details/121927639

版权

前端代码，注：传入后端格式（yyyy-MM-dd）

写法(一/二) 共用选择日期代码

     pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            // start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      },

        <el-form-item>
                    日期 :
                    <template>
                      <el-date-picker
                        v-model='dataRange'
                        type="daterange"
                        align="right"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 377px;padding-right: 0px;"
                        :picker-options="pickerOptions"
                        @change="changeDate"
                      >
                      </el-date-picker>
                    </template>
                  </el-form-item>

写法一（通过@change="changeDate"）方法改变时间

changeDate (dateArr) {
  if (dateArr == null) {
    this.dataForm.f_weightdate__start = null
    this.dataForm.f_weightdate__end = null
    return
  }
  this.dataForm.f_weightdate__start = new Date(dateArr[0]).formatDate()
//结束时间  +1 天     formatDate格式化日期
  this.dataForm.f_weightdate__end = new Date(dateArr[1] + 3600 * 1000 * 24).formatDate()
},

写法二：

//获取开始时间结束时间      
if (this.dataForm.fPlanDate === '' || this.dataForm.fPlanDate === null || this.dataForm.fPlanDate === undefined) {
        this.fPlanDateStart = ''
        this.fPlanDateEnd = ''
      } else {
        this.fPlanDateStart = this.dataForm.fPlanDate[0]
        this.fPlanDateEnd = this.dataForm.fPlanDate[1]
      }


//在后台请求接口时结束时间   getDate+1天  注:操作时都是Date类型
  'f_plan_date_start': new Date(this.fPlanDateStart).format('yyyy-MM-dd'),
        'f_plan_date_end': new Date(new Date(this.fPlanDateEnd).setDate(new Date(this.fPlanDateEnd).getDate()+1)).format('yyyy-MM-dd')