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 国际象棋棋盘 实现代码
Jun 26 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jquery实现动态画圆
Dec 04 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php常用正则函数实例小结
2016/12/29 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP CURL使用详解
2019/03/21 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JS画5角星方法介绍
2013/09/17 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
浅谈Python中的模块
2020/06/10 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
三爱活动实施方案
2014/03/19 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
党内外群众意见范文
2015/06/02 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
golang 语言中错误处理机制
2021/08/30 Golang
详解Golang如何优雅的终止一个服务
2022/03/21 Golang