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

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


mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第1张图片

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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第2张图片

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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第3张图片

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

 






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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第4张图片

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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第5张图片

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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第6张图片

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

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

mint-ui 时间选择器Datetime Picker的用法,默认不是当前时间,有一节空白。_第7张图片

你可能感兴趣的:(vue,css样式)