转载：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>
-
-
<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
-
}
最终效果：日期可以回显。
