选择时间表单html,jQuery手机端时间表格选择插件

使用方法：

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代码

提示：灰色时间不可选择，最长可预约7天内的服务时间。

$(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 ”。其它代码不建议修改。