datepicker日期控制元件使用大全(時間可限制)
阿新 • • 發佈:2019-01-27
1.首先我們需要到百度上搜索bootstrap-datepicker.js檔案,然後將檔案放入自己的專案中(js檔案可以檢視我的部落格)
2.在寫頁面的檔案中引入該js檔案
3.在ftl頁面寫對應的css格式,如何引用相關的css檔案,可以檢視本人部落格
4.建立js檔案<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>
$("#enrollStartTime_edit").datepicker();
$("#enrollStopTime_edit").datepicker();
//至此可以發現該日期控制元件可以正常使用
5.現在我們要限制時間(截止時間不得小於起始時間且時間段之間不能重疊交叉)
//比如當我點選一個按鈕得時間,觸發查詢事件
6.定義好單擊事件,在js中寫具體得實現過程<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" onclick="showEnrollBatchModalAdd()">新增</button> </div> </div>
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>