Bootstrap时间控件 datetimepicker

转载 2016年05月31日 10:59:28

一、slice(0,-1)报错

转载自http://blog.chinaunix.net/uid-20332519-id-5733546.html

Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery。
现在https://github.com/Eonasdan/bootstrap-datetimepicker这个版本最完善,但是一大堆依赖很头疼;
https://github.com/smalot/bootstrap-datetimepicker还不错,比较轻巧,但是用起来报错。

报错:

  1. TypeError:
  2. ...d"?false:k.title;this.defaultTimeZone=(new Date()).toString().split("(

原文:

  1. this.defaultTimeZone=(newDate()).toString().split("(")[1].slice(0,-1);
意思为:先取得Date对象,然后再字符串化,再用(来分隔字符串,然后取其中的第二个,再从右向左取第一项,也就是取时区项。
但在Firefox中,字符串化的结果为:“Wed May 25 2016 16:07:14 GMT+0800”,没有括号,导致错误。

更为通用的,时区可以用getTimezoneOffset()来获取,这个结果的单位是分钟,所以要除以60才可以:
修改为:
  1. this.defaultTimeZone='GMT '+(newDate()).getTimezoneOffset()/60

修改后就可以正常使用了。



另外还有一个字体错误,如果使用了fa字体,则会报错,系统中会检测不到fontAwesome,所以可以直接赋这个变量为true:

  1. this.fontAwesome=k.fontAwesome||this.element.data("font-awesome")||false;
改为:
  1. this.fontAwesome=true

二、添加bootstrap-datetimepicker日期控件的开始日期和结束日期之间的限制
转载自http://my.oschina.net/xiaoxiangdaizi/blog/485189

作为一个日期选择控件,当涉及到同时选择开始日期和结束日期时,两者的日期时间值之间是存在一定的约束条件的,即保证任何情况下开始日期要小于结束日期。

控件效果如下:

默认情况下,开始日期和结束日期之间是不存在关联的,需要我们进行设置。

//日期时间选择器
$("#datetimeStart").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click",function(ev){
    $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click", function (ev) {
    $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
});



bootstrap日期时间控件

datetime控件Bootstrap的日期时间控件,使用非常的简单。首先,添加日期时间控件的引用@*datetime控件*@ ...
  • nangeali
  • nangeali
  • 2017年05月02日 10:03
  • 13260

Bootstrap3 datetimepicker控件的使用

Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 缺点:    目前没有中文包,只有英文版 官网地址:http://eonasdan.gi...
  • u011127019
  • u011127019
  • 2016年06月21日 09:51
  • 61898

bootstrap datetimepicker调整开始日期

近日,在使用 bootstrap datetimepicker 插件的时候发现,点击后是从1899年12月开始的,而要调整到2017年的日期,需要经过多次点击才能实现,非常麻烦。查找资料发现,可以在初...
  • sxf359
  • sxf359
  • 2017年03月27日 10:12
  • 6819

DateTimePicker关于时间区间的设置

DateTimePicker设置时间区间
  • i_am_tomato
  • i_am_tomato
  • 2017年05月20日 16:31
  • 1886

bootstrap-datetimepicker 日期控件的开始日期

今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择 主要体现在bootstrap-datetimepicker控件下面的2个日期参数 wee...
  • alenejinping
  • alenejinping
  • 2016年09月18日 14:04
  • 4529

日期控件jeDate和bootstrap datepicker

jeDate:http://www.jayui.com/jedate/ 链接: http://share.weiyun.com/e32042bcf2e1398b0d3f617621d58a4a (密码...
  • kakaxiD
  • kakaxiD
  • 2016年07月12日 15:22
  • 6008

Bootstrap中的datetimepicker用法总结

datetimepicker用法总结2016年4月21日更新目录datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开...
  • hizzyzzh
  • hizzyzzh
  • 2016年04月21日 20:50
  • 53763

datetimepicker实现时间选择的相互制约

datetimepicker是一款时间选择控件,有时我们会用两个控件选择开始时间和结束时间,要求开始时间不能晚于结束时间,html实现代码如下:完整代码下载地址:http://download.csd...
  • leijia_xing
  • leijia_xing
  • 2017年03月12日 19:06
  • 1633

Bootstrap 3时间控件datetimepicker的时区及多语言问题

在Web应用开发中,特别是前端开发中,经常会碰到的一个问题是时间选择问题,幸好Bootstrap已经为我们提供了时间选择控件datetimepicker,但在datetimepicker的实际开发使用...
  • Quincuntial
  • Quincuntial
  • 2016年09月09日 14:17
  • 7693

关于时区date_default_timezone_set()的设置

  • GUO_LOVER
  • GUO_LOVER
  • 2017年05月31日 09:36
  • 843
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap时间控件 datetimepicker
举报原因:
原因补充:

(最多只允许输入30个字)