bootstrap-datepicker的用法是什么

127 阅读 0 评论 84 点赞

我是靠谱客的博主单身小海豚，这篇文章主要介绍bootstrap-datepicker的用法是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

bootstrap-datepicker的用法是什么

bootstrap-datepicker是一款时间选择插件，但默认显示的文字格式是英文，所以得先引入中文包

复制代码<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src='bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script>
<script>1
2
3
<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src='bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script>
<script>
登录后复制

简单的介绍一下bootstrap-datepicker一些基本属性

复制代码$(function(){
         $('#datetimepicker').datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后，弹出框自动关闭
           startView:3,         //打开弹出框时，显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });1
2
3
4
5
6
7
8
9
10
11
$(function(){
         $('#datetimepicker').datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后，弹出框自动关闭
           startView:3,         //打开弹出框时，显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });
登录后复制

举个2个简单的案例

只显示年月

复制代码$('#datetimepicker').datetimepicker({
         language:"zh-CN",
         format:'yyyy-mm',
         autoclose: 1,
         startView:3, 
         minView: 3,
       });1
2
3
4
5
6
7
$('#datetimepicker').datetimepicker({
         language:"zh-CN",
         format:'yyyy-mm',
         autoclose: 1,
         startView:3, 
         minView: 3,
       });
登录后复制

显示年月日

复制代码            language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',1
2
3
4
5
language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',
登录后复制