《前端》Vue el-date-picker 日期组件的使用-2020-09-28

最新推荐文章于 2024-05-20 15:17:28 发布
最新推荐文章于 2024-05-20 15:17:28 发布
阅读量674 收藏
点赞数
分类专栏： 前端 VUE.JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bellediao/article/details/108855356
版权
前端 同时被 2 个专栏收录
257 篇文章 1 订阅
订阅专栏
VUE.JS
62 篇文章 0 订阅
订阅专栏

 

 

基础案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue el-date-picker 日期组件的使用</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='datemodel'>
        <el-date-picker v-model="selectMonth" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
        <el-date-picker v-model="selectDay" type="date" placeholder="选择日" value-format="yyyy-MM-dd"></el-date-picker>
        <el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>
    </div>
</body>
<script>
    new Vue({
        el: "#datemodel",
        data: {
            selectMonth: '',
            selectDay: '',
            selectDatetime: '',
        },
    })
</script>
</html>

 

详解：

一:显示年月

type="month"，value-format="yyyy-MM"

二:选择年月日

type="date"，value-format="yyyy-MM-dd"

三:显示年月日时分(秒)

type="datetime，value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"

Vue el-date-picker 日期组件的使用 - 孤单玻璃杯 - 博客园  https://www.cnblogs.com/zhoushuang0426/p/10606863.html

bellediao
关注
专栏目录
vue el-date-picker
Ho_mj的专栏
07-26 1951
vue el-date-picker使用总结 vue开发中，时间选择是一个常用的功能，最近用到el-date-picker，总结下设置默认值，及获取当前值的功能。 <el-date-picker v-model="value2" type="daterange" :picker-options="pickerOptions" range...
Vue el-date-picker 日期组件的使用
weixin_34080571的博客
03-27 1万+
一:显示年月 <el-date-picker v-model="selectMonth" type="month" placeholder="选择月" @change="jobSearch" value-format="yyyy-MM"></el-date-picker> js代码: <script> export default {...
vuedatetimepicker一个Vuejs的日期选择器组件
08-10
vue-datetime-picker 一个Vue.js的日期选择器组件
Vue3日期选择器（DatePicker）
热门推荐
Mr Dear的博客
04-04 2万+
可以输入或选择日期的控件，插件功能非常全面，交互非常丝滑，强烈推荐！
Vue组件之el-date-picker组件，时间选择器。
qq_32043101的博客
11-27 575
<el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker> 属性讲解 v-model=...
vue-date-picker-master.zip
06-10
用vue 编写一个日历组件用vue
电子日历HTML布局,Outlook 日历时间块布局 html5实现
weixin_35826751的博客
06-08 195
将左边的数据排列成右边的整齐和密集的数据。Your browser does not support the canvas element.Your browser does not support the canvas element.var alldata = [[0, 90, -1], [0, 30, -1], [39, 51, -1], [0, 30, -1], [30, 120, -1]...
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
本文的核心知识点是探讨如何使用`el-date-picker`组件，并通过`picker-options`属性来限制选择的日期必须是当天之前的时间。我们将会深入解析代码示例、API用法以及实现原理。 首先，`el-date-picker`组件是Element...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
解决Element中el-date-picker组件不回填的情况
01-21
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上...
从零实现Vue的组件库（十一）- Date-picker 实现
weixin_33955681的博客
01-24 459
用于选择日期 Date-picer 组件的难点在于： 获取年月日，相关日期的逻辑以及 new Date 的 Api 使用； 结合Functional Component，减少切换日期时 render 的代价； 组件功能解耦。 1. 实例 代码 &lt;!-- 基础用法 --&gt; &lt;fat-date-picker v-model="date" /&gt; &lt;!-- 语...
el-date-picker入门学习
qq_40765784的博客
06-01 827
el-date-picker的学习使用
修改elementUI样式未生效问题（挂载到了body标签上）
superManee的博客
12-09 3827
修改elementui样式失败、/deep/方法修改样式失效、子组件内修改elementUI样式未生效、vuejs style标签中修改公共样式失败
el-date-picker默认时间为上月（默认为当月）
wangjie的博客
01-03 3060
默认el-date-picker组件时间为上月或者本月
el-date-picker组件
mangorose的博客
09-01 286
el-date-picker组件日期时间选择器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 日期时间选择器 使用el-date-picker组件传递日期时间 <el-form-item label="派送截止时间"
el-date-picker设置右侧显示图标，时间选择后：滑入显示清除icon，显示清除图标
weixin_49717920的博客
02-01 4613
el-date-picker设置右侧显示图标，时间选择后：滑入显示清除icon，显示清除图标
vue2使用el-date-picker（无输入框版）
最新发布
m0_73321385的博客
05-20 966
这意味着元素在页面上是存在的，但是对用户是不可见的。在这个ui组件中建议不要使用display: none属性会导致日历选择错位。这个属性设置了一个元素的。
el-data-picker日期组件，搭配dayjs日期库进行日期选择
m0_64785232的博客
01-26 2170
上图显示两个选择框，其中触发日期只可选择日期不可选择时分秒，触发时间不能选择日期只可选择时分秒，且触发时间小于当天日期为显示类型，还可选择year（年份），week（周），month（月）.......，第二个案例讲解的用法指定绑定值的格式函数（看需求如果需要有禁用条件就写，没有的话不用写）禁用条件TruggerDate这个函数是用于判断给定的日期是否已经过了当前时间。函数接受一个Date对象作为参数，使用dayjs库获取当前日期，并与给定的日期进行比较。
elementui type=“week“ 回显赋值处理方式
李特成的博客
03-10 1447
<el-date-picker :picker-options="{ firstDayOfWeek: 1}" v-model="StartWeek" type="week" format="yyyy第WW周" placeholder="选择周范围"></el-date-picker> vue-cli 利用moment.js转化时间格式为YYYY-MM-DD日，或者是YYYY-MM-DD HH:MM:SS 等格式。 import getDates from ...
vue 单个el-date-picker默认日期为当天
04-09
在Vue中，可以使用el-date-picker组件来选择日期。要设置默认日期为当天，可以使用v-model指令绑定一个data中的日期变量，并将其初始化为当天的日期。 首先，在data中定义一个日期变量，例如"selectedDate"，并将其初始化为当天的日期。可以使用JavaScript的Date对象来获取当前日期，然后将其格式化为需要的日期字符串。 接下来，在el-date-picker组件上使用v-model指令将其与"selectedDate"进行双向绑定。这样，选择日期时会更新"selectedDate"的值，同时将默认日期设置为当天。 以下是一个示例代码： ``` <template> <div> <el-date-picker v-model="selectedDate" type="date"></el-date-picker> </div> </template> <script> export default { data() { return { selectedDate: '' // 初始化为空字符串 }; }, mounted() { const today = new Date(); const year = today.getFullYear(); const month = String(today.getMonth() + 1).padStart(2, '0'); const day = String(today.getDate()).padStart(2, '0'); this.selectedDate = `${year}-${month}-${day}`; // 格式化为YYYY-MM-DD } }; </script> ``` 这样，el-date-picker组件的默认日期就会被设置为当天的日期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值