SOURCE

console 命令行工具 X clear

                    
>
console
$(function(){
				//日历显示
				$('.btn').on('click',function(){
					$('.dialog-calendar').fadeIn();
					show()
					return false;
				})
				
				//选择日期
				$('body').on('click','.dialog-calendar #calendar-oto td',function(){
//					$('#selDate').html($(this).attr('id'))
					$('.dialog-calendar #calendar-oto td span').removeClass('sp-order')
					$(this).children('span').addClass('sp-order')
//					$('.dialog-calendar').fadeOut()
					return false;
				})
			})
			
			
			
			//----------------日历----------------------------
			// 给定年月获取当月天数 
			function GetMDay(y, m) {
			    var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
			    if ((y % 40 == 0 && y % 100 != 0) || y % 400 == 0)//判断是否是闰月 
			        mday[1] = 29; 
			    return mday[m - 1];
			} 
			
			// 获取星期数
			function WeekNumber(y, m, d) {
			    var wk;
			    if (m <= 12 && m >= 1) { 
			        for (var i = 1; i < m; ++i) { 
			            d += GetMDay(y, i); 
			        }
			    }
			    /*根据日期计算星期的公式*/
			    wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7; 
			    //0对应星期天,1对应星期一 
			    return parseInt(wk); 
			}
			
			//所有字体随屏幕变化
			function autoSize(e) {
				var func = function(){
					var obj={
						fontSize:312.5,          //根字体大小
						screenW:1000,			//适配最大屏幕宽度
					}
					var nowObj=$.extend({},obj,e);
					var w = $(window).width();
					var fontSize = nowObj.fontSize * w / nowObj.screenW;
					var fontSizeNow = fontSize > nowObj.fontSize ? nowObj.fontSize : fontSize;
					$('html').css({
						'font-size': fontSizeNow
					});
				}
				func();
				$(window).resize(function() {
					func();
				});
			}
			
			function SetCalendar(year, month) { 
			    var daynumber = GetMDay(year, month); //当月天数  
				//alert("当月天数  "+daynumber);
			    var firstnumber = WeekNumber(year, month, 1); //当月第一天星期  
				//alert("当月第一天星期   "+firstnumber);
			    var lastnumber = WeekNumber(year, month, daynumber); //当月最后一天星期  
				//alert("当月最后一天星期   "+lastnumber);
			    var weeknumber = (daynumber - (7 - firstnumber) - (lastnumber + 1)) / 7; //除去第一个星期和最后一个星期的周数  
				//alert("除去第一个星期和最后一个星期的周数 "+weeknumber);
			    var day = 1; 
			    var name; 
			    var calendar = "";
			    var preYear=(month-1)<1?(year-1):year;
			    var preMonth=(month-1)<1?12:(month-1);
			    var nextYear=(month+1)>12?(year+1):year;
			    var nextMonth=(month+1)>12?1:(month+1);
			    calendar += "<p class='p-title'>请选择预约日期</p><a class='pre-month' href='javascript:gotoMonth(["+preYear+','+preMonth+"])'></a><p class='p-month'>"+month+"月 "+year+"</p><a class='next-month' href='javascript:gotoMonth(["+nextYear+','+nextMonth+"])'></a><table>"
			    calendar += "<thead><tr class='tr-th'>";
			    calendar += "<th id='week-7'>日</th>";
			    calendar += "<th id='week-1'>一</th>";
			    calendar += "<th id='week-2'>二</th>";
			    calendar += "<th id='week-3'>三</th>";
			    calendar += "<th id='week-4'>四</th>";
			    calendar += "<th id='week-5'>五</th>";
			    calendar += "<th id='week-6'>六</th>";
			    calendar += "</tr></thead>";
			    calendar += "<tr>";
			    var i = 0;
			    for (i = 0; i < firstnumber; i++)//第一个星期 
			    {
			       calendar += "<td></td>";
			    }
			    for (i = firstnumber; i < 7; i++) {
			        name = year + "-" + month + "-" + day;
			        calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
			        day++;
			    }
			    calendar += "</tr>";
			    var number = 0;//星期数,末尾添加空行用,统一样式。
			    for (i = 0; i < weeknumber; i++)//其他星期 
			    {
			        calendar += "<tr>"; 
			        for (var k = daynumber - (7 - firstnumber) - (weeknumber - 1) * 7; k < daynumber - (7 - firstnumber) - (weeknumber - 1) * 7 + 7; k++) { 
						name = year + "-" + month + "-" + day;
				        calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
				        day++;
			    	} 
			        calendar += "</tr>";
			        number++;
			    } 
			
			    calendar += "<tr>"; 
			    for (i = 0; i < lastnumber + 1; i++)//最后一个星期 
			    { 
			        name = year + "-" + month + "-" + day;
			        calendar += "<td id=\"" + name + "\"><span>" + day + "</span></td>";
			        day++;
			    }
			    for (i = lastnumber + 1; i < 7; i++) {
			        calendar += "<td>";
			        calendar += "</td>";
			    }
			    calendar += "</tr>";
			    
			    if (number == 3) {
			        calendar += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
			    }
			    
			    calendar += "</table>";
			    
			    return calendar;
			}
			//选中2017-12-21
			function show(){
			   $('#2018-1-27').html("<span class='sp-order'>27</span>")
			   $('#2018-1-11').html("<span style='color:#ffb52f;'>11</span>")
			   $('#2018-1-18').html("<span style='color:#ffb52f;'>18</span>")
			   $('#2018-1-25').html("<span style='color:#ffb52f;'>25</span>")
			   $('#week-7').html("<span style='color:#4cb0f4;'>日</span>")
			}
			
			//跳转到 月份
			function gotoMonth(arry){
				$('#calendar-oto').html(SetCalendar(arry[0],arry[1]))
				show()
			}
			//----------------日历----------------------------
			//运行日历
			var now = new Date();  
	        var year = now.getFullYear();       //年  
	        var month = now.getMonth() + 1;  
			$('#calendar-oto').html(SetCalendar(year,month))
<button class="btn">展示日历</button>
		
<div class="dialog-calendar">
  <div id="calendar-oto"></div>
</div>
.dialog-date{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);display: none;z-index: 99;}
.dialog-date .ul-box{float: left;width: 70%;margin-left: 10%;margin-top: 40px;background-color: white;border-radius: 10px;padding: 5%;}
.dialog-date .ul-box .p-title{float: left;width: 100%;text-align: center;font-size: 18px;color: #323232;}
.dialog-date .ul-box .ul-dates{float: left;width: 100%;margin-top: 16px;}
.dialog-date .ul-box .ul-dates li{float: left;width: 100%;line-height: 30px;}
.dialog-date .ul-box .ul-dates li .p-ok-box{float: left;width: 34px;text-align: center;}
.dialog-date .ul-box .ul-dates li .p-ok-box .sp-ok{float: left;width: 11px;height: 11px;background-color: #999999;border-radius: 50%;margin-top: 9px;margin-left: 6px;position: relative;border: 1px solid #999999;}
.dialog-date .ul-box .ul-dates li.active .p-ok-box .sp-ok{background-color: #4cb0f4;border-color: #4cb0f4;}
.dialog-date .ul-box .ul-dates li.active .p-ok-box .sp-ok:before{position: absolute;left: 10%;top: 0px;content: '';width: 80%;height: 100%;background-size: contain;z-index: 1;}
.dialog-date .ul-box .ul-dates li .p-date{float: left;font-size: 12px;color: #323232;}
.dialog-date .ul-box .ul-dates li.ot .p-date{color: #c1c1c1;}
.dialog-date .ul-box .ul-dates li .p-nums{float: left;font-size: 10px;color: #c1c1c1;margin-left: 18px;}
.dialog-calendar{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 99;display: none;}
.dialog-calendar #calendar-oto{float: left;width: 90%;margin-top: 10%;margin-left: 5%;background-color: white;border-radius: 10px;text-align: center;overflow: hidden;}
.dialog-calendar .p-title{font-size: 18px;color: #323232;line-height: 20px;margin-top: 16px;}
.dialog-calendar .pre-month{width: 0px;height: 0px;border: 1px solid red;border-color: transparent #323232 transparent transparent;border-width: 5px;display: inline-block;}
.dialog-calendar .next-month{width: 0px;height: 0px;border: 1px solid red;border-color: transparent transparent transparent #323232;border-width: 5px;display: inline-block;}
.dialog-calendar .p-month{display: inline-block;font-size: 14px;color: #323232;line-height: 44px;margin: 0px 10px;position: relative;top: 0px;}
.dialog-calendar #calendar-oto table{width: 100%;}
.dialog-calendar #calendar-oto .th{border-top: 1px solid #d6d7dc;border-bottom: 1px solid #d6d7dc;}
.dialog-calendar .tr-th{border-top: 1px solid #d6d7dc;border-bottom: 1px solid #d6d7dc;}
.dialog-calendar #calendar-oto th, .dialog-calendar #calendar-oto td{text-align: center;font-size: 10px;color: #323232;height: 36px;width: 10%;}
.dialog-calendar .mt20{margin: 20px;}
.dialog-calendar .sp-order{width: 30px;height: 30px;line-height: 30px;border-radius: 50%;text-align: center;background-color: #4cb0f4;font-size: 10px;color: white;display: inline-block;}