<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>手机端订房系统日期时间选择</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div v-cloak id="popup" @click="popupHide">
<div class="overlay"></div>
<div class="content">
<section class="srv-time-selector" v-show="switchShow">
<div class="bar bar-1">
<h1>选择服务时间</h1>
<img width="14" src="css/images/delete_weici2_icon.png" />
</div>
<div class="bd">
<div class="header">
<div class="data-picker">
<div class="wrapper">
<button v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
{{date.week}} {{date.month}}/{{date.day}}
<span>{{date.appointment ? '可预约' : '暂不可约'}}</span>
</button>
<button v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
{{date.week}} {{date.month}}/{{date.day}}
<span>{{date.appointment ? '可预约' : '暂不可约'}}</span>
</button>
</div>
</div>
<button class="cal" @click="tableShow">
<img width="16" src="css/images/rili_weici2_icon@2x.png" alt="" />
<span>30天</span>
</button>
</div>
<div :class="['no-sel', {'not-chose-time': isChoseTime}]" @click="notChoseTime" v-show="isChoseTimeShow">
<p>暂不选择服务时间</p>
<p>之后可以在我的订单页面选择</p>
</div>
<div class="hours">
<div class="wrapper" v-for="date in dates.nowMonth" v-if="date.current && date.appointment">
<div :class="{'chose-time': !isChoseTime}" v-if="isFirstDay === 0">
<button :class="['hour-this', {'not-can-use': (key + 20)/2 <= currentHours + 0.5}]" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
</div>
<div :class="{'chose-time': !isChoseTime}" v-else>
<button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
</div>
</div>
<div class="wrapper" v-else-if="date.current && !date.appointment">
<div class="tips">
<img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" />
<p>抱歉，今天的服务暂时不能预约哦~</p>
</div>
</div>
<div class="wrapper" v-for="date in dates.nextMonth" v-if="date.current && date.appointment">
<div :class="{'chose-time': !isChoseTime}">
<button class="hour-this" v-for="hour in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
</div>
</div>
<div class="wrapper" v-else-if="date.current && !date.appointment">
<div class="tips">
<img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" />
<p>抱歉，今天的服务暂时不能预约哦~</p>
</div>
</div>
</div>
<div class="out">
<button class="submit" @click="submitFunc">确定</button>
</div>
</div>
</section>
<section class="srv-time-selector" v-show="!switchShow">
<div class="bar">
<img width="8" src="css/images/fanhui_weici2_icon.png" @click="tableHide">
<h1>选择服务时间</h1>
</div>
<div class="bd">
<section class="days-component">
<div class="weekdays">
<div class="weekday">日</div>
<div class="weekday">一</div>
<div class="weekday">二</div>
<div class="weekday">三</div>
<div class="weekday">四</div>
<div class="weekday">五</div>
<div class="weekday">六</div>
</div>
<div class="days-body">
<div>
<div class="month">{{currentYears}}年{{currentMonth}}月</div>
<div class="days">
<div class="day" v-for="day in nullDay">{{day}}</div>
<div class="day" v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
<font v-show="index == 0">今天</font>
<span>{{date.appointment ? '' : '暂不可约'}}</span>
<a :href="'#scroll-' + index">{{date.day}}</a>
</div>
</div>
<div class="month">{{currentYears}}年{{currentMonth + 1}}月</div>
<div class="days">
<div class="day" v-for="day in nextNullDay">{{day}}</div>
<div class="day" v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
<span>{{date.appointment ? '' : '暂不可约'}}</span>
<a :href="'#scroll-next-' + index">{{date.day}}</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#popup',
data: {
switchShow: true,
currentMonth: null,
currentHours: null,
isFirstDay: 0,
popupShow: false,
isChoseTime: true,
isChoseTimeShow: true,
nextProtoWeek: null,
nullDay: [],
nextNullDay: [],
dates: {
nowMonth: [],
nextMonth: []
}
},
methods: {
selectedNow: function(index, event) {
for (date in this.dates.nowMonth){
this.dates.nowMonth[date].current = false;
}
for (date in this.dates.nextMonth){
this.dates.nextMonth[date].current = false;
};
if (!this.dates.nowMonth[index].appointment) {
this.isChoseTimeShow = false;
} else {
this.isChoseTimeShow = true;
this.isChoseTime = true;
}
this.isFirstDay = index;
console.log(this.isFirstDay);
this.tableHide();
this.dates.nowMonth[index].current = true;
},
selectedNext: function(index, event) {
for (date in this.dates.nextMonth){
this.dates.nextMonth[date].current = false;
}
for (date in this.dates.nowMonth){
this.dates.nowMonth[date].current = false;
};
if (!this.dates.nextMonth[index].appointment) {
this.isChoseTimeShow = false;
} else {
this.isChoseTimeShow = true;
this.isChoseTime = true;
}
this.isChoseTime = true;
this.tableHide();
this.dates.nextMonth[index].current = true;
},
tableShow: function() {
this.switchShow = false;
},
tableHide: function() {
this.switchShow = true;
},
timeChose: function(key, event) {
this.isChoseTime = false;
$(event.target).siblings().removeClass('chosed');
$(event.target).addClass('chosed');
},
notChoseTime: function() {
this.isChoseTime = true;
},
popupHide: function() {
popupShow = false;
},
// submit
submitFunc: function() {
var time, choseH, subInfo;
for (ts in this.dates.nowMonth) {
if (this.dates.nowMonth[ts].current == true) {
time = this.dates.nowMonth[ts];
}
}
for (tc in this.dates.nextMonth) {
if (this.dates.nextMonth[tc].current == true) {
time = this.dates.nextMonth[tc];
}
}
var choseHours = $('.hour-this');
var noSel = $('.no-sel');
if(noSel.hasClass('not-chose-time')) {
choseH = null;
} else {
for (var h = 0; h < choseHours.length; h++) {
订房系统日期时间选择html代码
需积分: 0 11 浏览量
更新于2024-12-16
1
收藏 67KB RAR 举报
这个是手机端订房系统日期时间选择html代码，可以放到自己项目中接入参数，就可以实现类似美团订房日期选择界面功能。
yuyue2.rar （9个子文件） 
yuyue js 
jquery.min.js 91KB vue.min.js 75KB css style.css 6KB images 
baoqian_weici2_icon.png 4KB rili_weici2_icon@2x.png 563B fanhui_weici2_icon.png 357B dagou_weici2_icon.png 539B delete_weici2_icon.png 177B
index.html 10KB132 浏览量
162 浏览量
2009-06-18 上传
127 浏览量
2019-08-03 上传
190 浏览量
2022-03-21 上传
5星 · 资源好评率100%2011-07-01 上传
163 浏览量
2021-09-17 上传
193 浏览量
168 浏览量
2018-08-10 上传
200 浏览量
131 浏览量
136 浏览量
143 浏览量
136 浏览量
120 浏览量
135 浏览量
165 浏览量
5星 · 资源好评率100%137 浏览量
资源评论
kakamllj
- 粉丝: 1
- 资源: 1
