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

电脑版发表于：2023/10/8 16:06

[TOC]

### 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()
},
```

只若初见

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

{{item.title}}