mt-datetime-picker type="date" 时间格式 bug

1.mint-ui 中 mt-datetime-picker 组件,存在日期格式 bug

<!-- 日期选择器 -->
<template>
  <div class="remember">
    <mt-button @click="open('datePicker')" size="large">日期选择</mt-button>
    <br />
    <p>当前日期:{{currentDate}}</p>
    <br />
    <mt-datetime-picker
      ref="datePicker"
      type="date"
      v-model="currentDate"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'hello',
    data () {
      return {
        currentDate:new Date()
      }
    },
    methods: {
      open(picker) {
        this.$refs[picker].open();
      },
      handleConfirm(value) {
        console.log(new Date()); // Thu Nov 02 2017 19:35:49 GMT+0800 (中国标准时间)
        console.log(value); // Thu Nov 02 2017 00:00:00 GMT+0800 (中国标准时间)
      }
    }
  }
</script>

原因解析:v-model 绑定的变量 类型为  Date 对象

解决方法:定义一个变量作为媒介,进行转换

<!-- 日期选择器 -->
<template>
  <div>
    <mt-button @click="open('datePicker')" size="large">日期选择</mt-button>
    <div>当前:{{currentDate}}</div>
    <br/>
    <mt-datetime-picker
      ref="datePicker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleChange">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'hello',
    data () {
      return {
        currentDate:'20170101'
      }
    },
    methods: {
      open(picker) {
        this.$refs[picker].open();
      },
      handleChange(value) {
        this.currentDate = this.formatDate(value);
        console.log(this.currentDate); // 20170101
      },
      formatTen(num) {
        return num > 9 ? (num + "") : ("0" + num);
      },
      formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return year + this.formatTen(month) + this.formatTen(day);
      }
    }
  }
</script>

<style lang="less" scoped>

</style>

.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值