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>
相关推荐
IT、木易13 分钟前
大白话 CSS 中transform属性的常见变换类型(平移、旋转、缩放等)及使用场景
前端·css·面试
1024小神33 分钟前
更改github action工作流的权限
前端·javascript
Epicurus37 分钟前
JavaScript无阻塞加载的方式
前端·javascript
1024小神40 分钟前
tauri程序使用github action发布linux中arm架构
前端·javascript
ahhdfjfdf42 分钟前
最全的`Map` 和 `WeakMap`的区别
前端
JYeontu1 小时前
实现一个带@功能的输入框组件
前端·javascript·vue.js
一颗奇趣蛋1 小时前
vue-router的query和params的区别(附实际用法)
前端·vue.js
孤城2861 小时前
MAC电脑常用操作
前端·macos·快捷键·新手·电脑使用
木亦Sam1 小时前
Vue DevTools逆向工程:自己实现一个组件热更新调试器
前端
酷酷的阿云1 小时前
动画与过渡效果:UnoCSS内置动画库的实战应用
前端·css·typescript