vue 饿了么ui 日期选择器修改样式

<div class="block"><el-date-pickerv-model="selectStartTime"type="date"placeholder="开始日期":picker-options="pickerOptions0"class="block1":editable="false"@change="getStartEchart"></el-date-picker><span style="margin:0px 5px;color:#fff;font-size: 12px;">至</span><el-date-pickerv-model="selectEndTime"type="date"placeholder="结束日期":picker-options="pickerOptions1"class="block1":editable="false"@change="getEndEchart"></el-date-picker></div>

这个是符合我项目的日期选择器

①点击开始日期，如七月二号，结束日期则也是七月二号。

②结束日期可以选择，但只能选择七月二号到七月七号

③开始日期为空时，结束日期不能选择

js部分

data(){return{pickerOptions0: {disabledDate: (time) => {if(this.selectStartTime != "" && this.selectStartTime != null){return (time.getTime()  > Date.now())&&(this.selectEndTime = this.selectStartTime);}else if (this.selectEndTime != "" && this.selectEndTime != null) {return time.getTime() > Date.now() || time.getTime() > this.selectEndTime;} else{return time.getTime() > Date.now();}}},pickerOptions1: {disabledDate: (time) => {if (this.selectStartTime != "" ) {var startDate = +this.selectStartTime + (1000*60*60*24)*6;//只允许显示六天var startDate = new Date(startDate);//标准时间return time.getTime() < this.selectStartTime ||  time.getTime()  >= startDate || time.getTime() >= Date.now() ;} else {return time.getTime() < this.selectStartTime || time.getTime() >= Date.now();}}},selectStartTime:'',selectEndTime:'',
}
}

日期初始化

mounted: function(){this.getdatatime()
}methods:{getdatatime(){this.selectStartTime= new Date(new Date(new Date().getTime()- 1*24*60*60*1000).Format("YYYY/MM/DD")+" 00:00:00");//昨天this.selectEndTime= new Date(new Date(new Date().getTime()).Format("YYYY/MM/DD")+" 23:59:59");//今天},

如今天日期7.22

getStartEchart（）getEndEchart（） 点击出现的事件

修改饿了么ui的样式

 .block1 .el-input__inner{width: 150px;height: 25px;color: white;background-color:#0C2152;}.el-date-editor.el-input, .el-date-editor.el-input__inner{width: 150px;}

el-input__inner这个你按F12可以查找的

vue 饿了么ui 日期选择器修改样式相关推荐

【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
iview ui 日期选择器禁用今天之前和数据返回的日期
直接上代码 <template><Row><Col span="12"><DatePicker type="date" ...
element ui 日期选择器选择日期范围添加默认值
标签 <el-date-pickerv-model="dateValue"type="daterange"align="right"u ...
饿了么UI时间选择器
pickerOptions: {disabledDate(time) {// return time.getTime() > Date.now();if (_this.searchModel.s ...
vue饿了么UI库-笔记
1. :rules="{required: true, message: '有效期不能为空'}" :rules="{type:'date',required: true, ...
Vue实现日期选择器
文章目录前言 1区分月份的天数 1.1 思路 1.2 好处 1.3 缺点 1.4 效果 2 区分闰年和平年 2.1 思路 3 年份月份修改导致的问题 3.1 思路 3.2 效果图 4 禁用未到达的时 ...
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:<最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云> Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使 ...
Vue3日期选择器（DatePicker）
本组件基于 @vuepic/vue-datepicker 插件进行了二次封装,以便更适合日常使用! 官方文档:https://vue3datepicker.com/installation/ 除了年. ...

vue 饿了么ui 日期选择器修改样式

vue 饿了么ui 日期选择器修改样式相关推荐

最新文章

热门文章

vue 饿了么ui 日期选择器 修改样式

vue 饿了么ui 日期选择器 修改样式相关推荐

最新文章

热门文章

vue 饿了么ui 日期选择器修改样式

vue 饿了么ui 日期选择器修改样式相关推荐