本篇文章寫的是利用vue+elementUI寫一個購票日期選擇，橫向的購票日期，類似于攜程網上的日期選擇，效果如下圖所示：

其他地方可以忽略，其中比較麻煩的是我圈起來的那個時間選擇，如下是代碼：

<template><div class="content-class"><div><el-row :gutter="20" class="search-row"><el-col :span="4" style="text-align: left;"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png"style="height: 30px; width: auto;" /></el-col><el-col :span="12" style="text-align: left;"><el-input placeholder="請輸入內容" v-model="searchInput" class="input-with-select" style="width: 80%;"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="8" style="text-align: right;"><span>電話號碼：12345678920</span></el-col></el-row></div><div class="menu-class"><el-menu :default-active="activeIndex2" class="el-menu-demo" menu-trigger="hover" mode="horizontal"@select="handleSelect" background-color="#2577e3" text-color="#fff" active-text-color="#fff"><el-submenu index="1" :popper-append-to-body="false"><template slot="title">汽車·船</template></el-submenu><el-menu-item index="2" :popper-append-to-body="false"><template slot="title">機票</template></el-menu-item><el-menu-item index="3" :popper-append-to-body="false"><template slot="title">目的地</template></el-menu-item><el-menu-item index="4" :popper-append-to-body="false"><template slot="title">更多</template></el-menu-item></el-menu></div><div class="menu-btn"><el-link icon="el-icon-truck">汽車票</el-link><el-link icon="el-icon-truck">汽車票</el-link><el-link icon="el-icon-truck">汽車票</el-link><el-link icon="el-icon-truck">汽車票</el-link></div><div class="ticket-sale"><el-form ref="ticketForm" :inline="true" :model="ticketForm" label-position="left" class="demo-form-inline"label-width="100px"><el-form-item label="出發城市"><!-- <el-input v-model="ticketForm.start" placeholder="請輸入出發城市"></el-input> --><el-select v-model="ticketForm.start" :popper-append-to-body="false" filterable remotereserve-keyword default-first-option placeholder="請選擇出發城市" :remote-method="remoteMethodStart":loading="loading" @change="searchStart"><el-option v-for="item in startList" :key="item.depotId" :label="item.depotName":value="item.depotName"></el-option></el-select></el-form-item><img class="change-image" src="../assets/img/change.png" /><el-form-item label="到達城市"><!-- <el-input v-model="ticketForm.end" placeholder="請輸入到達城市"></el-input> --><el-select v-model="ticketForm.end" :popper-append-to-body="false" filterable remote reserve-keyworddefault-first-option placeholder="請選擇到達城市" :remote-method="remoteMethodEnd" :loading="loading"@change="searchEnd" style="width: 252px;"><el-option v-for="item in endList" :key="item.depotId" :label="item.depotName":value="item.depotName"></el-option></el-select></el-form-item><el-form-item label="選擇日期"><!-- <el-input v-model="ticketForm.date" placeholder="請選擇日期"></el-input> --><el-date-picker class="date-choose" @change="getDateChange" v-model="ticketForm.date":clearable="false" type="date" placeholder="選擇日期" :picker-options="datePicker"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">搜索</el-button></el-form-item></el-form></div><div class="ticket-case"><el-tabs type="border-card" v-model="activeName" :stretch="true" @tab-click="handleClick":before-leave="beforeLeave"><el-tab-pane class="forward-class" name="toForward" :disabled="disabled"><span slot="label"><i class="el-icon-caret-left"></i></span></el-tab-pane><el-tab-pane v-for="(item, index) in list" :key="index" :name="item.time"><span slot="label"><div>{{item.time.split("-")[1]+"-"+item.time.split("-")[2]}}</div><div>{{item.week}}</div></span><!-- 這里面是內容 --><!-- {{item.time}} --><div><div class="choose-time"><span>出發時間</span><el-checkbox-button class="no-limit" v-model="noLimitTime" @change="limitTime()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedTime" @change="timeChange()"><el-checkbox v-for="item in timeOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><div class="begin-station"><span>出發車站</span><el-checkbox-button class="no-limit" v-model="noLimitBegin" @change="limitBegin()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedBegin" @change="beginChange()"><el-checkbox v-for="item in beginOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><div class="end-station"><span>到達車站</span><el-checkbox-button class="no-limit" v-model="noLimitEnd" @change="limitEnd()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedEnd" @change="endChange()"><el-checkbox v-for="item in endOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><el-table :data="tableData" style="width: 100%":default-sort="{prop: 'date', order: 'descending'}":header-cell-style="{ color: '#000000D8',background:'#f0f0f0'}":cell-style="{ height: '50px', padding: '4px 0' }"><el-table-column prop="time" label="發/到時間" sortable width="180"></el-table-column><el-table-column label="發/到站" width="180"><template slot-scope="scope"><div class=""><i class="el-icon-setting"></i><spanstyle="margin-left: 5px;">{{scope.row.begin}}</span></div><div class=""><i class="el-icon-star-off"></i><spanstyle="margin-left: 5px;">{{scope.row.end}}</span></div></template></el-table-column><el-table-column prop="consuming" label="車型/耗時"></el-table-column><el-table-column prop="price" label="票價" sortable width="180"></el-table-column><el-table-column align="center"><template slot-scope="scope"><el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">訂票</el-button></template></el-table-column></el-table></div></el-tab-pane><el-tab-pane name="toNext"><span slot="label"><i class="el-icon-caret-right"></i></span></el-tab-pane></el-tabs><div class="ticket-tips"><img style="width: 300px;;" src="https://pages.c-ctrip.com/bus-resource/ditui/wxbanner-2.png" /><div class="ticket-point"><div class="point-title"><span>購票指南</span></div><div><div class="point-content"><div class="point-content-title">1.在線預訂汽車票流程</div><span class="point-content-detail">輸入出發到達城市及日期→選擇合適的車次并點擊預訂→填寫乘車人和取票人信息→提交訂單→支付訂單→出票</span></div><div class="point-content"><div class="point-content-title">2.在線預訂汽車票流程</div><span class="point-content-detail">輸入出發到達城市及日期→選擇合適的車次并點擊預訂→填寫乘車人和取票人信息→提交訂單→支付訂單→出票</span></div><div class="point-content"><div class="point-content-title">3.在線預訂汽車票流程</div><span class="point-content-detail">輸入出發到達城市及日期→選擇合適的車次并點擊預訂→填寫乘車人和取票人信息→提交訂單→支付訂單→出票</span></div></div></div></div></div></div> </template><script>// import {getQuickMenuList} from '@/api/ticket/ticketApi.js'const checkedTimeArr = ['00:00-06:00', '06:00-12:00', '12:00-18:00', '18:00-24:00']const beginArr = ['福州客運站', '福州西站']const endArr = ['寧德北站', '寧德南站']import moment from 'moment'export default {data() {return {searchInput: '',activeIndex2: '1',activeName: '',ticketForm: {start: '',end: '',date: ''},list: [],disabled: false,noLimitTime: true,noLimitBegin: true,noLimitEnd: true,checkedTime: [],checkedBegin: [],checkedEnd: [],timeOption: checkedTimeArr,beginOption: beginArr,endOption: endArr,tableData: [{time: "15:00",begin: "福州",end: "廈門",consuming: "約13小時",price: "￥280"}, {time: "15:00",begin: "福州",end: "廈門",consuming: "約13小時",price: "￥280"}, {time: "15:00",begin: "福州",end: "廈門",consuming: "約13小時",price: "￥280"}, {time: "15:00",begin: "福州",end: "廈門",consuming: "約13小時",price: "￥280"}],// 起始站數據startList: [{depotId: 1,depotName: '福州站'}, {depotId: 2,depotName: '霞浦站'}, {depotId: 3,depotName: '寧德站'}],loading: false,// 到達站數據endList: [{depotId: 1,depotName: '福安站'}, {depotId: 2,depotName: '廈門站'}, {depotId: 3,depotName: '福州站'}],datePicker: this.getDatePicker(),}},created() {// 登錄首頁傳過來的數據let currentData = this.$route.params.currentData;if (currentData) {this.ticketForm.start = currentData.startStation;this.ticketForm.end = currentData.endStation;this.ticketForm.date = currentData.date;}// 頁面剛剛進來的時候，購票時間軸this.getTimeList();// 傳過來的值為空if (this.ticketForm.date == "") {this.activeName = this.list[0].time;} else { // 傳過來的時間為當前日期if (this.ticketForm.date == moment(new Date()).format("YYYY-MM-DD")) {this.activeName = this.list[0].time;} else { // 傳過來的時間不是當前日期this.activeName = this.list[1].time;}}// 如果時間軸第一個位置是當天日期，則向后一天那個按鈕不能點擊if (this.list[0].time == moment(new Date()).format("YYYY-MM-DD")) {this.disabled = true;} else {this.disabled = false;}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},// 起始站 - 模糊搜索remoteMethodStart(query) {// if (query !== '') {// this.loading = true;// let data = {// inputStr: query// }// this.startList = [];// getStartData(data).then(res => {// if (res.code == 200) {// this.loading = false;// this.startList.push(...res.data.records);// } else {// this.loading = false;// }// }).catch(err => {// console.log(err);// })// } else {// this.startList = [];// }},// 到達站 - 模糊搜索remoteMethodEnd(query) {// if (query !== '') {// this.loading = true;// let data = {// inputStr: query// }// this.endList = [];// getStartData(data).then(res => {// if (res.code == 200) {// this.loading = false;// this.endList.push(...res.data.records);// } else {// this.loading = false;// }// }).catch(err => {// console.log(err);// })// } else {// this.endList = [];// }},searchStart(e) {console.log("你選中的是", e);console.log("sdkajdasljd", this.saleForm.startStation);},searchEnd(e) {console.log("你選中的是", e);},// tab選項卡點擊事件handleClick(tab, event) {// console.log(tab, event);let arrTime = [];let arrWeek = [];let newArray = [];// 左邊的按鈕if (tab.name == "toForward") {console.log(tab.name, 'tab.name')// 如果數組第一個是當天日期，則左邊的按鈕不能點擊if (this.list[0].time == moment(new Date()).format("YYYY-MM-DD")) {this.activeName = this.list[0].time;this.disabled = true;} else {// 如果不是當天日期，則可以點擊，并且是想前減一天this.disabled = false;let listFirst = this.list[0].time;for (var index = -1; index < 6; index++) {arrTime.push(this.getNextDate(listFirst, index));arrWeek.push(this.getWeek(listFirst, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;this.activeName = this.list[1].time;}// 右邊的按鈕，點擊加一天} else if (tab.name == "toNext") {console.log("toNext", this.activeName);this.disabled = false;if (this.activeName == this.list[0].time) {this.activeName = this.list[1].time} else {let listFirst = this.list[1].time;for (var index = 0; index < 7; index++) {arrTime.push(this.getNextDate(listFirst, index));arrWeek.push(this.getWeek(listFirst, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;console.log(newArray, '12312312312')this.activeName = this.list[1].time;}// 如果點擊的是當天的日期，則顯示在第一個，否則其他的都是顯示在第二個tab} else if (tab.name == moment(new Date()).format("YYYY-MM-DD")) {// this.getTimeList();this.activeName = this.list[0].time;this.disabled = true;} else {this.disabled = false;for (var index = -1; index < 6; index++) {arrTime.push(this.getNextDate(tab.name, index));arrWeek.push(this.getWeek(tab.name, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;this.activeName = this.list[1].time;}},/* 活動標簽切換時觸發 */beforeLeave(currentName, oldName) {var self = this;//重點，如果name是add，則什么都不觸發if (currentName == "toForward") {return false} else if (currentName == "toNext") {return false} else {// this.currentIndex = currentName;}},// 獲取七天的月日getNextDate(date, item) {var dd = new Date(date);dd.setDate(dd.getDate() + item);var y = dd.getFullYear();var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();let day = dd.getDay();// let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];// let week = weeks[day];return y + "-" + m + "-" + d;},// 獲取周幾getWeek(dateTime, index) {let time = new Date(dateTime);// 天數time.setDate(time.getDate() + index)let day = time.getDay();let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];let week = weeks[day];return week;},// 獲取時間列表getTimeList() {let timeArr = [];let weekArr = [];let newArr = [];// 如果傳過來的數據為空，則默認從當天日期開始排七天if (this.ticketForm.date == "") {for (var index = 0; index < 7; index++) {var date = moment(new Date()).format("YYYY-MM-DD");console.log(date, 'datedatedatedate')timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}} else {// 傳過來的數據不為空，并且是當天日期的，也是從當天日期開始排七天if (this.ticketForm.date == moment(new Date()).format("YYYY-MM-DD")) {for (var index = 0; index < 7; index++) {var date = this.ticketForm.date;timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}// 傳過來的數據不為空，并且不是當天日期的，從這個日期的前一天到后面的六天} else {for (var index = -1; index < 6; index++) {var date = this.ticketForm.date;timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}}}// console.log(timeArr);// console.log(weekArr);for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;// this.activeName = this.list[1].time},// 選擇時間不限limitTime() {if (this.noLimitTime) this.checkedTime = [];},// 選擇時間timeChange() {console.log("選擇的時間是", this.checkedTime);let value = this.checkedTimeif (value.length == "") {this.noLimitTime = true;} else {this.noLimitTime = false;}},// 選擇出發不限limitBegin() {if (this.noLimitBegin) this.checkedBegin = [];},// 選擇出發beginChange() {let value = this.checkedBegin;if (value.length == "") {this.noLimitBegin = true;} else {this.noLimitBegin = false;}},// 選擇到達不限limitEnd() {if (this.noLimitEnd) this.checkedEnd = [];},// 選擇到達endChange() {let value = this.checkedEnd;if (value.length == "") {this.noLimitEnd = true;} else {this.noLimitEnd = false;}},// 訂票按鈕handleEdit(index, row) {console.log(index, row);},// 選擇時間getDateChange() {},// 查詢onSubmit() {// this.getTimeList();let timeArr = [];let weekArr = [];let newArr = [];// 點擊查詢按鈕是你選擇的日期let dateForm = moment(this.ticketForm.date).format("YYYY-MM-DD")console.log("時間", dateForm);// 如果選擇的日期是當天日期，則從第一個開始，否則從第二個開始if (dateForm == moment(new Date()).format("YYYY-MM-DD")) {this.disabled = true;this.list = [];console.log("日期選擇今天的", this.list);for (var index = 0; index < 7; index++) {timeArr.push(this.getNextDate(dateForm, index));weekArr.push(this.getWeek(dateForm, index));}for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;this.activeName = this.list[0].time} else {this.disabled = false;for (var index = -1; index < 6; index++) {timeArr.push(this.getNextDate(dateForm, index));weekArr.push(this.getWeek(dateForm, index));}for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;this.activeName = this.list[1].time}},// 小于今天的時間不能選getDatePicker() {return {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7 //開始時間不選時，結束時間最大值小于等于當天 如果沒有后面的-8.64e7就是不可以選擇今天的}}}}} </script><style lang="scss" scoped="scoped">/deep/ .el-tabs--border-card {border: unset;box-shadow: unset;}/deep/ .el-tabs--border-card>.el-tabs__header {border: 1px solid #DCDFE6 !important;}/deep/ .el-tabs--border-card>.el-tabs__content {padding: 15px 0;}.content-class {position: relative;}.search-row {margin: 0 auto !important;padding: 0 20px;display: flex;justify-content: center;align-items: center;min-width: 980px;max-width: 1180px;text-align: center;}.menu-class {background-color: #2577e3 !important;margin-top: 20px;height: 40px;line-height: 40px;}.el-menu-demo {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;background-color: #2577e3 !important;}/deep/ .el-menu--horizontal>.el-menu-item {height: 40px;line-height: 40px;}/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {height: 40px;line-height: 40px;}/deep/ .el-submenu__title i {color: #FFFFFF;}.menu-btn {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;padding-top: 10px;border: 1px solid #2577e3;border-top: none !important;}.sale-content {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;margin-top: 10px;margin-bottom: 10px;display: flex;}.sale-image {margin-left: 20px;display: flex;flex-direction: column;justify-content: space-between;}/deep/ .el-link {margin-left: 20px;}.ticket-sale {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;padding-top: 10px;}.ticket-case {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;display: flex;justify-content: space-between;}.change-image {width: 20px;cursor: pointer;padding-top: 12px;margin-right: 10px;}/deep/ .el-tabs {width: 901px;}/deep/ .el-tabs__item {border-right: 1px solid #dcdfe6 !important;height: 55px;line-height: 25px;}/deep/ #tab-toForward {background: #ffffff;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;display: flex;align-items: center;padding: 0 10px;flex: none;}/deep/ #tab-toNext {background: #ffffff;border-left: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;display: flex;align-items: center;padding: 0 10px;flex: none;}.choose-time {display: flex;align-items: center;}.begin-station {margin-top: 10px;display: flex;align-items: center;}.end-station {margin-top: 10px;display: flex;align-items: center;margin-bottom: 10px;}.no-limit {margin-left: 10px;}.no-limit /deep/ .el-checkbox-button__inner {padding: 2px 5px;border: none;}.time-check {margin-left: 10px;}.time-check /deep/ .el-checkbox {width: 120px;}/deep/.el-table .el-table__cell {padding: 4px 0;height: 40px;}.ticket-tips {margin-left: 10px;}.ticket-point {width: 300px;border: 1px solid #dcdfe6;}.point-title {font-size: 16px;background-color: #f4fcf8;padding: 10px 5px;}.point-content {padding: 5px 10px;font-size: 12px;}.point-content-detail {margin-top: 5px;display: block;color: #666;} </style>

其中的是數據是假數據，各位可以看情況進行修改，而且有些地方可能會存在邊界問題，主要是因為我用的是element里面的tabs，所以會存在邊界問題，但是如果是自己寫的，用div畫的，就沒有邊界問題，我現在還沒遇到邊界問題，所以我還沒去處理，如果到時候真的出現，我會加以補充的。

以上代碼都是我自己寫的，可能有些的地方存在代碼冗余，沒有進行處理，還望各位領導諒解，我會更加努力學習，望各位大佬勿噴

總結

以上是生活随笔為你收集整理的vue+element UI仿携程购票页面上面的日期时间轴选择日期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。