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