学习网址:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201706194582.html
bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言,可通过配置参数设置日期选择器,日期范围选择器等,功能非常强大
下载引用文件的地址:
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文件,还需要引入相应的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结构:
<input data-provide="datepicker">
初始化插件
在页面DOM元素加载完毕之后,可以通过datepicker()方法来初始化bootstrap-datepicker日期选择器插件。
$('.datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
todayHighlight: true,
format: 'yyyy/mm/dd',
});