Element-ui DatePicker日期选择器基础用法示例

更新时间：2023年06月29日 09:46:27 作者：菜园前端

这篇文章主要为大家介绍了Element-ui DatePicker日期选择器基础用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Element-ui DatePicker

通常用于选择日期

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { DatePicker } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/date-picker.css'
Vue.use(DatePicker)

基础用法

<template>
    <el-date-picker v-model="value" type="date" placeholder="选择日期"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>

选择月份

<template>
    <el-date-picker v-model="value" type="month" placeholder="选择月份"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>

选择年份

<template>
    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
</template>
<script>
export default {
    data() {
        return {
            value: []
        }
    }
}
</script>

Attributes

以上就是Element-ui DatePicker日期选择器基础用法示例的详细内容，更多关于Element-ui DatePicker的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vite动态导入页面动态import组件实现方式
本文总结了在使用Vite进行动态导入页面和组件时遇到的问题,由于Vite与Webpack在处理动态import方面有所不同,需要采用特殊方法,文章强调了从后台获取路由表并动态引入组件的实践方法
2026-04-04
Vue组件如何设置Props实例详解
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下
2022-06-06
axios库的核心代码解析及总结
这篇博客针对axios库的核心代码做一个简要总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue+Minio实现多文件进度上传的详细步骤
这篇文章主要给大家介绍了关于如何利用vue+Minio实现多文件进度上传的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
Vue pinia模块化全局注册详解
这篇文章主要介绍了Vue pinia模块化全局注册，Pinia是Vue.js团队成员专门为Vue开发的一个全新的状态管理库，并且已经被纳入官方github
2023-02-02
使用vue3+vite导入图片路径错乱问题排查及解决
使用vue3+vite开发的时候,导入svg图片时,同一个文件夹下的文件,其中一个路径正常解析,另一个不行,更改文件名之后,该图片文件就可以正常解析了,本文给大家介绍了使用vue3+vite导入图片路径错乱问题排查及解决,需要的朋友可以参考下
2024-03-03
Vue项目安装插件并保存
今天小编就为大家分享一篇关于Vue项目安装插件并保存，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue3利用组合式函数和Shared Worker实现后台分片上传
这篇文章主要为大家详细介绍了Vue3如何利用组合式函数和Shared Worker实现后台分片上传(带哈希计算),感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
解决vue3项目打包发布到服务器后访问页面显示空白问题
这篇文章主要介绍了解决vue3项目打包发布到服务器后访问页面显示空白问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue3 FullCalendar使用并设置dayGrid视图的最大事件数过程
FullCalendar dayGrid视图可通过dayMaxEvents配置限制每日事件数量,超出部分折叠显示为“+nmore”,设置为true时自动计算,数字则手动限制,点击展开查看全部事件,适用于月/周视图,支持CSS自定义折叠文本样式
2025-08-08