mint-ui 时间选择器Datetime Picker的用法，默认不是当前时间，有一节空白。

使用了mint-ui,里面的文档实在太简略了，有许多方法和配置都没有具体配置，要自己去摸索，实在是揪心。今天使用mint-ui的时间选择器时默认有一节留白，看着不是很舒服，而且默认的时间也是系统设置的开始时间。（类似下图）

---

解决方法是   把picker 的时间默认为当前时间（或者看需求定义成需求时间）

设置了 new Date()之后就正常了，默认当前时间居中显示，如果觉得年份太多，可以设置开始时间和结束时间，文档有写。

同时也看到了很多朋友提出了一些疑问，所以我把代码贴出来吧：

 

<template>
    <div class="pickerDemo">
        <div class="showTime">
            <p class="timeDes">当前时间是：{{this.selectedValue}}</p>
            <div class="selectTime" @click="selectData">选择时间</div>
        </div>
        <!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->
        <div class="pickerPop" @touchmove.prevent>
            <!-- 年月日时分选择 -->
            <mt-datetime-picker
                lockScroll="true"
                ref="datePicker"
                v-model="dateVal"
                class="myPicker"
                type="datetime"
                year-format="{value}"
                month-format="{value}"
                date-format="{value}"
                hour-format="{value}"
                minute-format="{value}"
                second-format="{value}"
                @confirm="dateConfirm()">
            </mt-datetime-picker>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import {formatDateMin} from '@/assets/js/util/formatdate.js'
import {DatetimePicker } from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
export default {
    name: 'pickerDemo',
    data () {
        return {
            dateVal: '', // 默认是当前日期
            selectedValue: ''
        }
    },
    components: {
    },
    created () {
    },
    mounted () {
        let that = this
    },
    methods: {
        selectData () { // 打开时间选择器
            // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
            if (this.selectedValue) {
                this.dateVal = this.selectedValue
            } else {
                this.dateVal = new Date()
            }
            this.$refs['datePicker'].open()
        },
        dateConfirm () { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
            this.selectedValue = formatDateMin(this.dateVal)
        }
    }
}
</script>

<style scoped lang="less">
    .pickerDemo{
        width: 100%;
        height: 18rem;
        background-color: #ccc;
        .showTime{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 2rem;
            .timeDes{
                font-size: 0.4rem;
                color: red;
            }
            .selectTime{
                display: inline-block;
                width: 4rem;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                background-color: #ff776d;
                color: #fff;
                font-size: 0.24rem;
                border-radius: 8px;
                margin-top: 1rem;
            }
        }
    }
    .pickerPop{
        /deep/ .picker{
            .picker-toolbar{
                background-color: #eee;
                .mint-datetime-action{
                    font-size: 0.26rem;
                    color: #000!important;
                }
            }
        }
    }
</style>

年月日的选择器也是类似的，把picker的 type 换一下。

css里面重点说一下 时间选择器怎么改里面的ui样式：把 /deep/给加上，但改的样式也有限，看需求吧。

同时把那个时间转换 的util工具类我也帖出来吧。

// 只有年月日
export function formatDate (secs) {
    var t = new Date(secs)
    var year = t.getFullYear()
    var month = t.getMonth() + 1
    if (month < 10) { month = '0' + month }
    var date = t.getDate()
    if (date < 10) { date = '0' + date }
    var hour = t.getHours()
    if (hour < 10) { hour = '0' + hour }
    var minute = t.getMinutes()
    if (minute < 10) { minute = '0' + minute }
    var second = t.getSeconds()
    if (second < 10) { second = '0' + second }
    return year + '-' + month + '-' + date
}
// 年月日时分
export function formatDateMin (secs) {
    var t = new Date(secs)
    var year = t.getFullYear()
    var month = t.getMonth() + 1
    if (month < 10) { month = '0' + month }
    var date = t.getDate()
    if (date < 10) { date = '0' + date }
    var hour = t.getHours()
    if (hour < 10) { hour = '0' + hour }
    var minute = t.getMinutes()
    if (minute < 10) { minute = '0' + minute }
    var second = t.getSeconds()
    if (second < 10) { second = '0' + second }
    return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}

最终效果：日期可以回显。