bootstrap 时间控件带（时分秒）选择器(需要修改才能显示，请按照参数说明后面的步骤进行修改) - 农民工进入程序大观园 - 博客园
1.控件下载地址：/p/bootstrap-datetimepicker/index.htm，参数设置说明也在这个链接下面：
2.具体参数说明（复制原链接）：
format（设置时间格式、详细介绍见原链接）：
yyyy-mm-dd
yyyy-mm-dd hh:ii
yyyy-mm-ddThh:ii
yyyy-mm-dd hh:ii:ss
yyyy-mm-ddThh:ii:ssZ
weekStart：
& & & &Integer. 默认值：0
& & & &一周从哪一天开始。0（星期日）到6（星期六）
startDate：
Date. 默认值：开始时间
Date. 默认值：结束时间
The latest date
all later dates will be disabled.
daysOfWeekDisabled
String, Array. 默认值: '', []
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends:&'0,6'&or&[0,6].
Boolean. 默认值：false
当选择一个日期之后是否立即关闭此日期时间选择器。
Number, String. 默认值：2, 'month'
日期时间选择器打开之后首先显示的视图。 可接受的值：
0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
Number, String. 默认值：0, 'hour'
日期时间选择器所能够提供的最精确的时间选择视图。
Number, String. 默认值：4, 'decade'
日期时间选择器最高能展示的选择范围视图。
Boolean, "linked". 默认值: false
如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
todayHighlight
Boolean. 默认值: false
如果为true, 高亮当前日期。
keyboardNavigation
Boolean. 默认值: true
是否允许通过方向键改变日期。
String. 默认值: 'en'
The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.
forceParse
Boolean. 默认值: true
当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep
Number. 默认值: 5
此数值被当做步进值用于构建小时视图。对于每个&minuteStep&都会生成一组预设时间（分钟）用于选择。
pickerReferer : 不建议使用
String. 默认值: 'default'&(other value available : 'input')
The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify&input.
pickerPosition
String. 默认值: 'bottom-right'&(还支持 : 'bottom-left')
此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。
viewSelect
Number or String. 默认值:&same as minView&(supported values are: 'decade', 'year', 'month', 'day', 'hour')
With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.
showMeridian
Boolean. 默认值: false
This option will enable meridian views for&day&and&hour&views.
initialDate
Date or String. 默认值: new Date()
You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight&
组件模版：
&div class="input-append date" id="datetimepicker" data-date="<span style="color: #-02-2012" data-date-format="dd-mm-yyyy"&
&input class="span2" size="<span style="color: #" type="text" value="<span style="color: #-02-2012"&
&span class="add-on"&&i class="icon-th"&&/i&&/span&
带有重置按钮（用于清空输入框）的组件模版：
&div class="input-append date" id="datetimepicker" data-date="<span style="color: #-02-2012" data-date-format="dd-mm-yyyy"&
&input class="span2" size="<span style="color: #" type="text" value="<span style="color: #-02-2012"&
&span class="add-on"&&i class="icon-remove"&&/i&&/span&
&span class="add-on"&&i class="icon-th"&&/i&&/span&
.datetimepicker(options)
初始化日期时间选择器。
参数: None
移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。
$('#datetimepicker').datetimepicker('remove');
参数: None
显示日期时间选择器。
$('#datetimepicker').datetimepicker('show');
隐藏日期时间选择器。
$('#datetimepicker').datetimepicker('hide');
参数: None
使用当前输入框中的值更新日期时间选择器。
$('#datetimepicker').datetimepicker('update');
setEndDate
endDate (String)
给日期时间选择器设置结束日期。
$('#datetimepicker').datetimepicker('setEndDate', '<span style="color: #12-01-01');
Omit endDate (or provide an otherwise falsey value) to unset the limit.
$('#datetimepicker').datetimepicker('setEndDate');
$('#datetimepicker').datetimepicker('setEndDate', null);
setDaysOfWeekDisabled
daysOfWeekDisabled (String|Array)
Sets the days of week that should be disabled.
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [<span style="color: #,<span style="color: #]);
Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);
Datetimepicker 类暴露了一组event用以对日期进行操作。
当选择器显示时被触发。
当选择器隐藏时被触发。
changeDate
当日期被改变时被触发。
$('#date-end')
.datetimepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() & date-start-display.valueOf()){
changeYear
当十年视图上的年视图view被改变时触发。
changeMonth
当年视图上的月视图view被改变时触发。
outOfRange
当用户选择的日期超出startDate&或endDate&时，或者通过setDate&或&setUTCDate方法设置日期超出范围时被触发。
日期时间选择器提供了键盘导航：
up, down, left, right 方向键
这些方向键中，left/right 向后/向前 一天，up/down 向后/向前 一周。
配合shift键，up/left 向后退一个月，down/right 向前进一个月。
配置ctrl键，up/left 向后退一年，down/right 向前进一年。
Shift+ctrl 和 ctrl 同等效果 - 也就是说，他们不能同时改变月和年，只能单独改变年。
escape 键可以用来隐藏、重新显示日期时间选择器；当用户希望手工编辑输入框中的值是会很有用。
当选择器处于显示状态时，enter键只是将其隐藏。当选择器处于隐藏状态时，enter键发挥通常的功能 - 提交当前表单，或者其他。
本插件支持月、每周中天的名称、weekStart选项的国际化。默认是语言是English ('en');其它可以使用的翻译文件在js/locales/&目录中，只需在本插件之后引入需要的语言文件即可。需要增加额外语言支持的话，只需向&$.fn.datetimepicker.dates中增加一个key即可，一定要放在调用&.datetimepicker()之前。如下案例：
$.fn.datetimepicker.dates['en'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today"
Right-to-left languages may also include&rtl: true&to make the calendar display appropriately.
If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding. Simply add&charset="UTF-8"&to your&script&tag:
&script type="text/javascript" src="bootstrap-datetimepicker.de.js" charset="UTF-8"&&/script&
绑定输入框，并设置format选项：
&input type="text" value="<span style="color: #12-05-15 21:05" id="datetimepicker"&
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
绑定输入框，并设置format标记：
&input type="text" value="<span style="color: #12-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii"&
$('#datetimepicker').datetimepicker();
作为组件使用：
&div class="input-append date" id="datetimepicker" data-date="<span style="color: #-02-2012" data-date-format="dd-mm-yyyy"&
&input size="<span style="color: #" type="text" value="<span style="color: #-02-2012" readonly&
&span class="add-on"&&i class="icon-th"&&/i&&/span&
$('#datetimepicker').datetimepicker();
作为内联日期时间选择器：
&div id="datetimepicker"&&/div&
$('#datetimepicker').datetimepicker();
1）添加秒显示下拉框，查找bootstrap-datetimepicker.js，找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))这句，大概在709行附近，改为下面的
//添加datetimepicker下拉框，如果配置要选择秒，否则不添加
var addSec = /,s{<span style="color: #,<span style="color: #},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '&select style="width:100%"&' : '';
this.addSec = addS
if (addSec) {
var orgSec = this.viewDate.getSeconds();
for (var _i = <span style="color: #; _i & <span style="color: #; _i++) sSec += '&option value="' + _i + '"' + (_i == orgSec ? ' selected' : '') + '&' + (_i & <span style="color: # ? '<span style="color: #' : '') + _i + '&/option&';
sSec += '&/select&';
this.picker.find('.datetimepicker-minutes td').html(html.join('') + sSec);
2）修改容器点击事件。大概846行，增加下面的红色语句，防止选择select秒钟时日期弹出框隐藏
click: function (e) {
e.stopPropagation();
e.preventDefault();
///防止选择秒钟选择器日期控件层隐藏
if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;
3）然后继续往下找到case 'span'语句，大概916，修改里面秒钟获取方式，如下所示
case 'span':
if (!target.is('.disabled')) {
var year = this.viewDate.getUTCFullYear(),
month = this.viewDate.getUTCMonth(),
day = this.viewDate.getUTCDate(),
hours = this.viewDate.getUTCHours(),
minutes = this.viewDate.getUTCMinutes(),
//修改datetimepicker秒钟获取方式
seconds = this.addSec ? this.picker.find('select').val() : this.viewDate.getUTCSeconds();
到此完成bootstrap datetimepicker添加秒钟选择下拉框功能。点击这里下载修改过的文件，注意：一定要配置format显示秒钟才会显示秒钟下拉框，否则不显示
$('.form_datetime').datetimepicker({
weekStart: <span style="color: #,
<span style="color: #,
autoclose: <span style="color: #,
todayHighlight: <span style="color: #,
startView: <span style="color: #,
forceParse: <span style="color: #,
showMeridian: <span style="color: #,
format: 'yyyy-mm-dd hh:ii:ss'///
原文链接：/p/bootstrap-datetimepicker/index.htm
bootStrap-datetimepicker在火狐浏览器下报错的问题：
问题：使用bootstrap-datetimepicker这个日期插件来显示日期，但在火狐下报如下错误：TypeError:&(intermediate&value).toString(...).split(...)[1]&is&undefined。
解决方案：将插件中的this.defaultTimeZone=(new&Date).toString().split("(")[1].slice(0,-1);改为this.defaultTimeZone='GMT&'+(new&Date()).getTimezoneOffset()/60;每个月的前端开发者干货素材大合集，相对而言更加专注于为网页设计师和前端开发者搜集相关的工具和素材，这次的大合集当中包含一款颇为有趣的屏幕录像软件，几款适用范围较广的基于Material Design的框架，还有一些性能测试库也非常好用。这些前端工具与素材功能各
本文来源于全球的5254份前端工具使用的调查报告，期望通过本文能够帮助大家更好的了解最新的前端开发工具趋势。 受访者组成 83％的受访者具有两年以上的前端技术经验，只有5％的受访者不到一年： CSS 开发者中有63%为高级开发者和专家： 尽管CSS被认为只是属
之前一直在百度阅读维护的书 《爱上Android》，已经由人民邮电出版社出版。起这个书名的主要原因是我非常喜爱从事开发Android程序的事业，也非常热爱分享技术。 心理专家研究过人心理周期的变化，结论证实大部分人连续、专注的干一件事的时间很难超过18个月。
monkey List ,HashMap ,set ,HashTable ,eventBus ,LitPal ,OkHttp ,Glide ,热修复，线程安全，线程池，6.0以及5.0权限管理，7.0分屏画中画；材料设计语言，蓝牙，wifi，ViewDrap
本文摘自人民邮电出版社异步社区《爱上Android》 京东地址：/.html 试读地址：.cn/book/details/4885 第2章　选择您的开发工具 工欲
云栖TechDay第37期，阿里云资深视觉设计师野一带来题为“计算的旋律—阿里云视觉语言的探索”的演讲。本文主要从回顾阿里云品牌设计的心路历程开始谈起，走过了很多坑，换了很多方向，从用户出发，从赋能触发，总结经验整合设计，探索出一条有想象力的阿里云视觉设计之
阿里云在线技能认证全新上线，3小时学会使用Quick BI搭建企业数据分析平台： 使用Quick BI 制作企业数据分析报表（课程+考试+认证） 看到下面这些内容你会想到什么？ 数据即时分析与决策 交易数据权限管控 报表与自有系统灵活集成 用户行为画像 百万
2.7　Android应用界面 Android应用界面系统，即Android UI（User Interface）系统是Android应用框架最核心的内容之一，也是开发者们需要重点掌握的内容。如果我们把Android应用也分为前后端两部分的话，那么之前介绍的
3.6　习题 选择题 1 . Email类型的文本框具有一个multiple属性，它的作用是（　　）。 A. 判断该文本框中输入的值是否为正确的邮箱地址 B. 不允许该文本框为空 C. 允许在该文本框中使用逗号隔开的有效email地址的一个列表 D. 以上都
monkey、遍历、功能测试想必大家都不陌生，monkey随机性强能够发现隐藏的问题但是随机性强，不可控，效率低；遍历流程可控，但是往往需要较高的时间成本编写维护相关脚本。MQC在自动化测试领域耕耘多年，在充分吸取各种测试方式优点的情况下，为兼容性测试打造了
3.1　新增的元素与属性 在创建Web应用程序的时候，免不了会用到大量的表单元素。HTML 5标准中吸纳了WebForms 2.0的标准，大幅强化了针对表单元素的功能，使得关于表单的开发更快、更方便。3.1.1　新增的属性 我们先来看HTML 5新增的属性、
第1章 项目管理失当 日：“开发时间表、飞猪和其他幻想” 日：“竭尽所能，再论开发时间表” 我的第一个栏目是在2001年6月微软内部网络杂志《Interface》上发表的。为了进入I?M?Wright的人物角色，我需要找到一
3.5　小结 HTML 5表单极大地提高了开发者的工作效率，并给用户带来了一些新的体验。HTML 5提供了很多可以直接使用的功能，而以前需要大量的定制代码才能实现这些功能（如表单验证、创建滑块条控件）。熟练掌握本章中表单新增的属性，可以减少程序的开发时间，创
移动设备碎片化严重！终端配置千差万别，不同的平台，不同的系统版本，不同的硬件配置，最终导致移动App的全机型适配成本巨大且异常困难。终端类型浩如烟海，市场上充斥着不同厂商的各个型号的设备，任何一款设备的兼容性问题都将导致大量用户流失！ 产品概述
移动测试（
1.2　给机器人指令 如果我们希望一个机器人在某个场景中扮演某个角色，我们如何告诉它该做什么？我们如何给它指令？机器人编程会回答这些问题，其过程充满了冒险、挑战、奇迹、担忧和可能的遗憾。人类使用自然语言、手势、肢体语言和面部表情沟通；而机器人是机器，只能理解
3.4　布景层类 布景层类CCLayer是CCNode类的子类，并且在此基础上实现触屏事件代理（TouchEventsDelegate）协议，可以实现CCNode类的功能，并且可以处理输入，包括触屏和加速度传感器。 每个游戏场景中可以有很多层，每一层负责各自
3.3　工作流程中各个角色的密切配合使用户体验达到更好效果 用户体验设计过程中，不同背景的多个团队会参与进来，例如市场部门、技术部门、UED部门、产品管理部门等。由于每个团队都有不同的目标和成功的衡量标准，而且对其他团队的工作过程和难度不了解，导致不同团队之
　　& View 的滑动是Android 实现自定义控件的基础，实现View 滑动有很多种方法，在这里主要讲解6 种滑动方法，分别是layout()、offsetLeftAndRight()与offsetTopAndBottom()、LayoutParams
3.2游戏项目中的Lua 把脚本语言集成到游戏项目中可以提升团队的开发效率，并且可以很好地扩展原生编译语言的能力。Lua在游戏开发的许多基础领域中都表现得很出色。 在游戏开发团队中，可能有许多成员都使用Lua来完成他们的工作。程序员负责将Lua整合到游戏开发问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用bootstrap的datetimepicker插件获得时间，当提交表单后，如何获得这个插件中设定的时间？在生成的html页面中右键“审查元素”，插件中时间text区域对应id为inner-editor的div，但是document.getElementById无法获取这个div，也就没能够获得时间。该如何把这个时间取出来呢？
表单代码：
&div class="row"&
&div class="span6"&起始时间
&div class="input-append date" id="datetimepicker1"&
&input data-format="dd/MM/yyyy hh:mm:ss" type="text"&
&span class="add-on"&
&i data-date-icon="icon-calendar" data-time-icon="icon-time" class="icon-calendar"&&/i&
&div class="span6"&截止时间
&div class="input-append date" id="datetimepicker2"&
&input data-format="dd/MM/yyyy hh:mm:ss" type="text"&
&span class="add-on"&
&i data-date-icon="icon-calendar" data-time-icon="icon-time" class="icon-calendar"&&/i&
&script type="text/javascript"&
jQuery.noConflict();
jQuery(function() {
jQuery('#datetimepicker1').datetimepicker({
format: 'yyyy/MM/dd/ hh:mm',
language: 'en',
pickDate: true,
pickTime: true,
hourStep: 1,
minuteStep: 15,
secondStep: 30,
inputMask: true
jQuery('#datetimepicker2').datetimepicker({
format: 'yyyy/MM/dd/ hh:mm',
language: 'en',
pickDate: true,
pickTime: true,
hourStep: 1,
minuteStep: 15,
secondStep: 30,
inputMask: true
&div class="row"&
&div class="span6"&
&div class="span2"&
&input type="submit" value="重新选择" class="btn btn-large btn-warning"&
&div class="span2"&
&input type="submit" value="开始查询" class="btn btn-large btn-success" onclick="fun1()"&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
给input加上ID
然后用jQuery的选择器获取到value
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：5673人阅读
Sharing with all of you（2）
http://eonasdan.github.io/bootstrap-datetimepicker/
/p/bootstrap-datetimepicker/demo.htm
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：43056次
排名：千里之外
原创：42篇
(1)(1)(4)(1)(12)(2)(2)(2)(2)(1)(7)(8)