bootstrap datepicker
1、使用bootstrap datepicker控件要引入的文件
<link rel="stylesheet" type="text/css" href="${resources}/css/bootstrap-datepicker.css"> <script src="${resources}/js/bootstrap-datepicker.js"></script> <script src="${resources}/js/locales/bootstrap-datepicker.zh-CN.js"></script>
2、应用小实例
(1)要写一个日期查询条件,开始日期不能大于结束日期
HTML代码:
<label for="firstDate">开始日期</label> <div class="input-group date start_date_picker"> <input size="18" type="text" id="firstDate" name="queryStartDate" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${user.queryStartDate}"/>" class="form-control" readonly placeholder="开始日期"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <label for="lastDate">结束日期</label> <div class="input-group date end_date_picker"> <input size="18" type="text" id="lastDate" name="queryEndDate" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${user.queryEndDate}"/>" class="form-control" readonly placeholder="结束日期"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>
js代码:
$(".start_date_picker").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayBtn: "linked",
language:'zh-CN',
<c:if test="${!empty user.queryEndDate}">
endDate: "<fmt:formatDate pattern="yyyy-MM-dd" value="${user.queryEndDate}"/>",
</c:if>
pickerPosition: "bottom-left"
});
$(".end_date_picker").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayBtn: "linked",
language:'zh-CN',
<c:if test="${!empty user.queryStartDate}">
startDate: "<fmt:formatDate pattern="yyyy-MM-dd" value="${user.queryStartDate}"/>",
</c:if>
pickerPosition: "bottom-left"
});
$("#firstDate").change(function() {
$('.end_date_picker').datepicker('setStartDate', $(this).val());
});
$("#lastDate").change(function() {
$('.start_date_picker').datepicker('setEndDate', $(this).val());
});
PS:最值得注意的是一般查询页面都会有清空按钮,对于上述实例中的datepicker控件,单纯清除输入框的值是不够的,你会发现手动清除日期后,所选择的时间范围会出现问题。当你再次选择时间时,上次的时间范围仍存在
尝试了好多方法,这个问题都没有解决,目前我的解决办法是清空输入框的值之后再添加以下代码:
$('.start_date_picker').datepicker('setEndDate', null); $('.end_date_picker').datepicker('setStartDate', null);
(2)新增信息有日期信息,而且日期必填,如果为空,tooltip提示,一点击glyphicon-calendar的时候tooltip隐藏
<div class="form-group"> <label for="" class="control-label input-group col-sm-2">出生日期</label> <div class="input-group date startTime_picker"> <input type="text" id="startTime" name="startTime" class="form-control easyui-tooltip" readonly placeholder="出生日期" style="padding-left: 0px;" data-options="position: 'top',onShow:inputTipOnShow"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <span class="redtip">*</span> </div> $("#startTime").tooltip({ showEvent: null, hideEvent: "click" });
PS:上述代码在点击input输入框的时候,也能弹出日历控件,即使选择了日期,tooltip仍不会隐藏,以下是解决办法:
$(".start_date_picker").datepicker().on('hide', function(event){ $("#startCheck").tooltip("hide"); });