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

比眉伴天荒 2021-09-16 05:54 577阅读 0赞

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

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

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

<template>
        <div class="pickerDemo">
            <div class="showTime">
                <p class="timeDes">当前时间是：{
       {this.selectedValue}}</p>
                <div class="selectTime" @click="selectData">选择时间</div>
            </div>
            
            <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 换一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

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

![20190108222442474.png][]

// 只有年月日
    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
    }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/13a051e8844e4cd1824b15c298fcda77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/4e99ea0d3445487eba07f0de66e4ef53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/8f923a45a4474ad893f6d5b27ec677aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/a9ac9d1400b347819ace84c0db6757e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210813/3b0bcde1dc4740019b0133c9cacadd83.png
[20190108222442474.png]: /images/20210813/c4ba7ec3e3fa48a9947c8f6e0f756198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210813/a199c67f2cb743a5bab71b4ff7084c08.png