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");
});