bootstrap-datetimepicker使用经验

最新推荐文章于 2024-08-08 07:19:13 发布

DadaxinBlog

最新推荐文章于 2024-08-08 07:19:13 发布

阅读量3.3k

点赞数

分类专栏：前端插件文章标签： bootstrap-datetimepicker bootstrap 日期选择器只选择年月开始时间小于结束时间

本文链接：https://blog.csdn.net/huaxiaoduo1949101/article/details/89162989

版权

本文介绍了在项目中使用bootstrap-datetimepicker作为日期选择器的实践经验，包括基本使用、汉化、选择年月日、年月、年、解决面板被缓存内容遮挡的问题，以及确保开始时间小于结束时间的设定。还提到了面板图标不显示的解决方案，强调了事件和函数的正确使用。

摘要由CSDN通过智能技术生成

文章目录

前言

bootstrap-datetimepicker相比较jquery的datepicker插件而言，可以通过简单的选项设置，就实现只选择年，或者月，而不需要修改css或js文件。

基本使用

去网站下载解压之后，想要最简单的功能的话，引用css和js文件下的bootstrap-datetimepicker.css和bootstrap-datetimepicker.js文件。
如果不在意引入文件的多少，为了避免出现各种问题，可以全部引入。

html文件中：

<input id="datepicker" type="datetime" >

js文件中：

$('#datepicker').datetimepicker(
        {
   
            autoclose: 1,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            endDate: new Date()
        })

其余选项、事件和方法同样可以在官网上找到介绍，选择使用，下面只说几点。

所遇问题

汉化

引入文件，官网文件夹下，js–>locale–>bootstrap-datetimepicker.zh-CN.js；
加属性， language: "zh-CN"。

选择年月日、年月、年

设置startView(开始的视图），minView(最精确的视图），并配合format(日期格式）联合使用。
startView和minView，设置为0，为分钟面板，1为小时，2为日面板，3为月，4为年。比如，只选择年月，希望刚打开就是月面板，则可以设置为，startView:3, minView:3，同时format可设置为yyyy-mm。