安装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

Logo

前往低代码交流专区

更多推荐