element plus el-date-picker 时间格式设置，时间范围的默认值，获取当周，当月等。设置默认值为上个星期的，上个月的，一个星期的，一个月的。后台接收时间范围参数

vue3 下 element plus下的基础使用

非常简单直接给那个v-model给默认值就行了：

<el-date-picker v-model="state.choiseDate" type="daterange" range-separator="To" start-placeholder="开始日期"
    end-placeholder="结束日期" size="default" value-format="YYYY-MM-DD" />

这里的v-model是state.choiseDate直接给默认值就行了：

const state = reactive({
    choiseDate: ['2023-10-2','2023-10-8'],
})

可以配合day.js赋值默认值为上个星期的内容:

onMounted(() => {
    // 把时间限制一下，默认取一周的吧，不然数据太多了，查询很慢
    state.startDateTime = dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD')
    state.endDateTime = dayjs().add(-1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD')
    // console.log(state.startDateTime)
    // console.log(state.endDateTime)
    state.choiseDate = [state.startDateTime, state.endDateTime]
})

还可以使用js+日期处理组件来获取时间范围

比如默认赋值最近一周的，其他时间同理。这里用的moment.js，使用day.js也是一个道理

// 默认给时间范围赋值最近一周
const end = new Date(); // 获取当前时间
const start = new Date();
// 当前时间往前推7天就是最近一周开始的日期
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.incrementChartsDataRange = [moment(start).format('YYYY-MM-DD'),moment(end).format('YYYY-MM-DD')]

下面贴一下js获取常用时间范围的代码

js获取最近两周：

const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
picker.$emit('pick', [start, end]);

最近一月

const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);

最近三月

const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);

后台接收时间范围参数的方法

这里使用的方法是，在进行传递到后台的时候把时间范围取出来变成两个参数，这样后台就非常方便接收了

const queryData = () => {
    console.log("重新选择时间查询，选择的时间范围", state.choiseDate)
    if (state.choiseDate && state.choiseDate.length > 0) {
        state.startDateTime = state.choiseDate[0]
        state.endDateTime = state.choiseDate[1]
        console.log("有选择时间")
        console.log(state.choiseDate[0])
        console.log(state.choiseDate[1])
    }
    else {
        console.log("没有选择时间")
        state.startDateTime = ""
        state.endDateTime = ""
    }
    // 获取数据的具体逻辑根据实际情况修改
    state.growingCirclesData = []
    state.pageInfo.pageIndex = 1
    getGrowingCircles()
}

上面那个是vue3中的写法，贴一个vue2中的写法与一些补充信息

queryIncrementChartsData() {
    if (this.incrementChartsDataRange && this.incrementChartsDataRange.length > 0) {
        this.incrementParams.incrementStartDate = this.incrementChartsDataRange[0]
        this.incrementParams.incrementEndDate = this.incrementChartsDataRange[1]
        console.log("有选择时间")
    }
    else {
        console.log("没有选择时间")
        this.incrementParams.incrementStartDate = ""
        this.incrementParams.incrementEndDate = ""
    }
    const my = this
    this.$http.get('/education/api/TaskMessage/GetIncrementChartsData', this.incrementParams).then(res => {
        console.log('获取图表数据', res)
    })
},

这种传递两个参数的方式，在设置默认值的时候也要设置一下这两个时间

mounted() {
    // 默认给时间范围赋值最近一周
    const end = new Date(); // 获取当前时间
    const start = new Date();
    // 当前时间往前推7天就是最近一周开始的日期
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.incrementParams.incrementStartDate = moment(start).format('YYYY-MM-DD')
    this.incrementParams.incrementEndDate = moment(end).format('YYYY-MM-DD')
    this.incrementChartsDataRange = [this.incrementParams.incrementStartDate, this.incrementParams.incrementEndDate]
    this.queryIncrementChartsData()
},

绑定的值定义：

incrementChartsDataRange: ['2023-10-2', '2023-10-8'],
incrementParams: {
    incrementStartDate: "",
    incrementEndDate: "",
},

后台接收的参数可以这样定义：

public class GetIncrementChartsDto
{
    public DateTime? IncrementStartDate { get; set; }
    public DateTime? IncrementEndDate { get; set; }
}

如何想要时间改变的时候重新执行查询，其实只需要在时间改变的事件里边执行那个查询的方法而已，取时间那个查询方法里边已经写了，这里只需要调用一下那个方法即可

changeIncrementData(dataVal) {
    console.log("增量时间改变", dataVal)
    this.queryIncrementChartsData()
},