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结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP实现事件机制的方法
2015/07/10 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
教师研修随笔感言
2014/01/23 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书