el-date-picker设置时间可选范围 :picker-options=““

小小八毛

已于 2022-03-22 09:36:02 修改

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： vue elementui

于 2022-03-22 09:33:12 首次发布

本文链接：https://blog.csdn.net/qq_30306717/article/details/123652163

前端同时被 2 个专栏收录

34 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

这篇博客探讨了如何使用momentjs和element-ui的日期选择器组件限制用户只能选择当前年份，并且最大日期为当天，不允许选择未来的日期。通过设置`disabledDate`属性，实现了日期范围选择器的定制化限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我这里用了momentjs，只能选择当前年的日期，且最大选择日期是当天，不能选择未来

pickerOptions: {
	disabledDate(time) {
		return  time.getTime() > new Date(moment().format("YYYY-MM-DD") + " 23:59:59") || time.getTime() < new Date(moment().format("YYYY") + "-01-01 00:00:00")
	}
},

eg.

<el-date-picker v-model="queryFields.statisticsDate" type="daterange" range-separator=" - " 
:picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期" 
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" :size="size" unlink-panels :clearable="false" />



<script>
   export default {
     data () {
        return {
          pickerOptions: {
		    disabledDate(time) {
			   return  time.getTime() > new Date(moment().format("YYYY-MM-DD") + " 23:59:59") || time.getTime() < new Date(moment().format("YYYY") + "-01-01 00:00:00")
		         }
	          },
            }
        }
    }
<script/>