一、页面效果
1、展示7月份的所有周。
2、当前时间2018.08.02 , 显示到本周。
二、前端代码
1、显示层的代码
<span id="weekyear"> <select class="radius" id="selectyear" name="selectyear" onchange="getmyMonth(this);" style=" 80px; height: 33px;"> <c:forEach var="ys" items="${years}"> <option value="${ys}">${ys}年</option> </c:forEach> </select> </span> <span id="weekmon"> <select class="radius" id="selectmon" name="selectmon" onchange="getmyweeks(this);" style=" 80px; height: 33px;"> </select> </span> <span id="week"></span>
2、
进入页面时加载getmyMonthOne函数,生产月份数据。
ajax返回时再调用getmyweekOne(selectyear,selectmon);
生产这一个月的每一周。
//页面加载 function getmyMonthOne(){ $.ajax({ type : 'POST', url : '${ctx}/weekly/weekly/createMon', data : '', success : function(data) { var obj = JSON.parse(data); var monthNode = document.getElementById("selectmon"); $("#selectmon").find("option").remove(); $.each(obj,function(name,value) { var opt = document.createElement("option"); //设置option标签体 if(value.mon<10){ opt.innerHTML="0"+value.mon+"月"; opt.value=value.mon; }else { opt.innerHTML=value.mon+"月"; opt.value=value.mon; } monthNode.appendChild(opt); } ); //当前年月 var selectyear = $("#selectyear").val(); var selectmon = $("#selectmon").val(); getmyweekOne(selectyear,selectmon); } }); }
//创建月 function getmyMonth(o){ //获取选择的年份 var index=o.selectedIndex; var oldyear = o.options[index].value; $.ajax({ type : 'POST', url : '${ctx}/weekly/weekly/createMon', data : 'selectyear='+oldyear, success : function(data) { var obj = JSON.parse(data); var monthNode = document.getElementById("selectmon"); $("#selectmon").find("option").remove(); $.each(obj,function(name,value) { var opt = document.createElement("option"); //设置option标签体 if(value.mon<10){ opt.innerHTML="0"+value.mon+"月"; opt.value=value.mon; }else { opt.innerHTML=value.mon+"月"; opt.value=value.mon; } monthNode.appendChild(opt); } ); //页面显示当前年月 var selectyear = $("#selectyear").val(); var selectmon = $("#selectmon").val(); getmyweekOne(selectyear,selectmon); } }); }
3、生产一个月的所有周。
/* 切换年份时选择生成周 */ function getmyweekOne(oNeyear,Onemon){ //首先清除已经有的周份 $("#week").html(""); var oldmon = Onemon; //获取选择的年份 var selectyear = oNeyear;//选中的值 $.ajax({ type:'POST', url:'${ctx}/weekly/weekly/dateWeek', data:'selectyear='+selectyear+"&selectmonth="+oldmon, success:function(data){ var obj = JSON.parse(data); $.each(obj,function(name,value) { if(value.isCurrWeek==1){ $("#week").append(" <button class='btn btn-success radius' style='margin-top:1%;' data-title='写周报' data-href='${ctx}/weekly/weekly/new?myfrom=" + value.weekStartDay + "&myto=" + value.weekendDay + "&myyear=" + value.startYear + "' onclick='newOrEditweek(this);' value="+value.weekStartDay+","+value.weekendDay+","+value.startYear+","+value.endYear+">"+value.weekStartDay+"/"+value.weekendDay+"(本周)</button> "); }else{ $("#week").append(" <button class='btn btn-success radius' style='margin-top:1%;' data-title='写周报' data-href='${ctx}/weekly/weekly/new?myfrom=" + value.weekStartDay + "&myto=" + value.weekendDay + "&myyear=" + value.startYear + "' onclick='newOrEditweek(this);' value="+value.weekStartDay+","+value.weekendDay+","+value.startYear+","+value.endYear+">"+value.weekStartDay+"/"+value.weekendDay+"</button> "); } }); } }); } //生成周 function getmyweeks(o){ //首先清除已经有的周份 $("#week").html(""); //获取选择的月份 var index=o.selectedIndex; var oldmon = o.options[index].value; //获取选择的年份 var selectyear = $('#selectyear option:selected').val();//选中的值 $.ajax({ type:'POST', url:'${ctx}/weekly/weekly/dateWeek', data:'selectyear='+selectyear+"&selectmonth="+oldmon, success:function(data){ var obj = JSON.parse(data); $.each(obj,function(name,value) { if(value.isCurrWeek==1){ $("#week").append(" <button class='btn btn-success radius' style='margin-top:1%;' data-title='写周报' data-href='${ctx}/weekly/weekly/new?myfrom=" + value.weekStartDay + "&myto=" + value.weekendDay + "&myyear=" + value.startYear + "' onclick='newOrEditweek(this);' value="+value.weekStartDay+","+value.weekendDay+","+value.startYear+","+value.endYear+">"+value.weekStartDay+"/"+value.weekendDay+"(本周)</button> "); }else{ $("#week").append(" <button class='btn btn-success radius' style='margin-top:1%;' data-title='写周报' data-href='${ctx}/weekly/weekly/new?myfrom=" + value.weekStartDay + "&myto=" + value.weekendDay + "&myyear=" + value.startYear + "' onclick='newOrEditweek(this);' value="+value.weekStartDay+","+value.weekendDay+","+value.startYear+","+value.endYear+">"+value.weekStartDay+"/"+value.weekendDay+"</button> "); } }); } }); }
三、后端代码
1、Mon类(传递月份)
public class Mon { private String mon; public String getMon() { return mon; } public void setMon(String mon) { this.mon = mon; } public Mon() { } }
2、WeekStartAndEndDate类(传递周列表的参数)
public class WeekStartAndEndDate { private String weekStartDay; private String weekendDay; private String isCurrWeek; private String startYear; private String endYear; public String getStartYear() { return startYear; } public void setStartYear(String startYear) { this.startYear = startYear; } public String getEndYear() { return endYear; } public void setEndYear(String endYear) { this.endYear = endYear; } public String getWeekStartDay() { return weekStartDay; } public void setWeekStartDay(String weekStartDay) { this.weekStartDay = weekStartDay; } public String getWeekendDay() { return weekendDay; } public void setWeekendDay(String weekendDay) { this.weekendDay = weekendDay; } public String getIsCurrWeek() { return isCurrWeek; } public void setIsCurrWeek(String isCurrWeek) { this.isCurrWeek = isCurrWeek; } public WeekStartAndEndDate() { // TODO Auto-generated constructor stub } }
3、处理周的controller
@RequestMapping("/dateWeek") public void dateWeek(HttpServletRequest request,HttpServletResponse response) { String selectyear = request.getParameter("selectyear"); String selectmonth = request.getParameter("selectmonth"); int selcctYearVal = Integer.parseInt(selectyear); int selcctMonthVal = Integer.parseInt(selectmonth); PrintWriter out = null; try { out = response.getWriter(); Dateutil date = new Dateutil(); //判断是不是本月 Calendar calendar = Calendar.getInstance(); calendar.setTime(new Date()); int currYear = calendar.get(Calendar.YEAR);//当前年份 int currMonth = (calendar.get(Calendar.MONTH) + 1);//当前月份 SimpleDateFormat sdfYMd = new SimpleDateFormat("yyyy-MM-dd"); ArrayList<WeekStartAndEndDate> list = new ArrayList<>(); if(selcctYearVal == currYear&&selcctMonthVal==currMonth){ //本月 String stone = selectyear+"-"+selectmonth+"-"+01; //当前日期 Date d = new Date(); String end = sdfYMd.format(d); int countstart = date.getWeek(stone);//当前月份的第一天在本年的多少周 int countend = date.getWeek(end); //当前时间在本年的多少周 //如果是新的一年(countend取同一年的最后一周) int sum = countend-countstart; int sumYear = date.getWeekCountYear(new Date())-countstart; if(sum<0){ sum = sumYear+1; } //展示一个月的每周数据 SimpleDateFormat sdf = new SimpleDateFormat("MM-dd"); for (int i = 0; i <=sum; i++){ WeekStartAndEndDate wsae = new WeekStartAndEndDate(); Date weekStartDayData = date.getFirstDayOfWeek(selcctYearVal, countstart-1); Date weekendDayData = date.getLastDayOfWeek(selcctYearVal, countstart-1); //一周开始时间 String weekStartDay = sdf.format(weekStartDayData); //一周结束时间 String weekendDay = sdf.format(weekendDayData); wsae.setWeekStartDay(weekStartDay); wsae.setWeekendDay(weekendDay); wsae.setStartYear(sdfYMd.format(weekStartDayData).substring(0,4)); wsae.setEndYear(sdfYMd.format(weekendDayData).substring(0,4)); //本周 if(i==sum){ wsae.setIsCurrWeek("1");//代表本周 } countstart++; list.add(wsae); } }else{ //获得本月开始日期 String stone = selectyear+"-"+selectmonth+"-"+01; //获取本月最后一天 String end = date.getLastDayOfMonth(selcctYearVal,selcctMonthVal); int countstart = date.getWeek(stone);//当前月份的第一天在本年的多少周 int countend = date.getWeek(end); //当前月份的最后一天在本年的多少周 //如果是新的一年(countend取同一年的最后一周) int sum = countend-countstart;//本月展示的周数 int sumYear = date.getWeekCountYear(new Date())-countstart; if(sum<0){ sum = sumYear+1; } //展示一个月的每周数据 SimpleDateFormat sdf = new SimpleDateFormat("MM-dd"); //判断本周 Date nowDate = new Date(); SimpleDateFormat sdfNow = new SimpleDateFormat("yyyy-MM-dd"); String dateNowStr = sdfNow.format(nowDate); int nowWeekCount = date.getWeek(dateNowStr); for (int i = 0; i <=sum; i++){ WeekStartAndEndDate wsae = new WeekStartAndEndDate(); Date weekStartDayData = date.getFirstDayOfWeek(selcctYearVal, countstart-1); Date weekendDayData = date.getLastDayOfWeek(selcctYearVal, countstart-1); //一周开始时间 String weekStartDay = sdf.format(weekStartDayData); //一周结束时间 String weekendDay = sdf.format(weekendDayData); wsae.setWeekStartDay(weekStartDay); wsae.setWeekendDay(weekendDay); wsae.setStartYear(sdfYMd.format(weekStartDayData).substring(0,4)); wsae.setEndYear(sdfYMd.format(weekendDayData).substring(0,4)); //设置本周 if(selcctYearVal==currYear && nowWeekCount==countstart){ wsae.setIsCurrWeek("1");//代表本周 } list.add(wsae); countstart++; } } JSONArray result = JSONArray.fromObject(list); out.print(result.toString()); } catch (IOException e) { out.print(0); } }
4、生成月份
/** * 生成月份 * @param request * @param response */ @RequestMapping("/createMon") public void createMon(HttpServletRequest request,HttpServletResponse response) { String selectyear = request.getParameter("selectyear"); PrintWriter out = null; try { out = response.getWriter(); Calendar calendar=Calendar.getInstance(); calendar.setTime(new Date()); //获取当前年 int year = calendar.get(Calendar.YEAR); //获取当前月 int month=calendar.get(Calendar.MONTH)+1; //创建年份数组 List<Mon> months = new ArrayList<Mon>(); //本年已经过去的月份 if(StringUtils.isNotEmpty(selectyear)){ int intYearVal = Integer.parseInt(selectyear); if (intYearVal == year) { for (int j = month; 1 <= j; j--) { Mon m = new Mon(); m.setMon(j+""); months.add(m); } }else{ for (int o = 1; o <= 12; o++) { Mon m = new Mon(); m.setMon(o+""); months.add(m); } } }else{ for (int j = month; 1 <= j; j--) { Mon m = new Mon(); m.setMon(j+""); months.add(m); } } JSONArray result = JSONArray.fromObject(months); out.print(result.toString()); } catch (Exception e) { out.print(0); } }
5、进入页面时,需要生成的年份。
Calendar calendar=Calendar.getInstance(); calendar.setTime(new Date()); //获取当前年 int year = calendar.get(Calendar.YEAR); List<Integer> years = new ArrayList<Integer>(); //2015 start for (int i = year; 2015 <= i; i--) { years.add(Integer.valueOf(i)); } request.setAttribute("years", years);
6、工具类
public class Dateutil { /** * 取得当前日期是多少周 * * @param date * @return */ public static int getWeekOfYear(Date date) { Calendar c = new GregorianCalendar(); c.setFirstDayOfWeek(Calendar.MONDAY); c.setMinimalDaysInFirstWeek(7); c.setTime (date); return c.get(Calendar.WEEK_OF_YEAR); } /** * 得到某一年周的总数 * * @param year * @return */ // public static int getMaxWeekNumOfYear(int year) { // Calendar c = new GregorianCalendar(); // c.set(year, Calendar.DECEMBER, 31, 23, 59, 59); // // return getWeekOfYear(c.getTime()); // } /** * 设置周一为每周第一天(得到某一年周的总数) * @param date * @return */ public static int getWeekCountYear(Date date){ // 获取日历类实例 java.util.Calendar calendar = java.util.Calendar.getInstance(); // 设置时间 calendar.setTime(date); // 设置周一为每周第一天 calendar.setFirstDayOfWeek(java.util.Calendar.MONDAY); // 返回当年最大周数 return calendar.getActualMaximum(java.util.Calendar.WEEK_OF_YEAR); } /** * 得到某年某周的第一天 * * @param year * @param week * @return */ public static Date getFirstDayOfWeek(int year, int week) { Calendar c = new GregorianCalendar(); c.set(Calendar.YEAR, year); c.set (Calendar.MONTH, Calendar.JANUARY); c.set(Calendar.DATE, 1); Calendar cal = (GregorianCalendar) c.clone(); cal.add(Calendar.DATE, week * 7); return getFirstDayOfWeek(cal.getTime ()); } /** * 得到某年某周的最后一天 * * @param year * @param week * @return */ public static Date getLastDayOfWeek(int year, int week) { Calendar c = new GregorianCalendar(); c.set(Calendar.YEAR, year); c.set(Calendar.MONTH, Calendar.JANUARY); c.set(Calendar.DATE, 1); Calendar cal = (GregorianCalendar) c.clone(); cal.add(Calendar.DATE , week * 7); return getLastDayOfWeek(cal.getTime()); } /** * 取得指定日期所在周的第一天 * * @param date * @return */ public static Date getFirstDayOfWeek(Date date) { Calendar c = new GregorianCalendar(); c.setFirstDayOfWeek(Calendar.MONDAY); c.setTime(date); c.set(Calendar.DAY_OF_WEEK, c.getFirstDayOfWeek()); // Monday return c.getTime (); } /** * 取得指定日期所在周的最后一天 * * @param date * @return */ public static Date getLastDayOfWeek(Date date) { Calendar c = new GregorianCalendar(); c.setFirstDayOfWeek(Calendar.MONDAY); c.setTime(date); c.set(Calendar.DAY_OF_WEEK, c.getFirstDayOfWeek() + 6); // Sunday return c.getTime(); } /** * 取得当前日期所在周的第一天 * * @param date * @return */ public static Date getFirstDayOfWeek() { Calendar c = new GregorianCalendar(); c.setFirstDayOfWeek(Calendar.MONDAY); c.setTime(new Date()); c.set(Calendar.DAY_OF_WEEK, c.getFirstDayOfWeek()); // Monday return c.getTime (); } /** * 取得当前日期所在周的最后一天 * * @param date * @return */ public static Date getLastDayOfWeek() { Calendar c = new GregorianCalendar(); c.setFirstDayOfWeek(Calendar.MONDAY); c.setTime(new Date()); c.set(Calendar.DAY_OF_WEEK, c.getFirstDayOfWeek() + 6); // Sunday return c.getTime(); } /** * 得到某一天是这一年的第几周 * * @param date * @return */ public static int getWeek(String date) { Calendar cal = Calendar.getInstance(); SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); try { //设置周一开始算 cal.setFirstDayOfWeek(Calendar.MONDAY); cal.setTime(format.parse(date)); } catch (ParseException e) { e.printStackTrace(); } int week = cal.get(Calendar.WEEK_OF_YEAR); return week; } /** * 获得该月第一天 * @param year * @param month * @return */ public static String getFirstDayOfMonth(int year,int month){ Calendar cal = Calendar.getInstance(); //设置年份 cal.set(Calendar.YEAR,year); //设置月份 cal.set(Calendar.MONTH, month-1); //获取某月最小天数 int firstDay = cal.getActualMinimum(Calendar.DAY_OF_MONTH); //设置日历中月份的最小天数 cal.set(Calendar.DAY_OF_MONTH, firstDay); //格式化日期 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); String firstDayOfMonth = sdf.format(cal.getTime()); return firstDayOfMonth; } /** * 获得该月最后一天 * @param year * @param month * @return */ public static String getLastDayOfMonth(int year,int month){ Calendar cal = Calendar.getInstance(); //设置年份 cal.set(Calendar.YEAR,year); //设置月份 cal.set(Calendar.MONTH, month-1); //获取某月最大天数 int lastDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH); //设置日历中月份的最大天数 cal.set(Calendar.DAY_OF_MONTH, lastDay); //格式化日期 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); String lastDayOfMonth = sdf.format(cal.getTime()); return lastDayOfMonth; }
到此,显示周的列表就完成了。