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颜色选择器ColorPicker实现代码
Nov 14 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
JavaScript ES6 Class类实现原理详解
May 08 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
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
django实现分页的方法
2015/05/26 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
车队司机自我鉴定
2014/03/02 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
大学生作弊检讨书
2014/09/11 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server