bootstrap-datepicker的使用

学习网址: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',
});  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容