vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点

在elementUI的el-date-picker中默认为选中的0点到第二个选中的0点

相应代码：

 <el-date-picker size="mini" v-model="rangeTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss":picker-options="pickerOptions"></el-date-picker>

js中的代码：

//写在data选项中
pickerOptions: {disabledDate(time) {return time.getTime() > Date.now()}}

现在把时间段改成0点到24点

在上段代码中加了 :default-time="['00:00:00','23:59:59']"
相应代码变为：

<el-date-picker size="mini" v-model="rangeTime" type="datetimerange" :default-time="['00:00:00','23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss":picker-options="pickerOptions">
</el-date-picker>

但此时，如果第二个框选中当天的时间时，确定按钮被禁用了

然后就要修改picker-options所对应的值了

pickerOptions: {disabledDate(time) {var todayYear = (new Date()).getFullYear()var todayMonth = (new Date()).getMonth()var todayDay = (new Date()).getDate()var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒return time.getTime() > todayTime}}

vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点相关推荐

vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
Vue项目中，如何实现HTML标签后，修改标签内的文本
Vue.js是一个流行的开源JavaScript框架,它可以帮助开发者更加轻松地构建用户界面.在Vue.js中,我们可以使用指令来绑定事件和响应用户交互. 本文将讲解如何在Vue.js项目中实现用户双 ...
vue项目中element-ui全局引入按需引入按需引入报错解决
elementUI中文网址: https://element.eleme.cn/#/zh-CN/component/layout 全局引入 1.安装element-ui cnpm install el ...
vue项目中videoPlayer 的 src 视频地址参数动态修改---方法
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单. this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用*号框起 ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
vue 项目中使用 Loading 组件
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 <template>< ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
vue项目中动态显示时间
vue项目中动态显示时间前言一.js源代码二.效果图 1.修改 2.html与style的修改 3.修改后效果图总结前言在vue项目中动态显示时间,并且按日期.时间.星期一列排列. 我们想 ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...

vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点

vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点相关推荐

最新文章

热门文章