mint-ui之datetime-picker使用
2024-09-09 01:48:50
一基本使用
<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
最新文章
- wpf 遍历控件及其值
- TypedReference
- 表单和验证事件以及marquee标签
- 一步一步理解GB、GBDT、xgboost
- 激活Windows 10
- Git标签管理
- shell 脚本运算符
- Music Tags 隐私政策
- 例10-5 uva12716
- javascript、ruby和C性能一瞥(2)
- openssl实现自签名证书
- php+Ajax 例子
- [转] 浅谈Trie树(字典树)
- Java 获取当前系统的时间
- MySQL视图-(视图创建,修改,删除,查看,更新数据)
- 几个常用的Node方法
- 自定义CCNode
- HTML一些标签注意事项
- bzoj 3687 简单题——bitset
- FTPClient用法
热门文章
- ROSETTA使用技巧随笔--relax使用
- cocos2d-x JS 四人麻将中的服务器位置与客户端位置转换相关
- 前端forEach在Array、map、set中的使用,weakset,weakmap
- laravel中使用event
- 在caffe-ssd的环境搭建中遇到报错信息:Makefile:588: recipe for target &#39;.build_release/cuda/src/caffe/layers/softmax_loss_layer.o&#39; failed
- c#Stream学习笔记
- java 使用jacob把word转pdf
- 国外互联网大企业(flag)的涨薪方式
- redis安装集群的2种方式
- Ajax 知识