使用了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
}
最终效果:日期可以回显。