精华内容
下载资源
问答
  • js制作日历
    千次阅读
    2022-01-21 21:27:56

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;

            }

            #calendar {
                background-color: #9900ff;
                color: #fff;
                border-radius: 5px;
                margin: 100px auto;
            }

            #title {
                font-size: 1.4em;
                padding: 4px 0.55em;
            }

            #days th {
                font-weight: bold;
                text-align: center;
                padding: 4px 0.55em;
            }

            #calendar td {
                text-align: center;
                padding: 4px 20px;
            }

            #today {
                color: #f00;
                font-weight: bold;
            }

            .poin {
                cursor: pointer;
                cursor: hand;
            }
        </style>
        <script>
            window.οnlοad=function(){
                var form = document.getElementById('calendar');
                // 通过日历对象去调用自身的init方法
                calendar.init(form);
            }
            var calendar = {
                year: null,
                month: null,
                //日的数组
                dayTable: null,
                //初始化函数
                init(form) {
                    // 1获取日数组
                   this.dayTable=form.getElementsByTagName('td');
                   //2创建日历,传入当前时间
                   this.createCalendar(form,new Date());
                   var nextMon=form.getElementsByTagName('th')[2];
                   var preMon=form.getElementsByTagName('th')[0];
                   preMon.οnclick=function(){
                    calendar.clearCalendar(form)
                       var preDate=new Date(calendar.year,calendar.month-1,1);
                       calendar.createCalendar(form,preDate)
                   }
                   nextMon.οnclick=function(){
                       calendar.clearCalendar(form)
                       var nextDate=new Date(calendar.year,calendar.month+1,1);
                       calendar.createCalendar(form,nextDate)
                   }
                },
                //清除日历数据
                clearCalendar(form){
                    var tds=form.getElementsByTagName('td');
                    for (var i = 0; i < tds.length; i++) {
                        tds[i].innerHTML='&nbsp';
                        // 清除今天的样式
                        tds[i].id='';
                    }
                },
                // 3生成日历
                // from table表格  date要创建的日期
                createCalendar(form,date){
                    //获取此时的年份
                      this.year=date.getFullYear(); 
                      //获取此时的月份
                      this.month=date.getMonth(); 

                      //年份月份写入日历
                      form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                      //获取本月的天数
                      var dataNum=this.getDateLen(this.year,this.month);
                      var fristDay = this.getFristDay(calendar.year,calendar.month);
                    // 循环将每一天的天数写入到日历中
                    // 让i表示日期。
                    for (var i = 1; i <= dataNum; i++) {
                        this.dayTable[fristDay+i-1].innerHTML=i;
                        var nowDate =new Date();
                        if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
                            //    将当期元素的id设置为today
                            calendar.dayTable[i+fristDay-1].id = "today";
                       }
                    }
                },
                 // 获取本月份的天数
                 getDateLen(year,month){
                    //获取下个月的第一天
                    var nextMonth=new Date(year,month+1,1);
                    // 设置下月第一天的小时-1,也就是上个月最后一天的小时数,随便减去一个值不要超过24小时
                    nextMonth.setHours(nextMonth.getHours()-1);
                    //获取此时下个月的日期,就是上个月最后一天.
                    return nextMonth.getDate();
                 },
                  // 获取本月第一天为星期几。
                getFristDay:function(year,month){
                    var fristDay=new Date(year,month,1);
                    return fristDay.getDay();
                }
            } 
        </script>
    </head>

    <body>
        <table id="calendar">
            <tr>
                <!-- 向左箭头 -->
                <th class="poin">&lt;&lt;</th>
                <!-- 年月 -->
                <th id="title" colspan="5"></th>
                <!-- 向右箭头 -->
                <th class="poin">&gt;&gt;</th>
            </tr>
            <tr id="days">
                <th>日</th>
                <th>一</th>

                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>

    </body>

    </html>

    更多相关内容
  • JS日历表格

    2017-02-10 11:25:04
    纯手工打造JS日历列表,可以拿去灵活运用,有一些注释,可以拿去直接套用后台代码
  • js日历控件

    2018-10-30 11:17:34
    左边为每月日历表,右边为当天天气情况,以及当天事件,可更改日历事件,显示更改事件确认框,当天事件可显示在左边日历表上,可以对任意一天进行事件操作,最终会显示在日历表上。
  • 该页面引用bootstrap.js,实现HTML5,左右拖拽标签功能,标签拖入表格显示一行标签,并且能够删除
  • 表格日历插件

    2016-04-20 11:33:37
    表格日历,html5+javascript,适合添加自己的元素,适用于底层改造。
  • JS简易日历实现

    万次阅读 多人点赞 2017-11-01 16:20:56
    首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列 getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推。并...

    效果图
    日历效果图
    实现点

    01.表格行数问题

    首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列
    getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推。

    并不是每个月都是31天,所以我们得创建一个包含12个月份的数组,每个元素代表每个月份所包含的天数。但是2月份比较特殊,闰年的2月份有29天,平年的2月份只有28天

    firstday = new Date(y, m, 1), //获取当月的第一天

    02打印日历表格

    表格本身是一个二维数组,所以让for大师出来跑两个循环

    html

    <!DOCTYPE html>
    <html>
    <head>
        <title>js实现简易日历</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/calendar.css">
    
        <script src="js/lib.js"></script>
        <script src="js/main.js"></script>
        <script>
        window.onload = function(){
    
            renderHtml();
            showCalendarData();
            bindEvent();
        }
        </script>
    </head>
    <body>
    <div class="calendar" id="calendar">
    </div>
    
    </body>
    </html>

    css部分

        @charset='utf-8';
    
        *{margin: 0;padding:0;}
        .calendar{
            margin: 10px auto;
            width: 240px;
            /*height: 400px;*/
            padding: 10px;
            border: 1px solid  #ddd;
    
        }
        .calendar .calendar-title-box{
            position: relative;
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
    
            border-bottom: 1px solid  #ddd;
    
        }
    
        .calendar .prev-month {
             display: inline-block;
             cursor: pointer;
             width: 0px;height: 0px;
             border-left: 0px;
             border-top: 6px solid transparent;
             border-right: 8px solid #999;
             border-bottom: 6px solid transparent;
    
             position: absolute;
             top: 12px;
             left:0px;
        }
        .calendar .next-month {
             display: inline-block;
             cursor: pointer;
             width: 0px;height: 0px;
             /*border-left: 0px;*/
             border-right: 0;
             border-top: 6px solid transparent;
             /*border-right: 8px solid #999;*/
             border-left: 8px solid #999;
             border-bottom: 6px solid transparent;
             position: absolute;
             top: 12px;
             right: 0px
        }
    
    
        .calendar-body-box{
    
        }
    
        .calendar .calendar-table {
             border-collapse: collapse;
             text-align: center;
             width: 100%;
    
        }
    
        .calendar .calendar-table tr {
            height: 30px;
            line-height: 30px;
        }
    
        .calendar .cur-day{
            color: red;
        }
        .calendar .cur-mounth{
            color: #999;
        }
        .calendar .other-mounth{
            color:#ede;
        }
    
    
    

    js部分

    
    /*
        日历事件,可发挥
    */
    
    function bindEvent(){
        var prevMonth = document.getElementById("prevMonth");
    
        var toPrevMonth = function(){
             var date = dateObj.getDate();
             dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
             showCalendarData();
        };
        addEvent(prevMonth, 'click', toPrevMonth);
    
        var toNextMonth = function(){
             var date = dateObj.getDate();
             dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
             showCalendarData();
        }
    
    
        var nextMonth = document.getElementById("nextMonth");
         addEvent(nextMonth, 'click', toNextMonth);    
    
    }
    
    // getElementById()
    // getElementsByTagName()
    
    function showCalendarData(){
        var odate = dateObj.getDate();
        var titlestr = getDateStr(odate,'title');
    
        console.log(titlestr);
        var calendarTitle = document.getElementById('calendarTitle');
            calendarTitle.innerText = titlestr;
        // con
        var calendarTable = document.getElementById('calendarTable');
        var tds = calendarTable.getElementsByTagName('td');
    
        var _firstDay = new Date(odate.getFullYear(), odate.getMonth(), 1);  // 当前月第一天
    
    
        for(var i = 0,len= tds.length; i<len;i++) {
            var _thisDay = new Date(odate.getFullYear(),
                                 odate.getMonth(), 
                                 i + 1 - _firstDay.getDay());
            var _thisDayStr = getDateStr(_thisDay,'YYYYMMDD');
            var item = tds[i];
            item.innerText = _thisDay.getDate();
            item.setAttribute('data', _thisDayStr);
    
            // 当前天
            if(_thisDayStr == getDateStr(odate,'YYYYMMDD')) { 
                item.className ='cur-day';
            }else if(_thisDayStr.substr(0, 6) 
                == getDateStr(_firstDay,'YYYYMMDD').substr(0, 6)) { 
                item.className ='cur-mounth';
            }else{
                item.className ='other-mounth';
            }
    
    
    
        }
    
        // console.log(_thisDayStr.substr(0,6));
    
    }
    
    // renderHtml()
    function renderHtml(){
        var calendar = document.getElementById('calendar');
        var calendar_top = document.createElement('div');
        var calendar_con = document.createElement('div');
    
        calendar_top.className='calendar-title-box';
        calendar_top.innerHTML='<span class="prev-month" id="prevMonth"></span>'
        +'<span class="calendar-title" id="calendarTitle"></span>'
        +'<span class="next-month" id="nextMonth"></span>';
    
        // 表格区
        calendar_con.className='calendar-body-box';
    
        var _th ='<tr>'
            +'<th>日</th>'
            +'<th>一</th>'
            +'<th>二</th>'
            +'<th>三</th>'
            +'<th>四</th>'
            +'<th>五</th>'
            +'<th>六</th>'
            +'</tr>';
    
        var _tbody ='';
        for(var i=0;i<6;i++){
            _tbody+='<tr>'
            +'<td></td>'
            +'<td></td>'
            +'<td></td>'
            +'<td></td>'
            +'<td></td>'
            +'<td></td>'
            +'<td></td>'
            +'</tr>';
    
        };
    
        calendar_con.innerHTML='<table class="calendar-table" id="calendarTable">'
        +_th+_tbody+'</table>';
        calendar.appendChild(calendar_top);
        calendar.appendChild(calendar_con);
    
    }
    展开全文
  • jquery+bootstrap 创建日历表格

    千次阅读 2019-04-11 19:09:18
    jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好 欢迎留言赐教 日历表格 <div class="content "> <div class="select-box clearfix"> <div class="col-xs-4">...

    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

    var data={
    “status”: 0,
    “msg”: “SUCCESS”,
    “data”: {
    “2019-03-10”: [
    {
    “id”: 8,
    “deptCode”: “010001”,
    “deptName”: “济宁市第二中队”,
    “dutyFlag”: “1”,
    “startTime”: “2019-03-10”,
    “endTime”: “2019-03-10”,
    “startHour”: “10:23:00”,
    “endHour”: “12:00:00”,
    “areaId”: “010021”,
    “dutyPerson”: “张三”,
    “dutyPersonId”: “10001”,
    “dutyMonth”: “2019-03”,
    “planType”: “1”
    }
    ],
    “2019-03-12”: [
    {
    “id”: 10,
    “deptCode”: “010002”,
    “deptName”: “济宁市第二中队”,
    “dutyFlag”: “1”,
    “startTime”: “2019-03-12”,
    “endTime”: “2019-03-12”,
    “startHour”: “10:23:00”,
    “endHour”: “12:00:00”,
    “areaId”: “010020”,
    “dutyPerson”: “张三”,
    “dutyPersonId”: “10001”,
    “dutyMonth”: “2019-03”,
    “planType”: “1”
    }
    ],
    “2019-03-19”: [
    {
    “id”: 11,
    “deptCode”: “010001”,
    “deptName”: “济宁市第二中队”,
    “dutyFlag”: “1”,
    “startTime”: “2019-03-19”,
    “endTime”: “2019-03-19”,
    “startHour”: “10:23:00”,
    “endHour”: “12:00:00”,
    “areaId”: “010020”,
    “dutyPerson”: “张三”,
    “dutyPersonId”: “10001”,
    “dutyMonth”: “2019-03”,
    “planType”: “1”
    }
    ],
    “2019-03-01”: [
    {
    “id”: 13,
    “deptCode”: “010001”,
    “deptName”: “济宁市第二中队”,
    “dutyFlag”: “1”,
    “startTime”: “2019-03-19”,
    “endTime”: “2019-03-19”,
    “startHour”: “10:23:00”,
    “endHour”: “12:00:00”,
    “areaId”: “010020”,
    “dutyPerson”: “张三”,
    “dutyPersonId”: “10001”,
    “dutyMonth”: “2019-03”,
    “planType”: “1”
    },
    {
    “id”: 14,
    “deptCode”: “010001”,
    “deptName”: “济宁市第二中队”,
    “dutyFlag”: “1”,
    “startTime”: “2019-03-19”,
    “endTime”: “2019-03-19”,
    “startHour”: “10:23:00”,
    “endHour”: “12:00:00”,
    “areaId”: “010020”,
    “dutyPerson”: “张三”,
    “dutyPersonId”: “10001”,
    “dutyMonth”: “2019-03”,
    “planType”: “1”
    }
    ]
    }
    }
    //初始化日历
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲datetimepicker'…(’#datetimepicker’).val())
    creatTable($(’#datetimepicker’).val());
    });
    //初始化日历 执勤日期
    $(’#twolabel’).datetimepicker({
    format: ‘yyyy-mm-dd’,
    startView:2,
    minView:2,
    autoclose:true,
    language:‘zh-CN’,
    }).on(‘change’,function(){
    });
    //执勤时间
    $(’#threelabel’).datetimepicker({
    format: ‘hh:ii’,
    maxView:1,
    // minView:1,
    startView:1,
    // minuteStep:15,
    autoclose:true,
    language:‘zh-CN’,
    }).on(‘change’,function(){
    });
    var date=‘2019年03月’;//日历选择的时间
    creatTable(date);//创建表格

    $('#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=(i
    7+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;
    }
    
    展开全文
  • vue:日历表格(element-ui)

    千次阅读 2019-06-24 14:24:07
    js: computed: { // 监听数据的日期满足条件,则显示该数据 filterData() { var tableData = new Array(); var _this = this; this.dataList.filter(item => { if ( _this.dateArr.includes(item....

    效果如图:

     

    html:后面的日期是循环出来的 

    <div class="calendar-title">
          <span class="calendar-left" @click="lastDateclick">&lt;</span>
          <span class="calendar-center">近期事件</span>
          <span class="calendar-right" @click="nextDateclick">></span>
    </div>
    <el-table ref="table"t :data="filterData" border  stripe>
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" prop="code" label="代码">
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称"></el-table-column>
            <el-table-column align="center" v-for="(item,index) in dateArr" :key="index + item" :label="item">
              <template slot-scope="scope">
                <span v-html="dateInfoDesc(item,scope.row)"></span>
              </template>
            </el-table-column>
    </el-table>

     这里注意一下:key="index + item",之前我的key设置的只等于index,然后到了后面数据删选的时候就各种出错,找了半天,才发现是key值不唯一导致的!!

    data:

    bondList: [], // 获取到数据组
    leftDate: "",
    rightDate: "",
    TempleftDate: "",
    TemprightDate: "",
    dateArr: []

    js:

    computed: {
        // 监听数据的日期满足条件,则显示该数据
        filterData() {
          var tableData = new Array();
          var _this = this;
          this.dataList.filter(item => {
            if (
              _this.dateArr.includes(item.startDate) ||
              _this.dateArr.includes(item.endDate) ||
              _this.dateArr.includes(item.refundDate)
            ) {
              tableData.push(item);
            } else {
              return;
            }
          });
          return tableData;
        }
    },
     methods: {
        // 显示该数据在当前日期对应的描述内容
        dateInfoDesc(date, row) {
          var msg = "";
          if (row.startDate == date) {
            msg = "起始日";
          } else if (row.endDate == date) {
            msg = "结束日";
          } else if (row.otherDate == date) {
            msg = "其他";
          }
          return msg;
        },
    
        // 获取数据
        getDataList() {
          this.$axios.post(url).then(res => {
            this.dataList = res.data.data.rows;
          });
        },
    
        // 获取日期数据,返回的全是日期
        getDateList() {
          var params = new URLSearchParams();
          params.append("leftDate", this.leftDate);
          params.append("rightDate", this.rightDate);
          this.$axios({
            method: "post",
            url: `url2`,
            params: params
          }).then(res => {
            this.dateArr = res.data.data; //日期数据
            this.TempleftDate = this.dateArr[0]; // 该区间日期第一位
            this.TemprightDate = this.dateArr[this.dateArr.length - 1]; // 该区间日期最后一位
            this.leftDate = [];
            this.rightDate = [];
          });
        },
    
        // 上一区间的日期
        lastDateclick() {
          this.leftDate = this.TempleftDate;
          this.getDateList();
        },
    
        // 下一区间的日期
        nextDateclick() {
          this.rightDate = this.TemprightDate;
          this.getDateList();
        },
    
    }

    有问题留言哈,希望能带给你帮助~

    展开全文
  • jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox、chrome、ie。
  • 实现日历选择,实现年月日的选择,比如说,搜索一段时间的数据时,通过点击文本框,来调出日历供你选择!
  • 关于用js实现的日历记事功能

    万次阅读 热门讨论 2017-12-26 14:10:11
    需求上面要求要在显示当月的日历表,日历表上同时动态生成上班时间、下班时间、是否值班、值班类型等功能。 当时在网上找了很多日历模板,都没有找到能够符合自己要求的。便决定自己画一个页面。个人感觉最主要的一...
  • 应为要有交互,选择了Js来实现,也算是 结对编程 的初试吧。 我将显示部分用html 写好,点击的按钮触发事件函数是check(); 代码如下:function onCheck(){ var Year = document.getElementById("year").value; //...
  • jQuery我的日历日程安排事项代码
  • 日历日程安排表格calendar

    千次阅读 2020-03-04 10:44:53
    自定义vue日历组件,可用于日程安排,人员分工 组件:引用了moment插件和iview的日期选择组件 <template> <div class="canlendar-container"> <div class="time-selector"> <slot name=...
  • 上次的编辑表格JS日历, 均初步美化了下,比上次好看些,名之为升级版。 另增加了登陆功能。多国语言虚拟键盘输入密码。 下次升级继续放出,敬请期待。
  • 漂亮的带有提醒功能的js日历
  • 最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由...
  • layui日历形式展示对应可编辑表格数据
  • 在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框...本实例教程详细讲解怎么样使用原生js,通过面向对象来开发一个日历选择器插件。 一般日历插件使用都非常简单,只需要
  • jsMultiCalendar是一个免费JavaScript,用于模拟日历(用于数据提取)。 它经过优化,可提供高执行速度,灵活性和美观性。 参数化非常简单,可以在CSS中快速完成颜色更改。 以下是与类似脚本区别的七个主要功能:它...
  • -首先来说说这个日历主要的制作逻辑吧:·一个月份最多有31天,需要一个7X6的表格去装载·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*)·加上一些控件让...
  • HTML & JS 动态日历

    千次阅读 2019-10-23 14:34:04
    使用HTML和JS 创建一个动态日历表先看效果图 先看效果图 Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/...
  • 最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由...
  • 一个 fork-n-go Sheetsee.js 日历项目! 由我和,我们终于一起做了一些事情! :party_popper: Sheetsee.js 日历 Sheetsee.js 是一个库,可以轻松地从 Google 电子表格中可视化数据。 该存储库通过基于电子表格中的...
  •  既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都...
  • JS日期排班表 可以根据当前年月进行自动渲染日期,星期,实现更改年月排布(table横向排版) <table class="table table-striped table-bordered" style="text-align: center;"> <thead> <tr> ...
  • el-calendar:日历 注:这个1号,是得自己修改的哈,详见el文档 el-table:表格 el-calendar打印方法: printCalendar(id = 'needPrint', dayHeight = '95') { // 空页面 let printStr = "<html><head&...
  • layui 表格实现可编辑日历

    千次阅读 2019-01-14 08:56:39
    页面引用layui.css和layui.js &lt;div class="layui-row"&gt;  &lt;div class="layui-col-md12"&gt;  &lt;div class="layui-card"&gt;  &lt;div ...
  • Vue.js实现日历功能

    2020-11-17 14:09:21
    Vue.js 实现日历效果 Github 功能需求 使用 Vue.js 实现指定年月的日历表,配合后台接口数据,添加对应日期的空气质量描述等信息。后台传递当月空气质量指数的数据,前端生成日历表后将空气质量指数添加到对应日期...
  • 实现简单的日历插件一、简要介绍二、基础代码html部分 一、简要介绍 二、基础代码 html部分

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,185
精华内容 2,874
关键字:

js日历表格