bootstrap3 时间日期选择器

最新推荐文章于 2025-07-23 09:10:04 发布

原创最新推荐文章于 2025-07-23 09:10:04 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

1 篇文章

订阅专栏

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

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'

});