el-date-picker设置default-value

要设置 el-date-picker 的 default-value，可以在组件中使用 v-model 绑定一个日期变量，并将该变量初始化为默认值。例如：

<template>
  <el-date-picker v-model="date"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: new Date('2022-01-01')
    }
  }
}
</script>

这样，el-date-picker 组件就会默认显示 2022 年 1 月 1 日的日期。

相关问题

el-date-picker 设置default-value为 当天

你可以使用`default-value`属性来设置`el-date-picker`的默认值为当天。下面是一个示例代码：

<el-date-picker v-model="selectDate" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate" :default-value="today"></el-date-picker>

在你的Vue组件中，你需要定义一个`today`变量来存储当天的日期。你可以使用`moment.js`库来获取当前日期。下面是一个示例代码：

import moment from 'moment';

export default {
  data() {
    return {
      selectDate: [],
      today: [moment().startOf('day'), moment().endOf('day')]
    };
  },
  methods: {
    changeDate(value) {
      // 处理日期变化的逻辑
    }
  }
}

在上面的代码中，我们使用`moment().startOf('day')`来获取当天的开始时间，使用`moment().endOf('day')`来获取当天的结束时间。然后将这两个时间作为`today`变量的值传递给`default-value`属性。

使用vue2修改下述代码，el-date-picker初始值分别为今天0点和明天0点。让el-slider滑块控制el-date-picker的时间，滑块的初始最大最小值为el-date-picker的初始值的getTime()，滑块滑动时与el-date-picker联动。 <div> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-slider range style="padding:0 12px;" @change="onChange"></el-slider> </div>

<>
<div>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-value="defaultValue"
:picker-options="pickerOptions"
></el-date-picker>
<el-slider
range
style="padding: 0 12px;"
:min="min"
:max="max"
v-model="sliderValue"
@change="onSliderChange"
></el-slider>
</div>
</template>

<script>
export default {
data() {
return {
value1: [new Date(), new Date(Date.now() + 86400000)],
sliderValue: [new Date().getTime(), new Date(Date.now() + 86400000).getTime()],
pickerOptions: {
selectableRange: '00:00:00 - 23:59:59'
}
}
},
computed: {
min() {
return this.value1[0].getTime()
},
max() {
return this.value1[1].getTime()
},
defaultValue() {
return [new Date(new Date().toLocaleDateString()), new Date(new Date().toLocaleDateString() + ' 23:59:59')]
}
},
methods: {
onSliderChange() {
const [start, end] = this.sliderValue
this.value1 = [new Date(start), new Date(end)]
}
}
}
</script>