bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法


Posted in Javascript onMarch 08, 2017

日期插件 bootstrap-datetimepicker 在火狐下出现一条报错信息:TypeError: (intermediate value).toString(…).split(…)[1] is undefined

这条错误必然出现,难道没有在 Firefox 下进行测试。

在 Firefox 下查看项目 demo (http://www.malot.fr/bootstrap-datetimepicker/demo.php)可以正常运行,但这个 demo.php 使用的是 2013-3-2 的 datetimepicker,github 项目(https://github.com/smalot/bootstrap-datetimepicker/releases)已经发布到 2017-3-3,这个最新的版本(以及最近的一些版本)在 Firefox 下测试不完善,计算 defaultTimeZone 时虽然没有出错,但给出的结果也不正确。

源代码如下,运行环境 Firefox 51.0.1(32位)

this.defaultTimeZone = (new Date).toString().split('(')[1].slice(0, -1);
this.timezone = options.timezone || this.defaultTimeZone;
// 2.4.4 改进版本
this.timezone = options.timezone || timeZoneAbbreviation();
function timeZoneAbbreviation() {
  var abbreviation, date, formattedStr, i, len, matchedStrings, ref, str;
  date = (new Date()).toString();
  formattedStr = ((ref = date.split('(')[1]) != null ? ref.slice(0, -1) : 0) || date.split(' ');
  if (formattedStr instanceof Array) {
    matchedStrings = [];
    for (var i = 0, len = formattedStr.length; i < len; i++) {
      str = formattedStr[i];
      if ((abbreviation = (ref = str.match(/\b[A-Z]+\b/)) !== null) ? ref[0] : 0) {
        matchedStrings.push(abbreviation);
      }
    }
    formattedStr = matchedStrings.pop();
  }
  return formattedStr;
}

出错原因是 Firefox 下 Date.prototype.toString 返回结果不包含 TimeZone 的文字描述。

2.4.4 改进版本使用的 timeZoneAbbreviation 函数在 Firefox 下返回  true

对 timeZoneAbbreviation 使用的三元表达式依次简化

((abbreviation = (ref = str.match(/\b[A-Z]+\b/)) !== null) ? ref[0] : 0)
(abbreviation = (ref = str.match(/\b[A-Z]+\b/)) !== null)
(abbreviation = (xxx) !== null)
(abbreviation = xxx !== null)
abbreviation 必然是布尔值,如果将 matchedStrings.push(abbreviation) 换成 matchedStrings.push(str) 更接近预期值。

推荐使用文末的方案。

bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

解决方案

将 date toString 最后一个空格之后的字符串作为 TimeZone。

// this.defaultTimeZone = (new Date).toString().split('(')[1].slice(0, -1);
this.defaultTimeZone = (new Date + '').split(' ').slice(-1)[0].replace(/\(|\)/g, '');
this.timezone = options.timezone || this.defaultTimeZone;

以上所述是小编给大家介绍的 bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JS实现购物车基本功能
Nov 08 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 #Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
原生js实现放大镜特效
Mar 08 #Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 #Javascript
正则 js分转元带千分符号详解
Mar 08 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
基于php split()函数的用法详解
2013/06/05 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
BootStrap的双日历时间控件使用
2017/07/25 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
中学教师自我鉴定
2014/02/07 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
共青团员自我评价
2015/03/10 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android