css代码
.hourbox{z-index:10000;display: none;background-color: #fff;box-shadow: 2px 2px 5px rgba(0,0,0,.1);border: 1px solid #33AF91;position: absolute;top:0px;width: 148px;height: 140px;}
.hourbox .hourtitle{background-color: #33AF91;border-bottom: 1px solid #B1D2EC;height: 20px;line-height: 20px;text-align: center;width:100%;color:#FFF;}
.hourbox .hourcon{padding: 10px 0 0 10px;}
.hourbox .hourcon span{display: block;float: left;width: 30px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;margin:0;border-top: #33AF91 1px dotted;border-left: #33AF91 1px dotted;}
.hourbox .hourcon span:nth-child(4n){border-right: #33AF91 1px dotted;}
.hourbox .hourcon span:nth-child(9),.hourbox .hourcon span:nth-child(10),.hourbox .hourcon span:nth-child(11),.hourbox .hourcon span:nth-child(12){border-bottom: #33AF91 1px dotted;}
.hourbox .hourcon .passed{color:#ccc;cursor:default}
.hourbox .hourcon .checkedtime{color:#fff;background-color:#8cc63f}
.hourbox .hourbottom{width:148px;margin:10px auto;text-align:center}
.hourbox .hourbottom span{width:auto;height:auto;padding:3px 10px;background-color:#33AF91;color:#FFF;margin-left:5px;cursor: pointer;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
js代码
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var date = mydate.getDate();
var xingqi;
var newdate;
for (var d = 0; d < 5; d++) {
newdate= new Date(year + “/” + month + “/” + (date + d));
xingqi=new Array(“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”)[newdate.getDay()];
$(“.orderAddcon #date”).append(“<option value='” + year + “-” + month + “-” + (date + d) +”(“+xingqi+”)”+ “‘>” + year + “-” + month + “-” + (date + d) +”(“+xingqi+”)”+ “</option>”);
}
$(“#begintime”).click(function(){
$(“.hourbox”).show();
$(“.hourbox”).css(“top”,$(this).offset().top+24);
$(“.hourbox”).css(“left”,$(this).offset().left);
var yuyueriqi=$(“#date”).val();
$(“.hourtitle”).text(yuyueriqi);
var yuyueriqiarr=yuyueriqi.split(“(星期”);
yuyueriqi=yuyueriqiarr[0];
yuyueriqi=yuyueriqi.replace(/-/g,”/”);
//yuyueriqi=new Date(yuyueriqi);
var nowdate = new Date();
var nowdateriqi=nowdate.toLocaleDateString();
if(yuyueriqi==nowdateriqi)
{
var nowdateshijian=Number(nowdate.getHours());
$(“.hourcon span”).each(function() {
if(Number($(this).text())<=nowdateshijian||nowdateshijian==20)
{
$(this).addClass(“passed”);
}
});
}
});
$(“.hourcon span”).click(function(){
if($(this).hasClass(“passed”)==false)
{
$(this).siblings().removeClass(“checkedtime”);
$(this).addClass(“checkedtime”);
$(this).next().addClass(“checkedtime”);
if($(this).text()==”20″)
{
$(this).prev().addClass(“checkedtime”);
}
}
});
$(“.hourbox .quxiao”).click(function(){
$(“.hourbox”).hide();
});
$(“.hourbox .queding”).click(function(){
if($(“.hourbox .hourcon span”).hasClass(“checkedtime”))
{
var yuyuetimestr=$(“.hourbox .checkedtime”).eq(0).text()+”:00-“+$(“.hourbox .checkedtime”).eq(1).text()+”:00″;
$(“#begintime”).val(yuyuetimestr);
$(“.hourbox”).hide();
}
else
{
alert(“请选择预约时间”);
}
});
html代码
<div class=”hourbox”>
<div class=”hourtitle”></div>
<div class=”hourcon”><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span></div>
<div class=”hourbottom”><span class=”queding”>确定</span><span class=”quxiao”>取消</span></div>
</div>
<select id=”date” name=”ServiceDate”></select>
<input id=”begintime” class=”laydate-icon” name=”ServiceTime”/>