Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置

如图

添加输入框显示格式

html 复制代码
 format="yyyy-MM-dd HH:mm"

 value-format="yyyy-MM-dd HH:mm"
html 复制代码
<el-date-picker
    v-model="query.startDate" 
    format="yyyy-MM-dd HH:mm" 
    value-format="yyyy-MM-dd HH:mm" 
    type="datetimerange" 
    range-separator="至" class="date-item" 
    :start-placeholder="$t('NeoLight.startTime')"
    :end-placeholder="$t('NeoLight.endTime')"
    @change="crud.toQuery" 
/>

并修改样式如下

css 复制代码
.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(3) {
  display: none !important;
}

这样就可以显示到分了~

同理, 选择器精确到小时,并且禁止选分钟和秒的配置

添加显示格式

html 复制代码
 format="yyyy-MM-dd H"

 value-format="yyyy-MM-dd HH"
html 复制代码
<el-date-picker
    v-model="query.startDate" 
    format="yyyy-MM-dd H" 
    value-format="yyyy-MM-dd HH" 
    type="datetimerange" 
    range-separator="至" class="date-item" 
    :start-placeholder="$t('NeoLight.startTime')"
    :end-placeholder="$t('NeoLight.endTime')"
    @change="crud.toQuery" 
/>

并修改样式

css 复制代码
.el-picker-panel{
    .el-scrollbar:nth-of-type(2) {
        display: none !important;
    }
}
.el-time-spinner {
    text-align: center;
}
相关推荐
Humbunklung1 天前
C# 压缩解压文件的常用方法
前端·c#·压缩解压
通往曙光的路上1 天前
时隔一天第二阶段他来了 html!!!!!!!!!!!
前端·html
爱吃甜品的糯米团子1 天前
CSS图片背景属性
前端·css
雮尘1 天前
一文读懂Android Fragment栈管理
android·前端
Aoda1 天前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
朝与暮1 天前
《javascript进阶-类(class):构造函数的语法糖》
前端·javascript
入秋1 天前
Three.js 实战之电子围栏可根据模型自动生成
前端·前端框架·three.js
用户6120414922131 天前
jsp+servlet做的咖啡品牌管理后台
java·前端·后端
Asort1 天前
JavaScript设计模式(三)——抽象工厂模式 (Abstract Factory)
前端·javascript·设计模式
nyf_unknown1 天前
(vue)前端下载本地excel文件
前端·vue.js·excel