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