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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue transition过渡组件详解
我们现在可以了解一下vue的过渡，vue在插入、更新以及移除DOM元素的时候，提供了很多不同方式过渡的效果，如果在css过渡自动应用class，在过渡钩子函数中使用JavaScript直接操作DOM就可以了
2022-08-08
vue3.x项目中,出现红色波浪线问题及解决
这篇文章主要介绍了vue3.x项目中,出现红色波浪线问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue.js组件实现选项卡以及切换特效
这篇文章主要为大家详细介绍了Vue.js组件实现选项卡以及切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue数据驱动模拟实现3
这篇文章主要为大家详细介绍了Vue数据驱动模拟实现，教大家如何在某个对象中，新增某个属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
vue引入axios同源跨域问题
这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vuejs+element UI table表格中实现禁用部分复选框的方法
今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Vue 莹石摄像头直播视频实例代码
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下
2018-08-08
Vue模拟数据,实现路由进入商品详情页面的示例
今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
django+vue项目搭建实现前后端通信
本文主要介绍了django+vue项目搭建实现前后端通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
VuePress在build打包时window document is not defined问题解决
这篇文章主要为大家介绍了VuePress在build打包时window document is not defined问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-07-07