學(xué)習(xí)網(wǎng)址:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201706194582.html
bootstrap-datepicker是一款Bootstrap日期選擇器插件。該日期選擇器插件支持多種語言桃漾,可通過配置參數(shù)設(shè)置日期選擇器,日期范圍選擇器等,功能非常強(qiáng)大
下載引用文件的地址:
https://github.com/eternicode/bootstrap-datepicker
引用方法:
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-datepicker.js"></script>
如果需要使用i18n文件怕吴,還需要引入相應(yīng)的js文件辟宗,例如簡體中文需要引入bootstrap-datepicker.zh-CN.min.js文件。
<script type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
這里要注意bootstrap-datepicker.zh-CN.js需要放在locales目錄下途样。 例如:<script src="/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>
HTML結(jié)構(gòu):
<input data-provide="datepicker">
初始化插件
在頁面DOM元素加載完畢之后土涝,可以通過datepicker()方法來初始化bootstrap-datepicker日期選擇器插件佛寿。
$('.datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
todayHighlight: true,
format: 'yyyy/mm/dd',
});