vant 時間選擇器--開始時間和結束時間實例
更新時間：2020年11月04日 10:34:00 作者：風景33
這篇文章主要介紹了vant 時間選擇器--開始時間和結束時間實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<template>
<div class="linesMigrate">
<div class="conditionDiv">
<div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart">
<div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div>
<div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div>
</div>
<div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose">
<div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div>
<div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div>
</div>
</div>
<!-- 選開始時間 -->
<van-popup
v-model="showDateChooseStart"
position="bottom"
:close-on-click-overlay="false"
:style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
:overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
<div class="popupDate" :style="bgDateImgStyle">
<img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
<van-datetime-picker
:show-toolbar="false"
v-model="dateChooseStart"
type="date"
:min-date="minDateStart"
:max-date="maxDateStart"
/>
<div class="chooseTodayDiv" @click="chooseDateStart">選擇最近一周</div>
</div>
</van-popup>
<!-- 選結束時間 最近一天 -->
<van-popup
v-model="showDateChoose"
position="bottom"
:close-on-click-overlay="false"
:style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
:overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
<div class="popupDate" :style="bgDateImgStyle">
<img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
<van-datetime-picker
:show-toolbar="false"
v-model="dateChoose"
type="date"
:min-date="minDate"
:max-date="maxDate"
/>
<div class="chooseTodayDiv" @click="chooseDateToday">選擇最新一天</div>
</div>
</van-popup>
<Loading :isShow="loadingState" />
</div>
</template>
<script>
import Loading from '../../components/common/loading.vue';// 引入公共的loading組件
import Vue from 'vue';
import { Popup } from 'vant';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);
Vue.use(Popup);
export default {
name: 'lines',
mounted() {
// 獲取數據
this.loadingState=false;
this.initRequest();
},
data() {
return {
// 時間選擇背景樣式數據
conditonStyle2: {
background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center",
backgroundSize: "contain"
},
// 日期組件彈出層展示與否的標志 --開始時間
showDateChooseStart:false,
// 日期組件彈出層展示與否的標志
showDateChoose:false,
// 彈出層背景圖片
bgDateImgStyle: {
background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat",
backgroundSize: "contain"
},
// 標準化未經處理的時間格式
dateChoose: new Date(),
dateChooseStart: new Date(),
// 處理過格式的日期數據
dateFormatter:"日期",
allDate:true,
dateFormatterStart:"日期",
allDateStart:true,
minDateStart: new Date(2019,8,1), // 開始時間最小2019/9/01
maxDateStart: new Date(), // 開始時間最大 當前時間
minDate: new Date(), //最小時間必須 》開始的最大時間maxDateStart
maxDate: new Date(), // 開始時間最大 當前時間
// 控制加載中狀態(tài)的標志
loadingState:true
};
},
methods: {
// 初始的請求方法
async initRequest(){
this.chooseDateToday();
this.chooseDateStart();
},
// 展示日期彈出層--開始時間
showPopupDateChooseStart() {
this.showDateChooseStart = true;
},
// 展示日期彈出層 --結束時間
showPopupDateChoose() {
// 設置結束時間的最小值
this.minDate = this.dateChooseStart;
this.showDateChoose = true;
},
// 關閉日期彈出層 ---開始時間
closeDatePopStart(){
this.showDateChooseStart = false;
this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
// 設置結束時間的最小值
this.minDate = this.dateChooseStart;
this.allDateStart=false;
// this.loadingState=true;
},
// 關閉日期彈出層 --結束時間
closeDatePop(){
this.showDateChoose = false;
this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
// 設置開始時間的最大值
this.maxDateStart = this.dateChoose;
this.allDate=false;
// this.loadingState=true;
},
// 日期格式轉換函數
dateTransfor(date,format){
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小時
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(format)) {
format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(let k in o) {
if(new RegExp("("+ k +")").test(format)){
format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return format;
},
// 選擇時間函數 -- 七天前
chooseDateStart(){
let yesToday=new Date();
yesToday.setDate(yesToday.getDate()-7);
this.dateChooseStart=yesToday;
this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
},
// 選擇時間函數 -- 今日
chooseDateToday(){
this.dateChoose= new Date();
this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
},
// 選擇時間函數 i=0今日
chooseDate(i){
let yesToday=new Date();
yesToday.setDate(yesToday.getDate()-i);
return this.dateTransfor(yesToday,"yyyy-MM-dd");
},
},
components: {
Loading
}
};
</script>
<style scoped>
/*覆蓋原有彈出層樣式*/
.van-popup {
position: absolute;
background: transparent;
/*bottom: 3.01rem;*/
}
/*覆蓋日期組件原有樣式*/
.van-picker{
position: relative;
background-color: #fff;
user-select: none;
width: 100%;
}
/*篩選條件們的div樣式*/
.conditionDiv{
display: flex;
justify-content: center;
width: 100%;
height: 3.7%;
margin-top: 4%;
}
/*單個篩選條件的樣式*/
.singleCondition{
width: 27%;
margin-left: 2%;
margin-right: 2%;
/*border: 1px solid #451da4;*/
height: 100%;
/*padding-right: 5%;*/
color: #fff;
display: flex;
justify-content: center;
align-items: center;
/*flex-direction: column;*/
font-size: 0.72rem;
}
/*日期組件的div，由于其背景用icon而非整個背景圖，因此樣式上不同*/
.singleDateDiv{
width: 23%;
margin-left: 2%;
margin-right: 2%;
/*border: 1px solid #451da4;*/
height: 100%;
color: #fff;
padding-right: 5%;
display: flex;
justify-content: flex-start;
}
/*日期的值位置樣式*/
.dateValueDiv{
display: flex;
justify-content: center;
flex-direction: column;
font-size: 0.72rem;
width: 82%;
}
/*日期彈出層中選擇今天div樣式*/
.chooseTodayDiv{
box-sizing: border-box;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
color: red;
height: 3rem;
width: 90%;
background: #fff;
border-top: 1px solid lightgrey;
font-size: 0.875rem;
}
/*日期彈窗*/
.popupDate {
border-radius: 2px;
background: #fff;
height: 100%;
width: 90%;
margin: 0 auto;
}
</style>
<style>
/*覆蓋原有的選擇器樣式*/
.van-picker-column{
font-size: 0.9rem;
}
</style>
補充知識：Vant庫的使用，及日期組件的一些注意點
Vant庫對于開發(fā)商城類項目，真的是非常nice，會讓你情不自禁愛上它。Vant庫支持按需加載、為移動端商城設計的風格，非常完美。但是，本人在實際開發(fā)中，也遇到了一些小問題，折騰了老半天，最終得以解決。
下面先說說在vue中使用Vant庫的流程及一些注意事項，以及遇到的坑和解決辦法。
首先送上官網傳送門：www.youzanyun.com/zanui/vant#…，具體的api可自行查閱使用。
第一步，安裝：
cnpm i vant -S
第二步，引入組件：
關于怎么引入Vant組件，有全局引入（非常不推薦）和按需引入兩種方式
這里演示按需引入的方式，因為官網說的稍微有些復雜，對于一些剛接觸的小伙伴，可能會造成一些誤解（PS：我在剛開始接觸的時候這里就蹲了兩個坑，簡直欲哭無淚呀~）。直接說怎么用吧：
為了方便我們按需引入組件，這里還需要安裝一個插件
cnpm i babel-plugin-import -D
安裝好該插件好，還需要在.babelrc文件中plugins那里進行一個簡單的配置，這里附上完整的plugins部分內容。這里我們在plugins數組中插入了import那個數組，其他內容是原來就有的。
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
完成好配置后，在main.js中按需引入你需要的組件。例如這里引入Vant的button組件：
import { Button } from 'vant'; // 在mian.js中通過import導入組件，多個組件直接在{，，，}加入即可
Vue.use(Button); //讓vue加載該組件如果還需要用其他組件，可以這樣寫Vue.use(Button).use().user();
<van-button type="default">默認按鈕</van-button> // 在template中使用組件
這里提一點，如果是類似Toast這種組件，只需要在main.js中引入就好：
import { Toast } from 'vant';
// 然后在你需要的頁面直接這樣使用就好
// 只要引入后，vant就會自動把Toast組件掛在vue的原型上Vue.prototype.$Toast = Toast;
this.$Toast('message');
可以看到，這里button組件以及正常導入使用了。Vant中還有更多適合實際開發(fā)的功能更豐富的組件，小伙伴們自行查閱官方文檔使用吧。
附官網API文檔傳送門：www.youzanyun.com/zanui/vant#…
最后，在說一個關于Vant日期組件使用時所遇到的一個大坑。
Vant日期組件的官網api沒有給出關于事件函數的使用demo，到時小編在使用時不小心邁進了一個大坑。
就是change或者confirm事件時，怎么都獲取不到回調參數，即在點擊確定時回去不到返回的選中時間，總是提示undefined或者null。下面是小編錯誤的寫法，大家不要踩坑：
<!--這是html部門-->
<van-datetime-picker
v-model="currentDate"
type="datetime"
@confirm="confirm()"
@change="change()" />
// 這是對應的方法
methods: {
confirm(val) {
console.log(val)
},
change(e) {
console.log(e.getValues())
}
}
乍一看，是按照文檔上說的方式使用的呀，可是不僅confirm沒有返回選中的日期時間，change事件的各種回調方式也使用不了。
但是吧，如果你要打印1，又可以打印出來，說明接口走這個方法了。
到底怎么回事呢，選中的時間怎么就出不來呢？小編差點都要懷疑是不是這個Vant組件有問題了！
說重點：后來小編終于找到了解決辦法：
原來是這里出了問題，@confirm="confirm()" @change="change()"
這里多加了一對括號，正確的寫法是
<!--這是html部分-->
<van-datetime-picker
v-model="currentDate"
type="datetime"
@confirm="confirm"
@change="change"
/>
// 這是對應的方法
methods: {
confirm(val) {
console.log(val) // 打印出了時間
},
change(e) {
console.log(e.getValues()) // 打印出了選中的時間，是個數組
}
}
到這，問題圓滿解決了！
以上這篇vant 時間選擇器--開始時間和結束時間實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3中實現音頻播放器APlayer的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了使用Vuex做Echarts數據時,當頁面初始化后如何更新dom,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2023-11-11
這篇文章主要為大家詳細介紹了利用vue的監(jiān)聽事件實現一個簡單購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要為大家詳細介紹了基于Vue.js 2.0實現百度搜索框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vue.js利用defineProperty實現數據的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現用戶登錄和注冊的功能的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了vue 組件間的通信之子組件向父組件傳值的方式總結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要給大家介紹了關于vue中實現div可編輯并插入指定元素與樣式的相關資料,文中通過代碼以及圖文將實現的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue之封裝公用變量以及實現方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11