element日期时间选择器限制时间选择（精确到小时）

需求：选一个开始时间，要求精确到小时，小于当前时刻的小时不让选择，只能往后选7天。
如图：

需要element的DateTimePicker 日期时间选择器
部分代码如下：

  <el-form-itemlabel="出发时间:"prop="startTime"><el-date-pickerv-model="editForm.startTime":picker-options="pickerOptions"// 控制时间选择format="yyyy-MM-dd HH:mm"type="datetime"placeholder="选择日期时间"/></el-form-item>

    pickerOptions: {disabledDate(time) {let dateTime = new Date();let startDateTime = dateTime.setDate(dateTime.getDate() - 1);let endDateTime = dateTime.setDate(dateTime.getDate() + 7);return (time.getTime() < new Date(startDateTime).getTime() ||time.getTime() > new Date(endDateTime).getTime());},selectableRange:new Date(new Date().setHours(new Date().getHours() + 1)).format('hh') + ':00:00 - 23:59:00'},

selectableRange：可选时间段
startDateTime 时间戳
new Date(startDateTime) 标准时间
new Date(startDateTime).getTime() 时间戳

还需要watch监听和computed，如果不监听，那么每一天的当前小时都会被禁用

  computed: {startTime() {return this.editForm.startTime;}},watch: {startTime: function(newVal, oldVal) {let selectDate = newVal.format('yyyyMMdd');let oldDate = oldVal.format('yyyyMMdd');let nowDate = new Date().format('yyyyMMdd');// 如果两次选择的时间不相等if (oldDate !== selectDate) {// 如果这次选择的时间等于今天的时间就不让选当前小时之前，否则就可以选全部时间段if (selectDate === nowDate) {this.pickerOptions.selectableRange =new Date(new Date().setHours(new Date().getHours() + 1)).format('hh') + ':00:00 - 23:59:00';} else {this.pickerOptions.selectableRange = '00:00:00 - 23:59:00';}let realNewVal = new Date(newVal.format('yyyy-MM-dd') + oldVal.format(' hh:mm:ss'));// 如果这个时间比当前时间小，就等于当前时间，否则等于这个参数的时间if (realNewVal.getTime() < new Date().getTime()) {this.editForm.startTime = new Date();} else {this.editForm.startTime = realNewVal;}}}},

重写了format方法，代码如下：格式化时间也可以用库，比如moment

/*** 格式化日期*/
export const dateFormat = function() {/* eslint-disable no-extend-native */Date.prototype.format = function(fmt) {let o = {'M+': this.getMonth() + 1, // 月份'd+': this.getDate(), // 日'h+': this.getHours(), // 小时'm+': this.getMinutes(), // 分's+': this.getSeconds(), // 秒'q+': Math.floor((this.getMonth() + 3) / 3), // 季度S: this.getMilliseconds() // 毫秒};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,(this.getFullYear() + '').substr(4 - RegExp.$1.length));}for (let k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ('00' + o[k]).substr(('' + o[k]).length));}}return fmt;};
};

注意：Date 对象（Date 对象用于处理日期与时间）
new Date（）中国标准时间

element日期时间选择器限制时间选择（精确到小时）相关推荐

日期时间选择器---hh代表是12小时制，HH表示24小时制
日期时间选择器----- hh代表是12小时制,HH表示24小时制 <el-form-item label="开始时间" prop="beginTime" ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择
elementUI日期时间选择器范围(精确到,时.分.秒.
Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
vue element ui里的日期时间选择器中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...
element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...
日期时间选择器bootstrap（手机适应）
使用的是开源的架构可以git clone git://github.com/smalot/bootstrap-datetimepicker.git 截图十年视图年视图月视图日视图* 小时视 ...

element日期时间选择器限制时间选择（精确到小时）

element日期时间选择器限制时间选择（精确到小时）相关推荐

最新文章

热门文章