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>
相关推荐
顾尘眠2 小时前
http常用状态码(204,304, 404, 504,502)含义
前端
王先生技术栈3 小时前
思维导图,Android版本实现
java·前端
悠悠:)4 小时前
前端 动图方案
前端
星陈~4 小时前
检测electron打包文件 app.asar
前端·vue.js·electron
Aatroox4 小时前
基于 Nuxt3 + Obsidian 搭建个人博客
前端·node.js
每天都要进步哦4 小时前
Node.js中的fs模块:文件与目录操作(写入、读取、复制、移动、删除、重命名等)
前端·javascript·node.js
仿生狮子5 小时前
CSS Layer、Tailwind 和 sass 如何共存?
javascript·css·vue.js
在路上`5 小时前
vue3使用AntV X6 (图可视化引擎)历程[二]
javascript·vue.js
brzhang5 小时前
开源了一个 Super Copy Coder ,0 成本实现视觉搞转提示词,效率炸裂
前端·人工智能
diaobusi-885 小时前
HTML5-标签
前端·html·html5