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>
相关推荐
万少1 天前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen111 天前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript
烛衔溟1 天前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
铁皮饭盒1 天前
成为AI全栈 - 第3课:路由 RESTful Elysia 状态码 设计规范
前端·后端·全栈
顾昂_1 天前
Web 性能优化完全指南
前端·面试·性能优化
前端程序媛-Tian1 天前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技1 天前
Ant Design Pro v6.0.0 发布
前端
T畅N1 天前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer1 天前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端
IT_陈寒1 天前
Redis这个内存杀手,差点让我们运维半夜追杀我
前端·人工智能·后端