一、页面效果
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;
}
到此，显示周的列表就完成了。