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;
}
相关推荐
Forfun_tt3 小时前
xss-labs pass-12
前端·xss
云枫晖3 小时前
Webpack系列-编译过程
前端·webpack
AskHarries3 小时前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗4 小时前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'4 小时前
html`contenteditable`
前端·html
爱宇阳4 小时前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
郑板桥304 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo4 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
@大迁世界4 小时前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆4 小时前
简介NPM 和 NPX
前端·学习·npm·node.js