mint-ui时间插件使用及获取选择日期
安装mint-UI参照官方文档Vue 2.0npm install mint-ui -S在main.js中引入// mint-ui引入全部组件import Mint from 'mint-ui';import 'mint-ui/lib/style.css'Vue.use(Mint)在组件中应用时间组件(Datetimepicker)选择时间按钮<mt-button @c...
·
安装mint-UI
参照官方文档Vue 2.0
npm install mint-ui -S
在main.js中引入
// mint-ui引入全部组件
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint)
在组件中应用时间组件(Datetimepicker)
选择时间按钮
<mt-button @click.native="open('picker')" size="large">{{value | formatDate}}</mt-button>
日期插件
<mt-datetime-picker class="picker_show"
ref="picker"
type="date"
v-model="value"
:startDate = "startDate"
:endDate = "endDate"
></mt-datetime-picker>
import { formatDate } from '../js/date.js';
export default {
filters: { //时间转换
formatDate(time) {
var date = new Date(time);
return formatDate(date, 'yyyy-MM-dd');
}
},
data () {
return {
value: new Date(), //定义显示时间
visible: false,
startDate: new Date(), //设置开始时间
endDate: new Date('2019-01-22') //设置结束时间
}
},
methods: {
open(picker) {
this.$refs[picker].open(); //设置开始
},
}
vue2.0将时间戳转化为日期格式
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero (str) {
return ('00' + str).substr(str.length);
};
把上面代码保存为date.js放到你的公共js文件夹中。
原文地址https://my.oschina.net/bugkiller/blog/1649169
更多推荐
已为社区贡献2条内容
所有评论(0)