vue element-ui DatePicker 日期选择器

1. 通用传参：不带时-分-秒

通用传参，不带时-分-秒

// 1. 这种直接按element ui组件，更简单些，建议用第一种
<el-form
        class="inline-form"
        ref="queryForm"
        :model="queryForm">
  <el-form-item label="添加时间"  prop="time">
            <el-date-picker class="green-hover"
                            popper-class="green-selected"
                            v-model="queryForm.time"
                            style="width:300px"
                            type="daterange"  // 数据类型
                            value-format="yyyy-MM-dd"  // 格式化数据类型
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
  </el-form-item>
</el-form>

data () {
  queryForm:{
    time: [],
}
methods:{
    onSearch(){
      const params = {
        // 直接向后台传参
        KSSJ: this.queryForm.time[0],
        JSSJ: this.queryForm.time[1],
      }
    }
  }
}

// 2. 这种添加了点击事件，转换了下，麻烦点
<el-form
        class="inline-form"
        ref="queryForm"
        :model="queryForm">
  <el-form-item label="添加时间"  prop="time">
            <el-date-picker class="green-hover"
                            popper-class="green-selected"
                            v-model="time"
                            style="width:300px"
                            type="daterange" // 数据类型
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            @change="examDataChange"></el-date-picker>
          </el-form-item>
</el-form>

data () {
    time: '',
    queryForm: { 
         // 这里的值是要传给后端的，和后端要传的保持一致
         KSSJ: '',   
         JSSJ: '' 
  },
methods:{
    // 时间change
    examDataChange () {
      this.queryForm.KSSJ= this.time[0]
      this.queryForm.JSSJ= this.time[1]
      }
  }
}

2. 通用传参：日期后面加上 时-分-秒

通用传参，日期后面加上 时-分-秒

// 1. 这种直接按element ui组件，更简单些
<el-form
        class="inline-form"
        ref="queryForm"
        :model="queryForm">
  <el-form-item label="添加时间"  prop="time">
            <el-date-picker class="green-hover"
                            popper-class="green-selected"
                            v-model="queryForm.time"
                            style="width:300px"
                            type="daterange"  // 数据类型
                            value-format="yyyy-MM-dd HH:mm:ss" // 日期格式化加上 时-分-秒
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="['00:00:00', '23:59:59']" // 主要是这行代码>
            </el-date-picker>
  </el-form-item>
</el-form>

data () {
  queryForm:{
    time: [],
}
methods:{
    onSearch(){
      const params = {
        // 直接向后台传参
        KSSJ: this.returnMed.time[0],
        JSSJ: this.returnMed.time[1],
      }
    }
  }
}

// 同理，添加点击事件的方法，直接参考 通用传参 的第二种直接传值方法

3. 带快捷选项的日期

带快捷选项的日期

<el-date-picker
            v-model="queryParam.data"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
</el-date-picker>

data () {
  const pickerOptions = {
      shortcuts: [{
        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])
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
return{
  queryForm:{
    data: [],
  }
  pickerOptions: pickerOptions, // 赋值
},
methods:{
    onSearch(){
      const params = {
        // 直接向后台传参
         KSSJ: this.queryParam.data[0],
        JSSJ: this.queryParam.data[1],
      }
   }

4. 带快捷选项的日期(封装组件)

// 1. 在src目录下新建文件夹

// 日期选择器快捷选项
export const datePickerOptions = {
  shortcuts: [
    {
      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])
      },
    },
    {
      text: '最近一年',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
        picker.$emit('pick', [start, end])
      },
    },
  ]
}

<el-date-picker
            v-model="queryParam.data"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
</el-date-picker>

// 2. 在当前文件中引入进来
import utils from '@/assets/js/utils'
import { datePickerOptions } from '@/assets/js/validator'
export default {
data () {
  return{
    queryForm:{
    data: [],
  }  
    pickerOptions: datePickerOptions, // 赋值
  },
  methods:{
    onSearch(){
      const params = {
        // 直接向后台传参
         KSSJ: this.queryParam.data[0],
        JSSJ: this.queryParam.data[1],
        // 以下传参是带手动加上的时分秒
        KSSJ: this.queryParam.data && utils.formatDate(this.queryParam.data[0], 'yyyy-MM-dd 00:00:00'),
        JSSJ: this.queryParam.data && utils.formatDate(this.queryParam.data[1], 'yyyy-MM-dd 23:59:59'),
      }
   }
}
}