之前做项目的时候,因为要用到不同日期显示不同的内容,就自己做了一个日期的显示和选择功能,今天抽空把以前的代码理了一下,顺便就把之前做的日期功能给拿出来回顾一下,大家可以提点意见,帮忙完善下设计。先上一张完成后的显示效果,本人是后端程序员,对于前端的一些效果不是很熟悉,画面不好请见谅。。
下面切入正题:
我设计的日历表是11*3的显示,加上上一个月和下一个月的选项,对于大月的月份刚好足够,但小月和二月就会有空格。为了方便我在页面上展现日历,我将上一月、下一月、空字符和日期一起封装在了list集合中,使其在页面中直接循环显示出来
能够实现当前日期的显示和人工手动选择日期的功能,在后台都可以得到选择的日期的各项参数,可以进行你想要的操作
在设计和实现日历的时候,我首先想要解决的就是得到今天这个日期在日历表中的显示情况,那必定需要得到今天的日期,还有今天所在月的总天数
对于得到当前所在月的天数的功能,我进行简单的封装,将list集合对象里面的内容补满33个,方便在页面中用循环的方式展现出来
封装选择日期所在月份的日历表代码如下
1 public static ListgetMonthDays(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 days = new ArrayList();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 returndays;27
28 }
封装选择日期月份的代码实现了,那我就要实现将当前天在日历表中的日期给展示出来的代码了:
public classMonthDate {private String chooseMonth; //当前选择的日期月份
private String chooseDay; //当前选择的日期天数
private String chooseYear; //当前选择的日期年份
private List days; //当前选择的日期所在月份的天数,并加上上一个月、下一个月,空字符等内容
publicString getChooseMonth() {returnchooseMonth;
}public voidsetChooseMonth(String chooseMonth) {this.chooseMonth =chooseMonth;
}publicString getChooseDay() {returnchooseDay;
}public voidsetChooseDay(String chooseDay) {this.chooseDay =chooseDay;
}publicString getChooseYear() {returnchooseYear;
}public voidsetChooseYear(String chooseYear) {this.chooseYear =chooseYear;
}public ListgetDays() {returndays;
}public void setDays(Listdays) {this.days =days;
}publicString monthDay(){
Date d= newDate();
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对象,到时候在页面直接通过实现显示
days = MonthNum.getMonthDays(d);//得到当前日期月份的封装对象
return "String";
}
日历需要显示的属性都得到了,接下来就是页面的显示了,显示页面非常的简单,但我在设计的时候css样式调试了很久
1
2
3
4
5
6
7
8
9
简单日期显示功能
10 "/>11 "/>12
13 functionchoosedate(e){14
15 varday=e.innerHTML;16 if(day=="《上一月"){17 varmonth=document.getElementById("month").innerHTML;18 varinputM=document.getElementById("inputM");19 varyear=document.getElementById("year").innerHTML;20 varinputY=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 varday=document.getElementById("day").innerHTML;32 varinputD=document.getElementById("inputD");33 inputD.value=day;34 varform=document.getElementById("dateForm");35 form.submit();36 }else if(day=="下一月》"){37 varyear=document.getElementById("year").innerHTML;38 varinputY=document.getElementById("inputY");39 varmonth=document.getElementById("month").innerHTML;40 varinputM=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 varday=document.getElementById("day").innerHTML;52 varinputD=document.getElementById("inputD");53 inputD.value=day;54 varform=document.getElementById("dateForm");55 form.submit();56 }else if(day!=""){57 varyear=document.getElementById("year").innerHTML;58 varinputY=document.getElementById("inputY");59 inputY.value=year;60 varmonth=document.getElementById("month").innerHTML;61 varinputM=document.getElementById("inputM");62 inputM.value=month;63 varinputD=document.getElementById("inputD");64 inputD.value=e.innerHTML;65 varform=document.getElementById("dateForm");66 form.submit();67 }68 }69
70
71
72
73
74
75
76
77
78
79
80
81
82 ${d }
83 ${d }
84
85
86