vue.js mint-ui DatetimePicker时间选择器

//注册组件

import { DatetimePicker } from 'mint-ui'   
Vue.component('mint-datePicker', DatetimePicker);

//点击事件

{{item.complaint_time}}

//引入组件



vue.js mint-ui DatetimePicker时间选择器_第1张图片
引入date.js ,代码如下

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);
};
export default {
        filters: {                   
        	 //时间转换
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd');
            }
        },
        data() {
            return {
            	dateValue:"",                    //默认时间
                value: new Date(),               //定义显示时间
                // startDate: new Date('2000-01-01'),//设置开始时间
                endDate: new Date(),             //设置结束时间
            }
        },
        methods: {
        	openDatePicker(key,index) {
                this.itemDataKey[key] = index;
                this.$refs.picker.open();    //设置开始
            },
            // 时间点击确认
            handleConfirm(){
                if(Object.keys(this.itemDataKey).length>0){
                    let key = Object.keys(this.itemDataKey)[0];
                    if(key == 'complaint' ){
                        let idx = this.itemDataKey[key];
                        this.data[key][idx]['complaint_time'] = formatDate(this.value, 'yyyy-MM-dd');
                    }
                    this.itemDataKey = {};
                    this.value = new Date();
                }
            },
        }
}

你可能感兴趣的:(vue.js前端组件)