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>
相关推荐
@菜菜_达28 分钟前
CSS a标签内文本折行展示
前端·css
霸王蟹36 分钟前
带你手写React中的useReducer函数。(底层实现)
前端·javascript·笔记·学习·react.js·typescript·前端框架
托尼沙滩裤41 分钟前
【Vue3】实现屏幕共享惊艳亮相
前端·javascript·vue.js
啃火龙果的兔子1 小时前
前端八股文-vue篇
前端·javascript·vue.js
jdyzzy1 小时前
从0到1做一个“任务管理系统”:Spring Boot + Vue 实战教程(含源码)
vue.js·spring boot·后端
孜然卷k1 小时前
前端处理后端对象类型时间格式通用方法封装,前端JS处理JSON 序列化后的格式 java.time 包中的日期时间类
前端·json
幼儿园技术家1 小时前
微信小程序实现用户进行推客的注册绑定
前端
gwcgwcjava1 小时前
[技术积累]成熟的前端和后端开发框架
前端
bbsh20991 小时前
SiteAzure:SetCookie 未设置Secure
前端·网络·安全·siteazure
工业互联网专业1 小时前
基于Python的热门微博数据可视化分析-Flask+Vue
vue.js·python·flask·毕业设计·源码·课程设计·微博数据可视化