原

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

3858人阅读 2023/10/8 16:06 总访问：638422 评论：0 收藏：0 手机

分类: 前端

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

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

只若初见

如果有缘，错过了还会重来，如果无缘，相遇了也会离开

博主信息

排名

文章

粉丝

文章类别

架构 9篇

后端 4篇

.net 9篇

前端 55篇

nginx 1篇

.net core 6篇

EF 5篇

随笔 9篇

数据库 10篇

k8s 0篇

consul 1篇

git 1篇

uniapp 3篇

mysql 1篇

linux 1篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}