bootstrap的日期时间日历控件DateTime Picker的简单使用方法

最新推荐文章于 2025-06-04 16:58:18 发布

csdnyq

最新推荐文章于 2025-06-04 16:58:18 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaEE 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/csdnyq/article/details/105096422

JavaEE 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何在Bootstrap中使用DateTimePicker控件，包括下载、解压、集成到项目及设置语言（中文或英文）的方法。通过具体示例，帮助读者快速上手日期时间选择器的配置。

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

bootstrap的日期时间日历控件DateTime Picker的简单使用方法

下载压缩包（bootstrap官网、github、百度、。。。）
日期时间选择器
 github
解压压缩包，这里以sample in bootstrap v3为例
在浏览器打开index.html

第一个是日期+时间
第二个是日期
第三个是时间

根据需要进行选择

把各种js等文件放到工程
3. 把上面的这些文件都要放到工程中，有一些文件是在sample in bootstrap v3文件夹的外面js和css文件夹，在压缩包里面找找。
有中文或英文
- 中文

<script type="text/javascript" src="<%=basePath%>scripts/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

language是’zh-CN’

$('.form_date').datetimepicker({
		language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
		format:'yyyy-mm-dd'
    });

英文
和中文类似，就是用

<script type="text/javascript" src="<%=basePath%>scripts/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

language是’fr’

$('.form_date').datetimepicker({
		language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
		format:'yyyy-mm-dd'
    });