原⽣JS⽇历+JS格式化时间格式公司项⽬中⽤到，以前没做过，废了好⼏个⼩时终于做好了先来效果图（暂时没写样式凑合着看吧）
点击左右按钮都能改变⽉份下⽅表格中的数据也会跟着变化
贴上代码 :
    html部分：
<div >
<!--上⾯显⽰的年份⽉份  -->
<div >
<span >
<img src="${ctx}/upload/img/left.png" alt="上个⽉" onclick="clickLeft()" class="showImg" width="21"/>
</span>
<span id="thisYears"></span>
<span >
<img src="${ctx}/upload/img/right.png" alt="下个⽉"  onclick="clickRight()" class="showImg" width="21"/>
</span>
</div>
<!--table部分  -->
<div >
<table border="1px"  cellspacing="0" cellpadding="0">
<thead >
<tr>
<td>
<div>星期⽇</div>
</td>
<td>
<div>星期⼀</div>
</td>
<td>
<div>星期⼆</div>
</td>
<td>
<div>星期三</div>
</td>
<td>
<div>星期四</div>
</td>
<td>
<div>星期五</div>
</td>
原生js和js的区别
<td>
<div>星期六</div>
</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
JS部分
<script type="text/javascript">
var currentYear = 0;//当前显⽰的年
var currentMonth = 0;//当前显⽰的⽉
//⽇历填充⽅法
function calendar (){
var date = new Date();
layTable(date);
currentYear =thisYear(date);
currentMonth =thisMonth(date);
$('#thisYears').html(currentYear+"年"+currentMonth+"⽉");
}
/
/铺表格
function layTable(date){
var startDays = thisDays(date);//1号星期⼏
var count = getDays(thisYear(date),thisMonth(date));//获取这个⽉有多少天
var tr_str= il((count + startDays)/7); //取上限打印多少⾏
var td_str = "";
var index =0;
var istop = true;//铺表格的时候要判断是否是第⼀⾏
for(var i=0;i<tr_str;i++){ //循环多少⾏
td_str +="<tr class='datetr'>";
for(var j=1;j<=7;j++){
if(startDays>0 && istop==true){//如果这个⽉第⼀天不是星期天，那么就对应的打印多少个空<td></td>
istop = false;
for(var l=0;l<startDays;l++){
td_str +="<td></td>";
}
j=startDays; //因为内循环已经铺了⼏个空位了，外⾯的循环就要少铺设对应的条数
}else{
index++;
if(index<=count){//如果超过了这个⽉的天数，就再次给赋空值
td_str +="<td><div onclick='clickdate("+thisYear(date)+","+thisMonth(date)+","+index+")'>"+index+"</div></td>";                        }else{
td_str +="<td></td>";
}
}
}
td_str +="</tr>";
$('#tbody').append(td_str);
td_str = "";
}
}
//获取年份
function thisYear(date){
FullYear();
}
//获取⽉份
function thisMonth(date){
Month()+1;
}
//获取该⽉份的第⼀天是星期⼏ 0是星期天 1 2 3 4 5 6
function thisDays(date){
date.setDate(1);
var week = Day();
return week;
}
/
/ 获取当⽉⼀共有多少天
function getDays(year,mouth){
//定义当⽉的天数；
var days ;
//当⽉份为⼆⽉时，根据闰年还是⾮闰年判断天数
if(mouth == 2){
days= year % 4 == 0 ? 29 : 28;
}
//⽉份为：1,3,5,7,8,10,12 时，为⼤⽉.则天数为31；
else if(mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12){
days= 31;
}
//其他⽉份，天数为：30.
else{
days= 30;
}
return days;
}
//点击左箭头
function clickLeft(){
if(currentMonth-1 != 0){
currentMonth = currentMonth-1;
var date = new Date(currentYear,currentMonth-1);
}else{
currentYear = currentYear-1;
currentMonth = 12;
var date =    new Date(currentYear,currentMonth-1);
}
$('#thisYears').html(currentYear+"年"+currentMonth+"⽉");
clearTable();
layTable(date);
}
//点击右箭头
function clickRight(){
if(currentMonth+1 < 13){
currentMonth = currentMonth+1;
var date = new Date(currentYear,currentMonth-1);
}else{
currentYear = currentYear+1;
currentMonth = 1;
var date =    new Date(currentYear,currentMonth-1);
}
$('#thisYears').html(currentYear+"年"+currentMonth+"⽉");
clearTable();
layTable(date);
}
//清空表格中的数
function clearTable(){
$("#tbody").html("");
}
//当点击时间时
function clickdate(year,month,day){//获取年⽉⽇
alert(year+"年"+month+"⽉"+day+"⽇");
}
</script>
JS格式化时间：
  格式化前：Wed Oct 18 2017 00:00:00 GMT+0800 (中国标准时间)  格式化后：2017-10-18
　代码：
//格式化时间
function  formatDate (date) {
var y = FullYear();
var m = Month() + 1;
m = m < 10 ? '0' + m : m;
var d = Date();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。