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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
BootStrap的两种模态框方式
May 10 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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
phpfans留言版用到的install.php
2007/01/04 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Python常见工厂函数用法示例
2018/03/21 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Linux下python3.7.0安装教程
2018/07/30 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
《金钱的魔力》教学反思
2014/02/24 职场文书
党风廉设责任书
2014/04/16 职场文书
食品安全处置方案
2014/06/14 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2014年党支部工作总结
2014/11/13 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
任命书格式范文
2015/09/22 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript