bootstrap-datepicker日曆控制元件的使用心得
阿新 • • 發佈：2019-02-12
1.匯入檔案
bootstrap-datepicker/dist/css/bootstrap-datepicker3.css
bootstrap-datepicker/dist/css/bootstrap-datepicker3.css
bootstrap-datepicker/dist/js/bootstrap-datepicker.js
bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js
2.css+jss
<link rel="stylesheet" href="/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<script src="/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script> <script src="/static/ace/components/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js" type="text/javascript"></script>
jsp：
到賬起始日期:<input id="startdate" type="text" class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'enddate\',{M:-3})}',maxDate:'#F{$dp.$D(\'enddate\')}'})"/>
到賬結束日期:
<input id="enddate" type="text" class="Wdate" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'startdate\',{M:3})}',minDate:'#F{$dp.$D(\'startdate\')}'})"/>
效果：兩個日期前後不超過三個月
<input id="form-field-date"readonlyclass="form_datetime">
$("#form-field-date").datepicker({ language: "zh-CN", autoclose: true,//選中之後自動隱藏日期選擇框 clearBtn: true,//清除按鈕 todayBtn: true,//今日按鈕 language:'zh-CN', format: "yyyy-mm-dd"//日期格式，詳見 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format});