datepicker日期控件使用大全(时间可限制)

1.首先我们需要到百度上搜索bootstrap-datepicker.js文件,然后将文件放入自己的项目中(js文件可以查看我的博客)

2.在写页面的文件中引入该js文件

3.在ftl页面写对应的css格式,如何引用相关的css文件,可以查看本人博客

to
4.创建js文件

$("#enrollStartTime_edit").datepicker();
$("#enrollStopTime_edit").datepicker();
//至此可以发现该日期控件可以正常使用


5.现在我们要限制时间(截止时间不得小于起始时间且时间段之间不能重叠交叉)
//比如当我点击一个按钮得时间,触发查询事件

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 resultMap = new HashMap();	
		try {
			String enrollBatchId = request.getParameter("enrollBatchId");
			if(StringUtils.isEmpty(resultMap)){
				resultMap.put("status", "fail");
				resultMap.put("msg", "没有数据!");
    		}else{
			MapenrollStartTime = 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 getMaxStopTime(String enrollBatchId) {
		return enrollBatchMapper.getMaxStopTime(enrollBatchId);
	}
9.最后写对应的sql语句,本人需要查询的是状态为发布状态下,截止时间作为起始时间



你可能感兴趣的:(datepicker日期控件使用大全(时间可限制))