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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
javascript闭包入门示例
Apr 30 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
React服务端渲染原理解析与实践
Mar 04 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 学习路线与时间表
2010/02/21 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
JS实现打字游戏
2019/12/17 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
python如何将多个PDF进行合并
2019/08/13 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
学生期末评语大全
2014/04/30 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
学生会招新宣传语
2015/07/13 职场文书
django上传文件的三种方式
2021/04/29 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python