vue el-date-picker 季度选择
时间: 2023-07-24 18:28:55 浏览: 62
你可以使用 `el-date-picker` 的 `shortcuts` 属性来实现季度选择。具体步骤如下:
1. 在 `el-date-picker` 上添加 `shortcuts` 属性,并将其值设置为一个数组,数组中每个元素代表一个季度。
2. 每个季度的配置对象应包含 `text` 和 `onClick` 两个属性,分别表示显示在季度选择列表中的文本和点击季度后的回调函数。
3. 在 `onClick` 回调函数中,你可以使用 `moment.js` 或其他日期处理库来计算出选择的季度的起始日期和结束日期,并将其传递给父组件。
下面是一个示例代码:
```
<el-date-picker
v-model="date"
type="daterange"
:shortcuts="[
{
text: '第一季度',
onClick: () => {
const start = moment().quarter(1).startOf('quarter')
const end = moment().quarter(1).endOf('quarter')
this.date = [start, end]
}
},
{
text: '第二季度',
onClick: () => {
const start = moment().quarter(2).startOf('quarter')
const end = moment().quarter(2).endOf('quarter')
this.date = [start, end]
}
},
{
text: '第三季度',
onClick: () => {
const start = moment().quarter(3).startOf('quarter')
const end = moment().quarter(3).endOf('quarter')
this.date = [start, end]
}
},
{
text: '第四季度',
onClick: () => {
const start = moment().quarter(4).startOf('quarter')
const end = moment().quarter(4).endOf('quarter')
this.date = [start, end]
}
}
]"
></el-date-picker>
```
在上述代码中,我们使用了 `moment.js` 来计算选择的季度的起始日期和结束日期。你也可以使用其他日期处理库或手动计算。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)