bootstrap3 时间日期选择器

haowells

于 2014-12-23 15:50:38 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/haowells/article/details/42103717

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在网页中集成Bootstrap3的时间日期选择器。首先提供了下载CSS和JS文件的链接，然后指导将样式和脚本引入到页面中，确保它们在Bootstrap的基础样式之后。接着，展示了如何在input元素包裹在span或div内，并提供了初始化时间日期选择器的JavaScript代码，包括各种配置选项如是否显示日期、时间、分钟和秒，以及时间步进等。

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

http://eonasdan.github.io/bootstrap-datetimepicker/

下载css&js

https://github.com/Eonasdan/bootstrap-datetimepicker

引入CSS

引入JS

datetimepicker css &js 分别放在bootstrap css&js 后面

将input 放到span或div内

            <span class="glyphicon glyphicon-time"></span>
                <label for="start_time">
                    开始时间: 
                </label>
            <span>
                <input id="strtime" data-date-format="YYYY-MM-DD HH:mm:ss" name="strtime" >
            </span>

初始化

$('#strtime,#endtime').datetimepicker({
pickDate: true, //en/disables the date picker
pickTime: true, //en/disables the time picker
useMinutes: true, //en/disables the minutes picker
useSeconds: true, //en/disables the seconds picker
useCurrent: true, //when true, picker will set the value to the current date/time
minuteStepping: 1, //set the minute stepping
pick12HourFormat: false,
lang: 'cn'

});