element el-date-picker时间选择框的使用

2024.3.14今天我学习了如何使用el-date-picker时间选择框组件:

:editable="false"可以防止用移动端点击出现键盘。

:picker-options设置禁用和快速配置的方法

align实现右对齐

html 复制代码
<template>
     <el-date-picker 
           v-model="time_data" 
           type="date"
           :picker-options="pickerOptions"
           align="right"
           :editable="false"
           placeholder="选择日期"
           size="mini"
            />
</template>
<script>
export default{
   data(){
     return{
            pickerOptions:{
               disabledDate: (time) => time.getTime() < new Date(new Date().setHours(0, 0, 0, 0)),//设置禁用的日期
               shortcuts: [{text:'今天',onClick(picker){picker.$emit('date',new Date())}}],//设置快速选择的时间
         }
       }
    }
  }
</script>
相关推荐
星光不问赶路人几秒前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼4 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空8 分钟前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_13 分钟前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus19 分钟前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空23 分钟前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰28 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
weixin79893765432...1 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
会一丢丢蝶泳的咻狗1 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花1 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端