mint-ui时间插件使用及获取选择日期

最新推荐文章于 2021-12-25 23:42:29 发布

weixin_33711641

最新推荐文章于 2021-12-25 23:42:29 发布

阅读量358

点赞数

文章标签： ui python javascript ViewUI

原文链接：https://my.oschina.net/bugkiller/blog/1649169

版权

2019独角兽企业重金招聘Python工程师标准>>>

选择时间按钮
<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