elementUI实现日期框选中项文本高亮
{ margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px "PingFang SC" }
span.s1 { font: 12px "Helvetica Neue" }
需求:由于月份选择框会给默认接收的月份文本加入高亮显示,但需求要求将选中的月份标记高亮展示。
实现:使用elementUI的日期选择器提供的下拉框样式配置,并改写对应的样式实现。
懒得说话,直接上代码:
- <template>
- <div>
- <dataPickSelf
- size='mini'
- v-model="scope.row.dateTime"
- type="month"
- :picker-options="pickerOptions"
- :clearable="false"
- :popper-class='dataPick'
- value-format="yyyy-MM"
- ref="dateMonth"
- >
- </dataPickSelf>
- </div>
- </template>
- <script>
- import {DatePicker} from 'element-ui';
- export default {
- data() {
- return {
- maxTime: '',
- dataPick: 'monthtime',
- pickerOptions:{
- disabledDate: time => {
- return this.timeRe(time);
- },
- }
- }
- },
- components: {
- dataPickSelf:DatePicker
- },
- methods: {
- timeRe(time) {
- return time.getTime() >=new Date(this.maxTime).getTime() ;
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .monthtime .el-month-table td.current:not(.disabled) .cell{
- font-weight: bold !important;
- color:#182452 !important;
- }
- .monthtime .el-month-table td.today .cell{
- color: #182452;
- }
- .monthtime .el-month-table td.current ~ td.today .cell{
- color: #606266;
- }
- .monthtime .el-month-table td.current ~ td.disabled.today .cell{
- color: #C0C4CC !important;
- }
- .monthtime .el-month-table tr td.disabled.today .cell{
- color: #C0C4CC !important;
- }
- .monthtime .el-month-table tr td.disabled.today .cell{
- color: #C0C4CC !important;
- }
- .monthtime .el-month-table td.today .cell {
- font-weight: normal;
- }
- .monthtime .el-month-table td.today .cell {
- color: #606266;
- }
- </style>
效果展示图:
默认是显示当前月,既【三月】是高亮的,选择【四月】的后,四月文本显示高亮。
elementUI实现日期框选中项文本高亮的更多相关文章
- MVC中导航菜单,选中项的高亮问题。
这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当前页面的url. 有两种解决思 ...
- MVC中导航菜单,选中项的高亮问题。。
先上图: 这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当 ...
- 项目element-ui checkbox里面获取选中项 实现批量删除 修改
<el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...
- jquery获取select多选框选中的文本值
$("#select option:selected").text();
- jquery获取选中的文本和值
jquery获取选中的文本和值 1.说明 (1)获取select下拉框选中的索引 $("#selection").get(0).selectedIndex; (2)获取 ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路
最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...
- jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值
做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
随机推荐
- [视频] Docker 安装 nginx + rtmp
目录 拉取镜像 创建并运行容器,映射出两个端口1935.80 将视频文件推流至rtmp服务器 使用ffplay播放rtmp流 拉取镜像 docker pull alfg/nginx-rtmp 创建并运 ...
- cdn jsdelivr + github releases 以wordpress sakura主题manifest为例
1 创建github repository 在本地创建文件,这里为文件夹 /manifest 在github创建库wordpresscdn,上传 /manifest到库中 2 github relea ...
- springboot demo(一)快速开始
快速入门 maven构建项目 1.访问http://start.spring.io/ 2.选择构建工具Maven Project.Spring Boot版本2.26以及一些工程基本信息,点击" ...
- VSCode & outline & source code
VSCode & outline & source code Dart 源码学习 outline 速览 dart-core List class instance-methods ht ...
- 三维码 & 二维码 & 一维码
三维码 & 二维码 & 一维码 3D, 2D, 1D 防伪国家标准 -<结构三维码防伪技术条件> http://www.xinhuanet.com/tech/2019-12 ...
- React Hooks 内部实现原理
React Hooks 内部实现原理 源码分析 // 链表 React Hooks 原理剖析 refs https://reactjs.org/docs/hooks-intro.html https: ...
- Micro Frontends & microservices
Micro Frontends & microservices https://micro-frontends.org/ https://github.com/neuland/micro-fr ...
- taro taro 多端同步调试
taro 多端同步调试 debug https://nervjs.github.io/taro/docs/envs-debug.html
- Node.js & ES modules & .mjs
Node.js & ES modules & .mjs Node.js v13.9.0 https://nodejs.org/api/esm.html https://nodejs.o ...
- js clear copy
js clear copy window.getSelection().empty() & window.getSelection().removeAllRanges() & docu ...