vue el-date-picker

vue el-date-picker使用总结

vue开发中，时间选择是一个常用的功能，最近用到el-date-picker，总结下设置默认值，及获取当前值的功能。

 <el-date-pickerv-model="value2"type="daterange":picker-options="pickerOptions"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"align="center">
</el-date-picker>

1. 设置默认值

设置时间选项默认值，默认时间间隔：当前时间前180d。

date-fns:一个功能比较完善的日期工具。import { format, subDays } from 'date-fns'。

this.value2 = [# format：格式化日期函数；subDays：获得当前日期之前n天的日期format(subDays(new Date(), 180), 'yyyy-MM-dd'),   format(new Date(), 'yyyy-MM-dd')
]

2. 获取当前值

获取当前选中时间值：

let param = {'beginDate': this.value2 === null ? null : this.value2[0], 'endDate': this.value2 === null ? null : this.value2[1]}

 最后展示:

vue el-date-picker相关推荐

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件有默认宽高,不用设置数据源和代理如何 ...
在vue中实现picker样式_基于Vue实现timepicker
主要用到的还是Vue的基本知识而已,不过要想到的细节很多. 先放效果,点击上框,显示timepicker.而且可以根据点击的是时还是分来改变圆盘的数字. 这里我用了两个组件,和,这里的时和分的数值我挂 ...
Date Picker控件：
Date Picker控件: 中文:日期/时间选取器UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期.UIDatePicker有四种模式(model):Ti ...
强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示本地下载今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
IOS学习六:Date Picker， Picker View选取器控件初步
Date Picker控件和Picker View控件其实也是算比较常用到视图. 以下根据红柚子上得几个例子: 分别从(日期选取器)Date Picker -->单部件选取器-->多部 ...
Iphone开发（七）date picker 和 picker view，较复杂的控件
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
在vue中实现picker样式_用Vue实现timepicker功能
主要用到的还是Vue的基本知识而已,不过要想到的细节很多. 先放效果,点击上框,显示timepicker.而且可以根据点击的是时还是分来改变圆盘的数字. 这里我用了两个组件,和,这里的时和分的数值我挂 ...
使用vue+el构建表格_如何使用Vue和VuePress构建文档系统
使用vue+el构建表格介绍 (Introduction) Good documentation is a critical part of a successful project, but a ...

vue el-date-picker

vue el-date-picker使用总结

1. 设置默认值

2. 获取当前值

vue el-date-picker相关推荐

最新文章

热门文章