js实现日期显示的一些操作

1、js获取当前日期(yyyy-mm-dd)

以下代码是获取到的当前日期:

1 var myDate = new Date();    
2 var year = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
3 var month = myDate.getMonth()+1;       //获取当前月份(1-12)
4 var day = myDate.getDate();        //获取当前日(1-31)
5 //获取完整年月日
6 var newDay = year + “-” + month + “-” + day;

2、点击实现日期的天数加减(yyyy-mm-dd)

点击俩个按钮分别可以实现日期的加减,如果本月天数达到最多,那么月份将会自动增加或减少

 1 var n = 0;
 2 dayChange(0)
 3 $("#time-add").click(function(){
 4    n++;
 5    dayChange(n);
 6 })
 7 $("#time-less").click(function(){
 8    n--;
 9    dayChange(n);
10 })
11 function dayChange(n){
12    var now = new Date();//今天
13    var tomo = new Date((now/1000+86400*n)*1000);//明天
14    var month = tomo.getMonth() + 1;
15    var strDate = tomo.getDate();  
16    var seperator1 = "-";
17    if (month >= 1 && month <= 9) {
18        month = "0" + month;
19    }
20    if (strDate >= 0 && strDate <= 9) {
21        strDate = "0" + strDate;
22    }
23     var currentdate = tomo.getFullYear() + seperator1 + month + seperator1 + strDate;
24     $(".center-day").html(currentdate);
25 }

3、获取当前本周周一和本周周日的时间范围

不管当前是周几,都可以获取到当前所在这一周的起始时间

 1   var now = new Date();//今天
 2   week(now);  
 3   function week(now){
 4     var nowTime = now.getTime() ; 
 5     var day = now.getDay();
 6     var oneDayLong = 24*60*60*1000 ; 
 7  //获取本周所在周一
 8     var MondayTime = nowTime - (day-1)*oneDayLong  ; 
 9  //获取本周所在周末                    
10    var SundayTime =  nowTime + (7-day)*oneDayLong ; 
11  //转化日期
12   var monday = new Date(MondayTime);
13   var sunday = new Date(SundayTime);
14   var month = monday.getMonth() + 1;
15   var strDate = monday.getDate();
16   var month1 = sunday.getMonth() + 1;
17   var strDate1 = sunday.getDate();
18   if (month >= 1 && month <= 9) {
19       month = "0" + month;
20   }
21   if (month1 >= 1 && month1 <= 9) {
22       month1 = "0" + month1;
23   }
24   if (strDate >= 0 && strDate <= 9) {
25       strDate = "0" + strDate;
26   }
27   if (strDate1 >= 0 && strDate1 <= 9) {
28       strDate1 = "0" + strDate1;
29   }
30   currentdate = monday.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + sunday.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
31   $(".center-day").html(currentdate);
32}   

4、点击实现每周范围的变化

点击改变的按钮将会改变显示一周范围的改变,如果有的在下一月或者下一年,那么将会自动显示,不会出现错误

 1 var now = new Date();//今天
 2 var n = 0;
 3 week(now);  
 4 $("#week-add").click(function(){
 5     n++;
 6     var date = new Date(now.getTime() + n*7*24*3600*1000);
 7     week(date);
 8 })
 9 $("#week-add").click(function(){
10     n--;
11     var date = new Date(now.getTime() + n*7*24*3600*1000);
12     week(date);
13 })
14 function week(now){
15   var nowTime = now.getTime() ; 
16   var day = now.getDay();
17   var oneDayLong = 24*60*60*1000 ; 
18 //获取本周所在周一
19   var MondayTime = nowTime - (day-1)*oneDayLong  ; 
20 //获取本周所在周末                    
21   var SundayTime =  nowTime + (7-day)*oneDayLong ; 
22//转化日期
23   var monday = new Date(MondayTime);
24   var sunday = new Date(SundayTime);
25   var month = monday.getMonth() + 1;
26   var strDate = monday.getDate();
27   var month1 = sunday.getMonth() + 1;
28   var strDate1 = sunday.getDate();
29   if (month >= 1 && month <= 9) {
30       month = "0" + month;
31   }
32   if (month1 >= 1 && month1 <= 9) {
33       month1 = "0" + month1;
34   }
35   if (strDate >= 0 && strDate <= 9) {
36      strDate = "0" + strDate;
37   }
38   if (strDate1 >= 0 && strDate1 <= 9) {
39      strDate1 = "0" + strDate1;
40   }
41   currentdate = monday.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + sunday.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
42   $(".center-day").html(currentdate);
43 }       

5、获取当前月份的第一天和最后一天

能够获取到当前所在月份的第一天和最后一天,最后一天的日期是不固定的,能够获取到应有的日期

 1 monthfen(0)
 2 function monthfen(n){
 3   var now = new Date();//今天
 4   var firstDate = new Date((now/1000+86400*n*now.getDate())*1000);//明天
 5  //本月第一天
 6   firstDate.setDate(1); //第一天
 7   var date = new Date(firstDate);
 8   var month = date.getMonth() + 1;
 9   var strDate = "0" + date.getDate();
10  //本月最后一天
11   var endDate = new Date(firstDate);
12   endDate.setMonth(firstDate.getMonth()+1);
13   endDate.setDate(0);
14   var date1 = new Date(endDate);
15   var month1 = date1.getMonth() + 1;
16   var strDate1 = date1.getDate();
17   if (month >= 1 && month <= 9) {
18     month = "0" + month;
19   }
20   if (month1 >= 1 && month1 <= 9) {
21     month1 = "0" + month1;
22   }
23   currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + date1.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
24   $(".center-day").html(currentdate);
25 }

6、点击实现当前月份的改变

点击按钮会实现当前月份的改变,那么最后一天的日期也会自动改变,

 1 monthfen(0)
 2 var n = 0;
 3 $("#month-add").click(function(){
 4     n++;
 5     monthfen(n);
 6 })
 7 $("#month-less").click(function(){
 8     n--;
 9     monthfen(n);
10 })
11 function monthfen(n){
12   var now = new Date();//今天
13   var firstDate = new Date((now/1000+86400*n*now.getDate())*1000);//明天
14 //本月第一天
15   firstDate.setDate(1); //第一天
16   var date = new Date(firstDate);
17   var month = date.getMonth() + 1;
18   var strDate = "0" + date.getDate();
19 //本月最后一天
20   var endDate = new Date(firstDate);
21   endDate.setMonth(firstDate.getMonth()+1);
22   endDate.setDate(0);
23   var date1 = new Date(endDate);
24   var month1 = date1.getMonth() + 1;
25   var strDate1 = date1.getDate();
26   if (month >= 1 && month <= 9) {
27     month = "0" + month;
28   }
29   if (month1 >= 1 && month1 <= 9) {
30     month1 = "0" + month1;
31   }
32   currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + "至" + date1.getFullYear() + seperator1 + month1 + seperator1 + strDate1;
33   $(".center-day").html(currentdate);
34 }

当然还有很多关于日期格式的改变和算法,如果有什么不理解的可以留下评论,大家一起探讨。



posted @ 2017-07-26 15:33  TrendY  阅读(16373)  评论(0编辑  收藏  举报