【VUE】el-date-picker日期选择器回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了【VUE】el-date-picker日期选择器回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.日期选择器回显

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

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

【VUE】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”

【VUE】el-date-picker日期选择器回显

造成原因：

原因为页面有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 文章来源地址https://www.toymoban.com/news/detail-514406.html

到了这里，关于【VUE】el-date-picker日期选择器回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！