mint-ui之datetime-picker使用
一基本使用
<template>
<mt-datetime-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker>
</template>
备注:
1.ref,type,v-model 属性必须设置
2.v-model="pickerVisible" 需要在js里面声明pickerVisible
3. type里的值
datetime
: 日期时间选择器,可选择年、月、日、时、分,value
值为一个Date
对象date
: 日期选择器,可选择年、月、日,value
值为一个Date
对象time
: 时间选择器,可选择时、分,value
值为一个格式为HH:mm
的字符串
4.格式化回来的时间
建议使用momentjs 网址:http://momentjs.com/docs/#/displaying/
npm install moment
在vue里面import moment from 'moment';
handleConfirm(data) {
this.searchTime = moment(data).format('YYYY-MM');
} 二,做开始时间结束时间使用时:
<el-row :gutter="0">
<el-col :span="12">
<el-button class="searchBtn searchTime" @click='openStartTime()'>
<i class="fl el-icon-time"></i>
<span>{{searchStartTime}}</span>
<i class="fr el-icon-arrow-down"></i>
</el-button>
</el-col>
<el-col :span="12">
<el-button class="searchBtn searchTime" @click='openEndTime()'>
<i class="fl el-icon-time"></i>
<span>{{searchEndTime}}</span>
<i class="fr el-icon-arrow-down"></i>
</el-button>
</el-col>
</el-row>
<!--时间插件 -->
<template>
<mt-datetime-picker ref="startTime" v-model="startTimeVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleStartTimeConfirm">
</mt-datetime-picker>
<mt-datetime-picker ref="endTime" v-model="endTimeVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleEndTimeConfirm">
</mt-datetime-picker>
</template>
<script>
import { DatetimePicker } from 'mint-ui';
import moment from 'moment';
export default {
data() {
return {
startTimeVisible: '',
searchStartTime: '请选择时间',
endTimeVisible: '',
searchEndTime: '请选择时间',
}
},
methods: {
//打开开始时间
openStartTime() {
this.$refs.startTime.open();
},
//打开结束时间
openEndTime() {
this.$refs.endTime.open();
},
}
}
</script>
备注ref所指就是method方法所指openStartTime
mint-ui之datetime-picker使用的更多相关文章
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...
- iOS开发UI篇—使用picker View控件完成一个简单的选餐应用
iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
- Mint UI 使用指南
上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...
随机推荐
- opencv之模糊处理
初学OpenCV的开发者很容易被OpenCV中各种滤波方法所困扰,不知道到底该用哪里一个来做滤波.表面原因看起来是因为OpenCV中各种滤波方式实在是太多太杂, 其背后原因是对各种滤波方法的应用场景认 ...
- PHP语句函数
运算符 +.-.*./.++.--.+=.-=.% 字符串拼接用. js里面用+拼接 逻辑运算符 and && . or || . ! 错误运算符 @(可以抑制错误) ...
- 面向对象的多态性(C++)
以C++为例三大特效:封装.继承.多态,面向对象的编程语言都具有这些特性. 那么本节来谈谈多态性,尽量说的简单些容易理解! 多态什么意思?即运行时多态,以相同的方式处理不同类型的对象,产生不同的结果! ...
- 用Hexo在GitHub上搭建个人博客
我用Hexo在GitHub上搭建好了自己的博客,我的这第一篇博客就来说说搭建的过程. 1 环境配置 本文使用环境如下: Windows 10 node.js v8.1.3 git v2.13.2 np ...
- 转:控制ComboBox下拉框的下拉部分宽度,使内容能够显示完全
一般的情况下,如果下拉框的选项的文字太长,下拉框ComboBox的Width宽度属性我们又不想要改变(默认不变),下拉选项的文字内容就会被截剪,如下图所示: 解决办法: 1.自动判断下拉选项的文字长度 ...
- Android百大框架排行榜
Android百大框架排行榜 15类Android通用流行框架 - 流风,飘然的风 - 博客园https://www.cnblogs.com/zdz8207/p/android-opensource- ...
- linux centos 如何设置swap大小?
linux centos 如何设置swap大小? swap的值都是安装系统的时候设置好的,一般设置为内存的两倍大小.使用过程中发现swap值过小只能添加.用free -m 命令查看当前swap大小 使 ...
- navicat链接阿里云mysql报80070007: SSH Tunnel: Server does not support diffie-hellman-group1-sha1 for keyexchange
http://www.jianshu.com/p/200572ed066c navicat 链接数据库 使用navicat 的ssh通道连接数据库回遇到权限问题 错误代码如下: 80070007: ...
- [资讯] NFC有什么作用。小米手机3NFC解读
在近几年的智能手机市场,NFC成了Android高端手机产品的标准配置,无论是Android还是Windows Phone阵营,有越来越多的厂商也开始为自己的产品加入NFC功能.而小米最新的旗舰产品— ...
- Python智能检测编码并转码
#安装包工具 $pip3 install chardet #直接打开文件,中文显示乱码 >>> import chardet >>> f = open('test. ...