bootstrap-datepicker怎么用

这篇文章主要讲解了“bootstrap-datepicker怎么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“bootstrap-datepicker怎么用”吧！

在bootstrap中，“bootstrap-datepicker”用于设置日历、时间样式，是一款时间选择插件，语法为“元素对象.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>

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

$(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,
       });

显示年月日

            language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',

注意点：可能会发生选择日历的样式问题

左右两边的按钮图片没有

这个应该是bootstrap的版本问题，在2的版本上会显示，但在3的版本上就显示不出来了，这时候给input添加form-control类名就能解决

选项举例：

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

startDate

Date. 默认值：开始时间

endDate

Date. 默认值：结束时间

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值：

• 0 or 'hour' 为小时视图

• 1 or 'day' 为天视图

• 2 or 'month' 为月视图（为默认值）

• 3 or 'year'  为年视图

• 4 or 'decade' 为十年视图

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

感谢各位的阅读，以上就是“bootstrap-datepicker怎么用”的内容了，经过本文的学习后，相信大家对bootstrap-datepicker怎么用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！