bootstrap之datetimepicker使用配置

最新推荐文章于 2025-05-28 16:08:26 发布

原创最新推荐文章于 2025-05-28 16:08:26 发布 · 1.4w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#datetimepicker boot

技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Bootstrap的datetimepicker组件来实现日期和时间的选择功能。包括引入必要的JS和CSS文件，设置输入框及配置参数等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datetimepicker是bootstrap中的一款日期和时间选择器，其使用和配置方法较为简单

首先需要引入和其相关的js和css文件：

<script type="text/javascript" src="/static/lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/lib/js/bootstrap-datetimepicker.zh-CN.js"></script>

<link href="/static/lib/css/bootstrap-datetimepicker.min.css" rel='stylesheet' type='text/css'>

添加选择器的input输入框：

<input id="birthdayInput" value="2016-09-14">

value值是选择框默认选择的日期，若是动态的，可以在js中用jQuery操作。

js文件中的配置：

$('#birthdayInput').datetimepicker({
    format: 'yyyy-mm-dd',//日期的格式
    startDate:'1900-01-01',//选择器的开始日期
    autoclose:true,//日期选择完成后是否关闭选择框
    bootcssVer:3,//显示向左向右的箭头
    language:'zh_CN',//语言
    minView: "month",//表示日期选择的最小范围，默认是hour
});

如需要其他属性可到官网链接中查看  http://www.bootcss.com/p/bootstrap-datetimepicker/