使用方法:
1、head引入css文件
.input_control {
width: 100%;
margin: 20px auto;
}
.fill_date_item {
text-align: center;
width: 100%;
margin-top: 50px;
}
.fill_date_item input {
display: inline-block;
}
input[type="text"] {
box-sizing: border-box;
text-align: center;
height: 2.7em;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #6a6f77;
-web-kit-appearance: none;
-moz-appearance: none;
outline: 0;
padding: 0 1em;
text-decoration: none;
}
input[type="text"]:focus {
border: 1px solid #ff7496;
}
.am-btn:active:focus,
.am-btn:focus {
outline: 0;
outline: 0;
outline-offset: -2px
}
.login-area .am-g {
padding: 0 0.667rem
}
.am-list>li {
border-bottom: 1px solid #e6e9eb;
}
.am-list>li:last-child {
border-bottom: 0
}
.am-list>li>a {
padding: .4rem 0;
}
.am-list>li a {
font-size: 16px
}
[data-dpr="2"] .am-list>li a {
font-size: 32px
}
[data-dpr="3"] .am-list>li a {
font-size: 48px
}
.am-list>li:first-child {
border: none
}
.am-list,
.am-topbar {
margin-bottom: 0
}
.edition-number {
color: #666;
line-height: .8rem;
margin-bottom: .3rem;
display: block
}
.am-btn-danger {
background: #f0f3f5;
color: #c47269;
border: none
}
.am-btn-green {
background: #36bc9b;
color: #fff
}
.am-btn-green:active,
.am-btn-green:focus {
color: #fff
}
.login-area .am-btn:focus,
.login-area .am-btn:hover {
color: #fff
}
.am-panel {
margin-bottom: 0
}
.am-panel-hd {
padding: 0 2.666%;
border: none
}
.am-panel-bd {
padding: 0 0 0 2.666%;
border: none
}
2、head引入js文件
3、body引入HTML代码
$(function() {
var type = 1;
if (type == 1) {
var type_ = 'hour';
var length_ = 1;
} else {
if (type == 2 || type == 3) {
var type_ = 'hour';
} else {
var type_ = 'halfHour';
}
var length_ = 3;
}
var nowDateArray = getNowFormatDate().split(' ');
var date_ = nowDateArray[0];
//var type_ = 'halfHour';
t(date_, type_, length_);
$('.mask-time').height($(window).height());
$('#doc-select-1').click(function() {
$('.mask-time,.time-area').show();
});
if ($('#fill_infomation_date_start1').val() == "请选择开始时间") {
$('#fill_infomation_date_start1').css('color', '#afb2b2')
} else {
$('#fill_infomation_date_start1').css('color', '#333')
}
$('.btn-choose-time').click(function() {
$('#fill_infomation_date_start1').css('color', '#333')
if (!$('input[name=time_]').val()) {
return alert('请选择服务时间');
}
var textTime = $('input[name=time_]').val().split(':');
$('#fill_infomation_date_start1').val($('input[name=date_]').val() + ' ' + textTime[0] + ':' + textTime[1]);
$('input[name=start_time]').val($('input[name=date_]').val() + ' ' + textTime[0] + ':' + textTime[1] + ':00');
$('.mask-time,.time-area').css("display", "none");
$('#doc-select-1').attr('value', 2);
});
});
修改建议:设置每日的时间段选择,可以在url末尾添加 “?type=33 ?type=34 ?type=35 ”。其它代码不建议修改。