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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
详解javascript函数的参数
Nov 10 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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 eval函数用法总结
2012/10/31 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue生命周期实例小结
2018/08/15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python关于调用函数外的变量实例
2019/12/26 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
Servlet的生命周期
2013/08/25 面试题
中层干部竞争上岗演讲稿
2014/01/13 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
师德师风自查总结
2014/10/14 职场文书
物业保洁员管理制度
2015/08/05 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js