基於java實現的簡單網頁日歷功能，有興趣得可以把它轉換到前端實現

本文轉載自查看原文 2014-06-16 17:54 2781 java/ 網頁/ 日歷

　　之前做項目的時候，因為要用到不同日期顯示不同的內容，就自己做了一個日期的顯示和選擇功能，今天抽空把以前的代碼理了一下，順便就把之前做的日期功能給拿出來回顧一下，大家可以提點意見，幫忙完善下設計。先上一張完成后的顯示效果，本人是后端程序員，對於前端的一些效果不是很熟悉，畫面不好請見諒。。

　　下面切入正題：

　　我設計的日歷表是11*3的顯示，加上上一個月和下一個月的選項，對於大月的月份剛好足夠，但小月和二月就會有空格。為了方便我在頁面上展現日歷，我將上一月、下一月、空字符和日期一起封裝在了list集合中，使其在頁面中直接循環顯示出來

　　能夠實現當前日期的顯示和人工手動選擇日期的功能，在后台都可以得到選擇的日期的各項參數，可以進行你想要的操作

　　在設計和實現日歷的時候，我首先想要解決的就是得到今天這個日期在日歷表中的顯示情況，那必定需要得到今天的日期，還有今天所在月的總天數

　　對於得到當前所在月的天數的功能，我進行簡單的封裝，將list集合對象里面的內容補滿33個，方便在頁面中用循環的方式展現出來

　　封裝選擇日期所在月份的日歷表代碼如下

 1 public static List<String> getMonthDays(Date date){ 
 2         Calendar cal = Calendar.getInstance();  
 3         cal.setTime(date);  
 4         cal.set(cal.DATE, 1);//日期設置為1號  
 5         cal.roll(cal.DATE, -1);
 6         //roll和add的區別，add會減到上一個月，即1號減1會到上一個月的最后一天，而roll則只在當月進行加減，即1號減1跳轉到當月的最后一天， 
 7         Integer num = cal.get(cal.DAY_OF_MONTH);//獲得天數
 8         List<String> days = new ArrayList<String>();
 9         days.add("《上一月");//日歷第一格位置始終為上一月選項
10         for(int i=1;i<=num;i++){
11             
12             if(i<10){
13                 days.add("0"+i);
14             }else{
15                 days.add(i+"");
16             }
17         }
18         int index = 33-days.size();//得到33個位置剩下多少個位置
19         for(int i=1;i<=index;i++){
20             if(i==index){
21                 days.add("下一月》");//最后一個位置為下一月選項    
22             }else{
23                 days.add("");//其它位置添加空字符
24             }
25         }
26         return days;
27 
28     }

封裝選擇日期月份的代碼實現了，那我就要實現將當前天在日歷表中的日期給展示出來的代碼了：

public class MonthDate {
    private String chooseMonth; //當前選擇的日期月份
    private String chooseDay;    //當前選擇的日期天數
    private String chooseYear;    //當前選擇的日期年份
    private List<String> days;    //當前選擇的日期所在月份的天數，並加上上一個月、下一個月,空字符等內容
    
    
    public String getChooseMonth() {
        return chooseMonth;
    }
    public void setChooseMonth(String chooseMonth) {
        this.chooseMonth = chooseMonth;
    }

    public String getChooseDay() {
        return chooseDay;
    }

    public void setChooseDay(String chooseDay) {
        this.chooseDay = chooseDay;
    }

    public String getChooseYear() {
        return chooseYear;
    }
    public void setChooseYear(String chooseYear) {
        this.chooseYear = chooseYear;
    }
    public List<String> getDays() {
        return days;
    }
    public void setDays(List<String> days) {
        this.days = days;
    }

    public String monthDay(){
        Date d = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("MM");
        SimpleDateFormat sdf2 = new SimpleDateFormat("dd");
        SimpleDateFormat sdf3 = new SimpleDateFormat("yyyy");
        chooseMonth = sdf.format(d);
        chooseDay = sdf2.format(d);
        chooseYear = sdf3.format(d);
        //我這邊是方便處理，如果覺得這樣麻煩，可以不轉化時間成String對象，到時候在頁面直接通過<s:date name='' format=''/>實現顯示
        days = MonthNum.getMonthDays(d);//得到當前日期月份的封裝對象
        
        return "String";
    }

　　日歷需要顯示的屬性都得到了，接下來就是頁面的顯示了，顯示頁面非常的簡單，但我在設計的時候css樣式調試了很久

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 3 <%@ taglib prefix="s" uri="/struts-tags" %>
 4 
 5 
 6 <!DOCTYPE HTML >
 7 <html>
 8   <head>
 9     <title>簡單日期顯示功能</title>
10     <link rel="stylesheet" type="text/css" href="<c:url value="/css/date.css"/>"/>
11     <link rel="stylesheet" type="text/css" href="<c:url value="/css/reset.css"/>"/>
12       <script type="text/javascript">
13           function choosedate(e){
14             
15             var day = e.innerHTML;
16             if(day=="《上一月"){
17                 var month = document.getElementById("month").innerHTML;
18                 var inputM = document.getElementById("inputM");
19                 var year = document.getElementById("year").innerHTML;
20                 var inputY = document.getElementById("inputY");
21                 if(month-1==0){//判斷當前月是否為1月
22                     month=12;//是則月份換為12月且年份減1
23                     year=year-1;
24                     inputM.value = month;
25                 }else if(month-1<10){
26                     inputM.value = "0"+(month-1);
27                 }else{
28                     inputM.value = month-1;
29                 }
30                 inputY.value = year;
31                 var day = document.getElementById("day").innerHTML;
32                 var inputD = document.getElementById("inputD");
33                 inputD.value = day;
34                 var form = document.getElementById("dateForm");
35                 form.submit();
36             }else if(day=="下一月》"){
37                 var year = document.getElementById("year").innerHTML;
38                 var inputY = document.getElementById("inputY");
39                 var month = document.getElementById("month").innerHTML;
40                 var inputM = document.getElementById("inputM");
41                 if(month-1+2>12){//判斷當前月份是否為12月份，先減后加是為了將month對象轉化成Number對象
42                     month="01";//若為12，則下一月月份為01，且年份加1
43                     year = year-1+2;
44                     inputM.value=month;
45                 }else if(month-1+2<10){
46                     inputM.value = "0"+(month-1+2);
47                 }else{
48                     inputM.value = month-1+2;
49                 }
50                 inputY.value = year;
51                 var day = document.getElementById("day").innerHTML;
52                 var inputD = document.getElementById("inputD");
53                 inputD.value = day;
54                 var form = document.getElementById("dateForm");
55                 form.submit();
56             }else if(day!=""){
57                 var year = document.getElementById("year").innerHTML;
58                 var inputY = document.getElementById("inputY");
59                 inputY.value = year;
60                 var month = document.getElementById("month").innerHTML;
61                 var inputM = document.getElementById("inputM");
62                 inputM.value = month;
63                 var inputD = document.getElementById("inputD");
64                 inputD.value = e.innerHTML;
65                 var form = document.getElementById("dateForm");
66                 form.submit();
67             }
68         }
69       </script>
70   </head>
71   <body>
72     <!-- 日期選擇 -->
73         <div  class="datediv" >
74             <!-- 左側年份和月份的顯示 -->
75             <div >
76                 <font id="year" style=""><s:property value="chooseYear"/></font>
77                 <span id="month" style=""><s:property value="chooseMonth"/></span>
78             </div>
79             <!-- 循環顯示出月份內的日期和按鈕功能 -->
80             <ul >
81                 <s:iterator var="d" status="index" value="days">
82                     <s:if test="#d==chooseDay"><li id="day" style="background-color: #CAE1EF;">${d }</li></s:if>
83                     <s:else><li onclick="choosedate(this)" >${d }</li></s:else>
84                 </s:iterator>
85             </ul>
86         </div>
87         <form method="post" action="<c:url value="/MonthDate_monthDayByDate.action"/>" id="dateForm">
88               <input id="inputY" type="hidden" name="chooseYear"/>
89               <input id="inputM" type="hidden" name="chooseMonth"/>
90               <input id="inputD" type="hidden" name="chooseDay"/>
91           </form>    
92   </body>
93 </html>

　　日歷的顯示功能也實現了，接下來就實現日期選擇的功能，我上面已經預留了js方法，為實現選擇日期做准備，通過js得到鼠標選擇的對象和當前的年份和月份

　　因為日歷表中有上一月，下一月和空字符的選項，所以要對他們進行區分和處理，將處理得到的新的日期通過form表單提交到后台處理，為了圖方便，我將javascript代碼直接寫在jsp中了。

 1 function date(e){
 2             var day = e.innerHTML;
 3             if(day=="《上一月"){
 4                 
 5                 var month = document.getElementById("month").innerHTML;
 6                 var inputM = document.getElementById("inputM");
 7                 var year = document.getElementById("year").innerHTML;
 8                 var inputY = document.getElementById("inputY");
 9                 if(month-1==0){//判斷當前月是否為1月
10                     month=12;//是則月份換為12月且年份減1
11                     year=year-1;
12                     inputM.value = month;
13                 }else if(month-1<10){
14                     inputM.value = "0"+(month-1);
15                 }else{
16                     inputM.value = month-1;
17                 }
18                 inputY.value = year;
19                 var day = document.getElementById("day").innerHTML;
20                 var inputD = document.getElementById("inputD");
21                 inputD.value = day;
22                 var form = document.getElementById("dateForm");
23                 form.submit();
24             }else if(day=="下一月》"){
25                 var year = document.getElementById("year").innerHTML;
26                 var inputY = document.getElementById("inputY");
27                 var month = document.getElementById("month").innerHTML;
28                 var inputM = document.getElementById("inputM");
29                 if(month-1+2>12){//判斷當前月份是否為12月份，先減后加是為了將month對象轉化成Number對象
30                     month="01";//若為12，則下一月月份為01，且年份加1
31                     year = year-1+2;
32                     inputM.value=month;
33                 }else if(month-1+2<10){
34                     inputM.value = "0"+(month-1+2);
35                 }else{
36                     inputM.value = month-1+2;
37                 }
38                 inputY.value = year;
39                 var day = document.getElementById("day").innerHTML;
40                 var inputD = document.getElementById("inputD");
41                 inputD.value = day;
42                 var form = document.getElementById("dateForm");
43                 form.submit();
44             }else if(day!=""){
45                 var year = document.getElementById("year").innerHTML;
46                 var inputY = document.getElementById("inputY");
47                 inputY.value = year;
48                 var month = document.getElementById("month").innerHTML;
49                 var inputM = document.getElementById("inputM");
50                 inputM.value = month;
51                 var inputD = document.getElementById("inputD");
52                 inputD.value = e.innerHTML;
53                 var form = document.getElementById("dateForm");
54                 form.submit();
55             }
　　　　　　}

　　接下來是處理選擇特定日期的日歷顯示代碼

 1     public String monthDayByDate(){
 2         //選擇日期的時候跳轉
 3         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
 4         date = chooseYear+"-"+chooseMonth+"-"+"01";//將form表單傳遞過來的參數組合成時間,這里用01，而不用傳遞過來的天，是為了避免傳過來的天數超過當前月份的總天數，而被加到下一個月
 5         try {
 6             days = Tool.getMonthDays(sdf.parse(date));//得到新選擇的日期的所在月份集合
 7         } catch (ParseException e) {
 8             days = Tool.getMonthDays(new Date());//如果轉換失敗則得到當前時間的月份集合
 9             e.printStackTrace();
10         }
11         int chooseD = Integer.parseInt(chooseDay);
12         //上一月下一月的切換，傳遞過來的選擇的天數還是之前的日期，所以要對這個第幾天進行判斷是否存在，即選擇的是30號，但它是2月，則需要將天數轉換
13         if("02".equals(chooseMonth)&&chooseD>=29){//判斷是否為2月且選擇的天是大於等於29的
14             if("".equals(days.get(29))){//則判斷這個2月份是否有29號，有則選擇天數為29，否則則選擇的是28號
15                 chooseDay = "28";
16             }else{
17                 chooseDay="29";
18             }
19         }
20         else if("".equals(days.get(31))&&chooseD==31){//判斷大小月和選擇的日期是否是31
21             chooseDay = chooseD-1+"";
22         }
23         return "monthday";
24     }

　　最后將得到當前的日期和自己選擇的日期后台功能整合在一起，用選擇的日期是否為空來判斷是當天的還是自己選擇日期的日歷，將頁面上的form表單提交的地址改為修改后的地址就可以通過一個地址來實現當前天和自己選擇的日期功能了

 1 public String monthDate(){
 2         if(chooseDay==null){
 3             Date d = new Date();
 4             SimpleDateFormat sdf = new SimpleDateFormat("MM");
 5             SimpleDateFormat sdf2 = new SimpleDateFormat("dd");
 6             SimpleDateFormat sdf3 = new SimpleDateFormat("yyyy");
 7             chooseMonth = sdf.format(d);
 8             chooseDay = sdf2.format(d);
 9             chooseYear = sdf3.format(d);
10             //我這邊是方便處理，如果覺得這樣麻煩，可以不轉化時間成String對象，到時候在頁面直接通過<s:date name='' format=''/>實現顯示
11             days = MonthNum.getMonthDays(d);//得到當前日期月份的封裝對象
12         }else{
13             //選擇日期的時候跳轉
14             SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
15             date = chooseYear+"-"+chooseMonth+"-"+"01";//將form表單傳遞過來的參數組合成時間,這里用01，而不用傳遞過來的天，是為了避免傳過來的天數超過當前月份的總天數，而被加到下一個月
16             try {
17                 days = Tool.getMonthDays(sdf.parse(date));//得到新選擇的日期的所在月份集合
18             } catch (ParseException e) {
19                 days = Tool.getMonthDays(new Date());//如果轉換失敗則得到當前時間的月份集合
20                 e.printStackTrace();
21             }
22             int chooseD = Integer.parseInt(chooseDay);
23             //上一月下一月的切換，傳遞過來的選擇的天數還是之前的日期，所以要對這個第幾天進行判斷是否存在，即選擇的是30號，但它是2月，則需要將天數轉換
24             if("02".equals(chooseMonth)&&chooseD>=29){//判斷是否為2月且選擇的天是大於等於29的
25                 if("".equals(days.get(29))){//則判斷這個2月份是否有29號，有則選擇天數為29，否則則選擇的是28號
26                     chooseDay = "28";
27                 }else{
28                     chooseDay="29";
29                 }
30             }
31             else if("".equals(days.get(31))&&chooseD==31){//判斷大小月和選擇的日期是否是31
32                 chooseDay = chooseD-1+"";
33             }
34         }
35         return "monthday";
36     }

　　這樣在服務器上運行起來就可以在網頁上實現簡單的日歷功能了！

點擊這里下載源碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 java實現簡單的日歷功能 Java實現打印日歷的功能 nodeJS實現簡單網頁爬蟲功能基於jquery實現日歷簽到功能 js實現日歷的簡單算法 Java 實現的簡單WordCount功能 vue實現簡單日歷 jQuery實現簡單前端搜索功能 vue實現簡單的前端分頁功能 Java實現網頁截屏功能（基於phantomJs）