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 相关文章推荐
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详细分析vue表单数据的绑定
Jul 20 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python用for循环实现九九乘法表
2018/05/31 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python unittest单元测试框架总结
2018/09/08 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
总经理助理工作职责
2014/02/06 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
董事长岗位职责
2015/02/13 职场文书
写给同事的离职感言
2015/08/04 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
导游词之桂林山水
2019/09/20 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技