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

原创
2018/03/22 14:34
阅读数 1W
选择时间按钮
<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文件夹中。

展开阅读全文
打赏
2
0 收藏
分享
加载中
感谢博主 最近刚好弄个app用到日期选择,mintUI日期选择太丑了,博主这个很赞......
2018/07/22 10:03
回复
举报
更多评论
打赏
1 评论
0 收藏
2
分享
返回顶部
顶部