一、版本
My97DatePicker: 4.8;
Jquery: 1.11.3;
Spring Boot: 1.5.17.RELEASE.
二、项目目录结构
三、上代码
test.html(主页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>年、季度、月演示</title>
<style type="text/css">
.date-sel {
line-height: 5rem;
cursor: pointer;
}
</style>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="./js/timeUtil.js"></script>
</head>
<body>
<label>统计时段</label>
<!-- 年、季度、月下拉框 -->
<select id="dateSelection" class="date-sel" style="width:80px;">
<option value="1">年</option>
<option value="2">季度</option>
<option value="3">月</option>
</select>
<!-- 时间控件 -->
<input type="text" id="selectedDate" onfocus="selectTimePicker();"> 
<input type='button' value='查询' onclick='queryData();'/>
<input type="hidden" name="startTime" id="startTime">
<input type="hidden" name="endTime" id="endTime">
</body>
<script type="text/javascript">
//切换下拉框时清空时间控件日期内容
$('#dateSelection').change(function(){
$('#selectedDate').val("");
});
//点击查询触发的事件
function queryData() {
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
//向后台发送ajax请求
$.ajax({
url: 'http://localhost:8999/getTime',
data: {
'startTime' : startTime,
'endTime' : endTime
},
type:'GET',
success:function(){
console.log('success');
}
});
}
</script>
</html>timeUtil.js(工具js类)
function selectTimePicker() {
var type = $("#dateSelection").val();
if (type === '1') {//按年
WdatePicker({
el : 'selectedDate',
readOnly : true,
maxDate : '%y',
dateFmt : 'yyyy',
onpicked : pickSingleTime,
onclearing : clearingFunc
});
} else if (type === '2') {//按季
WdatePicker({
el : 'selectedDate',
readOnly : true,
dateFmt : 'yyyy-M季度',
onpicked : pickSingleTime,
maxDate : '%y',
disabledDates : [ '....-0[5-9]-..', '....-1[0-2]-..' ],
startDate : '%y-01-01',
onclearing : clearingFunc
});
} else if (type === '3') {//按月
WdatePicker({
el : 'selectedDate',
readOnly : true,
maxDate : '%y-%M',
dateFmt : 'yyyy-MM',
onpicked : pickSingleTime,
onclearing : clearingFunc
});
}
}
//获取当前季度的开始月
function getQuarterStartMonth(quarter) {
var quarterStartMonth = 0;
if (quarter === '1') {
quarterStartMonth = 1;
} else if (quarter === '2') {
quarterStartMonth = 4;
} else if (quarter === '3') {
quarterStartMonth = 7;
} else {
quarterStartMonth = 10;
}
return quarterStartMonth;
}
//格式化月和日为MM、dd
function formatDate(value) {
if (value < 10) {
value = "0" + value;
}
return value;
}
//根据选择的年/季度/月设置时间
function pickSingleTime() {
var type = $("#dateSelection").val();
var year = $dp.cal.getP('y', 'yyyy');
var month = $dp.cal.getP('M', 'M');
var fristDay = "";
var lastDay = "";
var beginTime = "";
var endTime = "";
if (type === '1') {
//按年
beginTime = year + "-01-01";
endTime = year + "-12-31";
} else if (type === '2') {
//按季度 此处的month是季度不是月
var quarter = getQuarterStartMonth(month);
//获取季度第一天
fristDay = new Date(year, quarter, 1);
//获取季度最后一天
lastDay = new Date(year, quarter + 2, 0);
beginTime = year + "-" + formatDate(quarter) + "-"
+ formatDate(fristDay.getDate());
endTime = year + "-" + formatDate(quarter + 2) + "-"
+ formatDate(lastDay.getDate());
} else if (type === '3') {
//按月
fristDay = new Date(year, month, 1);
beginTime = year + "-" + formatDate(month) + "-"
+ formatDate(fristDay.getDate());
//获取月最后一天
lastDay = new Date(year, month, 0);
endTime = year + "-" + formatDate(month) + "-"
+ formatDate(lastDay.getDate());
}
$("#startTime").val(beginTime + " 00:00:00");
$("#endTime").val(endTime + " 23:59:59");
};
function clearingFunc() {
$("#startTime").val('');
$("#endTime").val('');
}
application.yml(后台配置文件)
server:
port: 8999说明：访问服务的端口
TimePickerApplication(项目启动类)
package com.tzsj.time;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class TimePickerApplication {
public static void main(String[] args) {
SpringApplication.run(TimePickerApplication.class, args);
}
}
TimeController(接口测试类)
package com.tzsj.time;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TimeController {
@GetMapping("/getTime")
public void getTime(String startTime, String endTime) {
System.out.println("开始时间： " + startTime);
System.out.println("结束时间： " + endTime);
}
}
四、测试
1. 启动项目服务，然后在浏览器上输入网址：http://localhost:8999/test.html
2. 选择一个统计时段并选择对应的时间，点击查询，如下图:
3. 观察后台控制台，如下图:
测试完毕！
如果您在操作过程中遇到什么问题，可以随时联系我并给我留言。本人的微信公众号名称是弹指时间 。微信二维码如下图：
