用mint ui去实现滚动选择日期并可以关闭拾取器
转发要备注出处哈,么么哒
注释的那些部分都是我在尝试的时候写得,留给自己看得,删除不影响效果哈,希望对你们有帮助,比较忙可能写得很粗糙,不好意思,有空再改了
实例一:
<template>
<div class="date">
<span><input type="text" :value="format" @click="openPicker"></span>
<mt-datetime-picker
ref="picker"
type="date"
cancelText="取消"
confirmText="确定"
:startDate="startDate"
:endDate="endDate"
v-model="pickerValue"
@cancel="cancel">
</mt-datetime-picker>
</div>
</template>
<script>
import Vue from 'vue';
import { DatetimePicker } from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
data(){
var start = new Date();
var end = new Date();
var getDate = end.getDate();
end.setDate(getDate+4);
return{
pickerValue: start,
startDate: start,
endDate: end,
}
},
methods: {
openPicker() {
this.$refs.picker.open();
},
cancel(){
this.$refs.picker.close();
this.pickerValue = new Date();
}
},
computed:{
format:function(){
let time = new Date(this.pickerValue);
let y = time.getFullYear();
let m = time.getMonth() + 1;
let d = time.getDate();
m = m < 10 ? ('0' + m) : m;
d = d <10 ? ('0' + d) : d;
return y + '-' + m + '-' +d;
}
}
}
</script>
<style>
.picker-toolbar{
height: 1rem;
}
.mint-datetime-action{
line-height: 1rem;
font-size: 30px;
}
.picker-slot{
font-size: 30px;
}
.picker-center-highlight{
height: .8rem !important;
margin-top: -0.4rem !important;
}
</style>
实例二:结果如下
最新文章
- 使用 SQL 命令 OPTIMIZE TABLE 释放表空间
- hashmap的hash算法( 转)
- POJ 2406:Power Strings
- 用Python组合Celery Redis RabbitMQ进行分布式数据抓取
- 如何在客户端配置ODBC来访问远程DB2 for Windows服务器
- JS(七)
- matlab差分算法
- Andorid Binder进程间通信---Binder本地对象,实体对象,引用对象,代理对象的引用计数
- EAN-13 条码(又称GTIN-13 条码)
- SVNKIT的low api应用之修改库中文件内容(File modification)
- 使用JavaScript检测浏览器
- javascript history对象
- Android MemInfo
- (转)sql union和union all的用法及效率
- 最短的IE判断var ie=!-[1,]分析
- Lucene学习笔记2-Lucene的CRUD(V7.1)
- slf4j 与各个 logging框架的适配器说明
- SQL Server 远程备份详解
- [图解tensorflow源码] 入门准备工作附常用的矩阵计算工具[转]
- Java 8新特性之lambda(八恶人-2)