jquery+bootstrap 创建日历表格

最新推荐文章于 2024-09-16 07:02:38 发布

onlymyBlog

最新推荐文章于 2024-09-16 07:02:38 发布

阅读量3.2k

点赞数

分类专栏： jquery 文章标签： jquery 日历表格

本文链接：https://blog.csdn.net/onlymyBlog/article/details/89217811

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery创建日历表格

jquery+bootstrap 创建日历表格

在日历这里插入图片描述
#写的不太好欢迎留言赐教

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="description" content="">
    <title>日历表格</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="../../css/public.css">-->
    <script src="../../js/jquery-2.0.3.min.js"></script>
    <link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <style>
	 .content{margin:40px;}
	 .content td{padding:0!important;width:14%;min-height:50px;}
	 .content .date{margin:0;}
	 .content td div{padding:10px 10px 0;min-height:50px;border-bottom:1px solid #fff;}   
	 #datetimepicker{width:120px!important;display:inline-block;margin:0 15px}
	 .content-data>.col-xs-3{border:1px solid #EBEBEB;padding:20px 0;}
	 .input-icon{position:relative;}
	 .input-icon i{position:absolute;right:25px;line-height:32px;}
	 .input-icon input{padding-right:20px;}
	 .datetimepicker{padding:0 20px;}
  </style>

	
	<div class="content ">
		<div class="select-box clearfix">
			<div class="col-xs-4">
				 <form>
				    <div class="form-group ">
				      <label for="sel1">执勤地点</label>
				      <select  id="sel1" class="form-control" style="width:initial;display:inline-block;margin:0 15px;">
				        <option>城中一区</option>
				        <option>城中二区</option>
				        <option>城中三区</option>
				        <option>城中四区</option>
				      </select>
				      <span>执勤类型：岗亭</span>
				    </div>
				   
				  </form>
			</div>
			<div class="col-xs-3 text-right">
				<span class="preMonth">上一月</span>
				<input type="text" class="datetimepicker text-center form-control" id="datetimepicker" >
				<span class="nextMonth">下一月</span>
			</div>
		</div>
		<div class="content-data clearfix">
			<div class="col-xs-7">
				<table class="table table-condensed " border='1' cellspacing="0">
					<tbody>
						<tr class="text-center">
							<td>一</td>
							<td>二</td>
							<td>三</td>
							<td>四</td>
							<td>五</td>
							<td>六</td>
							<td>日</td>
						</tr>
					</tbody>
					
					
				</table>
			</div>
		<div class="col-xs-3 col-sm-offset-1 hide arrange-apply" >
			<form class="form-horizontal " role="form" >
					<div class="form-group">
						<label for="firstlabel" class="col-sm-3 control-label">排班计划</label>
					</div>
					<div class="form-group">
						<label for="firstlabel" class="col-sm-3 control-label">排班类型</label>
						<div class="col-sm-8">
							<select  id="firstlabel" class="form-control" >
						        <option>单日排班</option>
						      </select>
						</div>
					</div>
					<div class="form-group ">
						<label for="twolabel" class="col-sm-3 control-label">执勤日期</label>
						<div class="col-sm-8 input-icon">
							<input type="text" class="datetimepicker form-control" value="2019-04-01" id="twolabel" >
							<i class=" glyphicon glyphicon-calendar" ></i>
						</div>
		
					</div>
					<div class="form-group">
						<label for="threelabel" class="col-sm-3 control-label">执勤时间</label>
						<div class="col-sm-8 input-icon">
							<input type="text" class="form-control" id="threelabel" >
							<i class="glyphicon glyphicon-time"></i>
						</div>
					</div>
					<div class="form-group">
						<label for="fourlabel" class="col-sm-3 control-label">执行中队</label>
						<div class="col-sm-8">
							<select  id="fourlabel" class="form-control" >
								<option class="disabled">请选择</option>
						        <option>一队</option>
						      </select>
						</div>
					</div>
					<div class="form-group">
						<label for="fivelabel" class="col-sm-3 control-label">选择警员</label>
						<div class="col-sm-8">
							<select  id="fivelabel" class="form-control" >
								<option class="disabled">请选择</option>
						        <option>警员1</option>
						
						      </select>
						</div>
					</div>
					<div class="form-group" style="margin-top:40px;">
						<div class="col-sm-offset-3 col-sm-8 text-center">
							<button type="submit" class="btn btn-default btn-group-lg col-xs-5">清空</button>
							<button type="submit" class="btn btn-primary  col-xs-5 col-sm-offset-2">登录</button>
						</div>
					</div>
				</form>
				
		</div>
		</div>

	</div>

src="…/…/js/bootstrap.min.js">
type=“text/javascript” src="…/…/js/bootstrap-datetimepicker.min.js" charset=“UTF-8”>
type=“text/javascript” src="…/…/js/locales/bootstrap-datetimepicker.zh-CN.js" charset=“UTF-8”>
script src=’…/…/js/language.js’></script

$('#datetimepicker').val(date);

//点击上一月
$('.preMonth').click(function(){
	var date=$('#datetimepicker').val();
	var date=date.substring(0,4)+'/'+date.substring(5,7)+'/01';
	var newDate=getpreDay(date,-1).substring(0,4)+'年'+getpreDay(date,-1).substring(5,7)+'月';
	$('#datetimepicker').val(newDate);
	creatTable(newDate);
})
	//点击下一月
$('.nextMonth').click(function(){
	var date=$('#datetimepicker').val();
	var date=date.substring(0,4)+'/'+date.substring(5,7)+'/01';
	var newDate=getpreDay(date,1).substring(0,4)+'年'+getpreDay(date,1).substring(5,7)+'月';
	$('#datetimepicker').val(newDate);
	creatTable(newDate);
})
//建立表格
function creatTable(date){
	var date=date.substring(0,4)+'-'+date.substring(5,7);
	$('.content table tbody').html('');

// 求本月有几天
var thisDays=getCountDays(date);
// 求这个月有几周,即求表格有几行

	//求本月1号是周几
	var week=(new Date(date.replace('-','/')+'/01')).getDay();
	if(week==0){
		week=7;
	}
	var lineNum=Math.ceil((thisDays+week)/7);
	var html='';

	for(var i=0;i<lineNum;i++){
		html+='<tr>';
		for(var j=1;j<8;j++){

// console.log(i,j,week)
if(i0&&j<week){
// console.log(i,j,week)
var today=getpreDay(date.replace(’-’,’/’)+’/01’,j-week).substring(8,10);
html+=’

’;
}else if((i 7+j-week+1)<thisDays+1){
var today=(i7+j-week+1)>9?i 7+j-week+1:‘0’+(i7+j-week+1);
html+=’ ’;
var thisDayCon=’’;
$.each( data.data, function( key, val ) {
if(keydate+’-’+today){
// console.log( key, val);
$.each(val, function(index,value) {
thisDayCon+=’

’+value.startHour.substring(0,5)+’—’+value.endHour.substring(0,5)+’

’+value.dutyPerson+’

’;

						});
					}
				} );
				if(thisDayCon==''){
					html+='<div></div></td>';	
				}else{
					html+=thisDayCon+'</td>';
				}
				
			}else{
				var nextMonthDay=i*7+j-thisDays-week+1;
				html+='<td><p class="date navbar-default text-center">'+nextMonthDay+'日</p><div></div></td>';
			}				
		}
		html+='</tr>';
	}
	
	$('.content table tbody').append(html);		
	
}

//点击表格的td
$('.content table tbody').on('click','td',function(){
	$('.arrange-apply').removeClass('hide');
});

//获取一个月多少天
function getCountDays(date) {
var curDate = new Date(date);
/* 获取当前月份 /
var curMonth = curDate.getMonth();
/ 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 /
curDate.setMonth(curMonth + 1);
/ 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 /
curDate.setDate(0);
/ 返回当月的天数 */
return curDate.getDate();
}

 //获取前一天的日期

// console.log(getpreDay(‘2019-03-01’));
function getpreDay(d,num) {

    d = new Date(d);
    if(num<0){
    	d = +d - (1000 * 60 * 60 * 24)*(Math.abs(num));
    }else{
    	d = +d + (1000 * 60 * 60 * 24)*getCountDays(d);
    }
    
    d = new Date(d);
    var day = d.getFullYear();
    if ((d.getMonth() + 1) <= 9) {
        day = day + "-0" + (d.getMonth() + 1);
    } else {
        day = day + "-" + (d.getMonth() + 1);
    }
    if (d.getDate() <= 9) {
        day = day + "-0" + d.getDate();
    } else {
        day = day + "-" + d.getDate();
    }
    return day;
}