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 相关文章推荐
JS去除数组重复值的五种不同方法
Sep 06 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
vue实现文字加密功能
Sep 27 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
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
js面向对象编程总结
2017/02/16 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python turtle 绘制太极图的实例
2019/12/18 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
村官学习十八大感想
2014/01/15 职场文书
项目施工员岗位职责
2014/03/09 职场文书
优秀食品类广告词
2014/03/19 职场文书
纠纷协议书
2014/04/16 职场文书
社区禁毒工作方案
2014/06/02 职场文书
语文复习计划
2015/01/19 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
前台接待员岗位职责
2015/04/15 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
同学会演讲稿
2019/04/02 职场文书