• 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>

    .

  • 相关阅读:
    .NET 6.0 —— 网络监视器 (TODO)
    Google adwords api —— report & AWQL
    Linux 镜像更新 为国内镜像源 for debian
    优化代码 —— 二八法则 & 编完代码,再优化
    鳥哥的 Linux 私房菜 ——— 第十八章、 服务的防火墙管理 xinetd, TCP Wrappers(3)
    端口号port 是什么
    aptget的install、update、upgrade的区别(转发)
    Google ads api —— github
    .net 6.00 —— record 类型 (TODO)
    Compiled models —— .NET Core 6.0
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7771582.html
Copyright © 2020-2023  润新知