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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
PHP中PDO基础教程 入门级
2011/09/04 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
vuex vue简单使用知识点总结
2019/08/29 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python字符串与url编码的转换实例
2018/05/10 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python psutil模块使用方法解析
2019/08/01 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python实现复制文件到指定目录
2019/10/16 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
竞聘副主任科员演讲稿
2014/01/11 职场文书
中学生打架检讨书
2014/02/10 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android