【VUE】el-date-picker常用属性及相关问题

1.日期选择器回显

使用elementUI - el-date-picker 日期选择器

在请求到后端接口后，返回的数据中，日期数据回显到页面的el-date-picker组件中

                            <el-date-picker
								v-model.trim="data"
								type="daterange"
								:value-format="dateFormat"
								range-separator="-"
							>
							</el-date-picker>

			getData().then((response) => {
				if (response.code == 200) {
					// 日期回显
					this.$set(this.data, 0, response.data.startDate);
					this.$set(this.data, 1, response.data.endDate);
				}
			});

1.  Vue.set( target, propertyName/index, value )

     数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值。

   

2. this.$set(this._data,”key”,value')
      对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值。

      target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值。

this.$set(变量名,下标,要赋的值) 

2.设置日期选择器不可手动输入，只能点选

给el-date-picker添加此属性

:editable="false"

例：

							<el-date-picker
								v-model="changeLogQueryParams.dateRang"
								type="daterange"
								value-format="yyyy-MM-dd HH:mm:ss"
								range-separator="-"
								:editable="false"
							>
							</el-date-picker>

3.设置日期选择器只能选择近180天内

							<el-date-picker
								v-model="changeLogQueryParams.dateRang"
								type="daterange"
								value-format="yyyy-MM-dd HH:mm:ss"
								range-separator="-"
								:start-placeholder="$t('common.startTime')"
								:end-placeholder="$t('placeholder.endTime')"
								:clearable="false"
								class="searchDateTimePicker"
								:picker-options="pickerOptions"
								:editable="false"
								:default-time="['00:00:00', '23:59:59']"
							>
							</el-date-picker>

data(){
    		minDate: '', //限制选择180天以内
			maxDate: '', //限制选择180天以内
			pickerOptions: {
				// 最多只能选择180天、且只能选择当日前日期
				onPick: ({ maxDate, minDate }) => {
					this.minDate = minDate;
					this.maxDate = maxDate;
				},
				disabledDate: (time) => {
					//查询时间跨度为180天
					if (this.minDate && !this.maxDate) {
						let range = 179 * 24 * 3600 * 1000;
						return (
							time.getTime() > Date.now() ||
							time.getTime() > this.minDate.getTime() + range ||
							time.getTime() < this.minDate.getTime() - range
						);
					}
					return time.getTime() > Date.now();
				},
			},
}

4.设置日期选择器选择日期后默认时间

:default-time="['00:00:00', '23:59:59']"

5.elementUI日期组件报错“dateStr.match is not a function”

造成原因： 

原因为页面有rules

不能和value-fomatter共存

需要删掉value-fomatter

使用@change 写格式转化函数代替

<el-date-picker
                v-model="form.cartWarrantyTime"
                type="date"
                placeholder="选择日期"
                :placeholder="$t('placeholder.select')"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :editable="false"  //设置不可编辑
              >
              </el-date-picker>
 
        rules: [
          {
            required: true,
            message: '请输入', {
              field: '输入错误',
            }),
            trigger: 'blur',
          },
        ],

注意

如果不加value-foemat，时间会是选定的时间前一天的16:00:00 

6. 格式化为yyyy-MM-dd HH:mm:ss

定义格式化js文件

export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{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)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    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 time_str = 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 time_str
}

在需要使用的地方引入

import { parseTime } from '../utils/utils.js';

 

				dateRang: [
					parseTime(
						new Date(new Date(new Date().toLocaleDateString()).getTime())
					),
					parseTime(
						new Date(
							new Date(
								new Date(new Date().toLocaleDateString()).getTime() +
									24 * 60 * 60 * 1000 -
									1
							).getTime()
						)
					),
				],


//将当天日期格式化为yyyy-MM-dd HH:mm:ss
parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime()))