溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用Mint-UI的時候，官方的demo是這樣的
<template>
<mt-datetime-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker>
</template>
<script>
export default {
methods: {
openPicker() {
this.$refs.picker.open();
}
}
};
</script>
而起始時間默認是十年前的1月1日，但正常我們的需求都會是超過這個時間的，那我們怎么來的自定義起始時間呢？我當時碰到這個需求，發現官方文檔并沒有說明，百度一遍之后也沒有發現相關的文章。經過自己摸索，把自己的方法寫出來，給有需要同學參考一下。
在mt-datetime-picker可以添加startDate和endDate，startDate就是控制起始時間的，如果我們直接設置時間格式字符串，例如2018-08-20，是不行的，代碼會報錯。然后根據報錯的原因發現，傳入startDate的值必須是Date類型，所以需要在設置的時間前面加上new Date（設置的時間），這樣就可以了。
PS：mint-ui 時間插件使用及獲取選擇值的方法
如下所示：
<div > {{pickerValue}}</div>
<mt-datetime-picker
ref="picker" 每一個都要填上這一條open
type="time"
@confirm="handleConfirm" 設置點擊確定
v-model="pickerValue">
</mt-datetime-picker>
data () {
return {
pickerValue:null, 定義
methods:{
openPicker() {
this.$refs.picker.open();設置開始
},
handleConfirm(){ console.log(this.pickerValue) ;獲取值},
轉換小時
formatDate(date) {
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
return y + ' ' + m + ' ' + d
},
handleConfirm(){
let a = this.pickerValue
// console.log(a.split(" ")) ;
this.zheng=this.formatDate(this.$refs.picker.value)
console.log(this.formatDate(this.$refs.picker.value))
// console.log(this.value) ;
},
設置當前日期為初始日期
<mt-datetime-picker :startDate="startDate"</mt-datetime-picker>
data(){
return{
startDate: new Date(),
}
}
設置默認值
this.zheng=new Date().getFullYear()+'年'+new Date().getMonth()+1+'月'+new Date().getDate()+'日'
總結
以上所述是小編給大家介紹的Mint-UI時間組件起始時間問題的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
