共 3 条评论关于"elementUI如何禁用时间组件日期"
最新评论
在开发中有时候会有这样的需求,时间控件中只需要显示今天以及今天以前的日期,别的日期都需要禁用,刚拿到这个需求,我转手就翻开了element-ui的文档,我们可以用到picker-options这个属性
这个属性在elment-ui里面的介绍是这个样子的:
好了,下面我们就要用这个属性做一些事情了。示例如下:
今天为19年5月18日,所以只能显示5月18日及以前的时间
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <template> <div> <el-date-picker v-model="search.time" type="daterange" :picker-options="flag" range-separator="-" start-placeholder="开始日期" @change="changeTime" end-placeholder="结束日期"> </el-date-picker> </div> </template> <script> export default { name: '', data () { return { search: { time: '' }, flag: { disabledDate: (time) => { return time.getTime() > Date.now(); } } } }, methods: { changeTime (time) { if (time) { var d = new Date(time[0]); this.search.examStartTime = this.timeFormat(d.getTime(), 'y-m-d h:i:s'); d = new Date(time[1]); this.search.examEndTime = this.timeFormat(d.getTime(), 'y-m-d h:i:s'); } else { this.search.examStartTime = ''; this.search.examEndTime = ''; } console.log("当前获取到的值为", this.search) }, timeFormat (time, format) { if (!Number(time)) return time; var formatStr = ''; var D = new Date(time); var y = D.getFullYear(); var m = D.getMonth() + 1; var d = D.getDate(); var h = D.getHours(); var i = D.getMinutes(); var s = D.getSeconds(); var w = D.getDay(); m = (m > 10) ? m : ('0' + m); d = (d > 10) ? d : ('0' + d); h = (h > 10) ? h : ('0' + h); i = (i > 10) ? i : ('0' + i); s = (s > 10) ? s : ('0' + s); switch (w) { case 0: w = '星期天'; break; case 1: w = '星期一'; break; case 2: w = '星期二'; break; case 3: w = '星期三'; break; case 4: w = '星期四'; break; case 5: w = '星期五'; break; case 6: w = '星期六'; break; } formatStr = format.replace(/y/g, y); formatStr = formatStr.replace(/m/g, m); formatStr = formatStr.replace(/d/g, d); formatStr = formatStr.replace(/h/g, h); formatStr = formatStr.replace(/(i)/g, i); formatStr = formatStr.replace(/s/g, s); formatStr = formatStr.replace(/w/g, w); return formatStr; } } } </script> |
今天为19年5月18日,所以只能显示5月18以后的时间
1 2 3 4 5 6 | //相对了上面的代码,只需要改大于为小于 flag: { disabledDate: (time) => { return time.getTime() < Date.now(); } } |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
上一篇:web前端开发中常用的居中方法
下一篇:前端代码图片下边距突出解决办法
最新评论
免费领取学习资料和视频
收到了,你这个网址无法访问呀
评:react中调用 setState 之后发生了什么大佬,都联系不到你人, 那个友链能帮忙换一下不 原 共享博客 http:/...
评:react中调用 setState 之后发生了什么没咋研究,emmm
评:web前端绘制八卦图_超简单教程这个是太极阴阳鱼,不是八卦图。
评:web前端绘制八卦图_超简单教程文章不错
评:宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评:iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi
test
文章讲的不错,大赞
可以,百度一搜就搜到了这篇,写的挺好