1.首先我们需要到百度上搜索bootstrap-datepicker.js文件,然后将文件放入自己的项目中(js文件可以查看我的博客)
2.在写页面的文件中引入该js文件
3.在ftl页面写对应的css格式,如何引用相关的css文件,可以查看本人博客
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-3" style="text-align:right;">
<label class="control-label"for="enrollStartTime"><span class="required">*</span>招生时间:</label>
</div>
<div class="col-sm-9 input-group input-large date-picker input-daterange" id="yourDate_edit" style="padding-left:16px;">
<input id="enrollStartTime_edit" type="text" class="form-control" name="from"data-date-format="yyyy-mm-dd" data-date-viewmode="years">
<span class="input-group-addon"> to </span>
<input id="enrollStopTime_edit" type="text" class="form-control" name="to"data-date-format="yyyy-mm-dd" data-date-viewmode="years">
</div>
</div>
</div>
4.创建js文件
$("#enrollStartTime_edit").datepicker();
$("#enrollStopTime_edit").datepicker();
//至此可以发现该日期控件可以正常使用
5.现在我们要限制时间(截止时间不得小于起始时间且时间段之间不能重叠交叉)
//比如当我点击一个按钮得时间,触发查询事件
<div class="form-group">
<div style="float:right;margin-right:120px;">
<button class='btn green' type="button" style='float:left;margin-left:15px;' data-toggle="modal" data-target="#enrollBatchModal_add" οnclick="showEnrollBatchModalAdd()">新增</button>
</div>
</div>
6.定义好单击事件,在js中写具体得实现过程
function showEnrollBatchModalAdd(enrollBatchId){
var enrollBatchId =$("#enrollBatchId").val();
$.ajax({
url:"manage/enrollBatch/getMaxStopTime.do",
type:"post",
data:{"enrollBatchId":enrollBatchId},
dataType:"json",
success:function(data) {
if(data.status=="success") {
var Infinity = data.dataList.enrollStartTime;
$("#yourDate").datepicker({
format: 'yyyy/mm/dd',
orientation: "left",
autoclose: true,
startDate:Infinity
});
enrollBatchTable.fnDraw(); //刷新表格
} else {
showSuccessOrErrorModal(data.msg,"error");
}
},
error:function(e) {
showSuccessOrErrorModal("请求出错了","error");
}
});
}
7.根据url中定义的内容在控制层写具体的方法
@RequestMapping(value="/getMaxStopTime",method = RequestMethod.POST)
@ResponseBody
public Object getMaxStopTime(HttpServletRequest request,HttpServletResponse response) {
Map<String,Object> resultMap = new HashMap<String,Object>();
try {
String enrollBatchId = request.getParameter("enrollBatchId");
if(StringUtils.isEmpty(resultMap)){
resultMap.put("status", "fail");
resultMap.put("msg", "没有数据!");
}else{
Map<String,Object>enrollStartTime = enrollBatchService.getMaxStopTime(enrollBatchId);
resultMap.put("dataList", enrollStartTime);
resultMap.put("status", "success");
}
}catch (Exception e) {
logger.error("[获取最新截止时间信息异常-ErrorMsg:]", e);
resultMap.put("status", "error");
resultMap.put("msg", "查询截止时间信息失败 ,请检查网络是否正常");
}
return resultMap;
}
8.忽略service层和dao层,直接写serviceImpl业务实现层
@Override
public Map<String, Object> getMaxStopTime(String enrollBatchId) {
return enrollBatchMapper.getMaxStopTime(enrollBatchId);
}
9.最后写对应的sql语句,本人需要查询的是状态为发布状态下,截止时间作为起始时间
<select id="getMaxStopTime" parameterType="java.util.Map" resultType="java.util.Map">
SELECT
ID "ENROLLBATCHID",
DATE_FORMAT(MAX(STOP_TIME), '%Y-%M-%D') 'enrollStartTime'
FROM
REG_ENROLL_BATCH
WHERE
STATUS = "1"
</select>