IE6/IE7 中 JavaScript JSON 提示缺少标识符、字符串或数字问题处理
一、问题背景与核心原因补充
在前端开发中，JSON（JavaScript 对象表示法）的语法规范兼容性是老旧浏览器（IE6/IE7）的高频坑点。使用 jQuery UI Datepicker 实现签到日历功能时，IE8/IE9、Firefox、Chrome 等浏览器表现正常，但 IE6/IE7 及 IE8 兼容视图下报 “缺少标识符、字符串或数字” 错误，核心原因是JSON 对象最后一个键值对末尾多余的逗号—— 现代浏览器会容错这种语法不规范的写法，但 IE6/IE7 的 JavaScript 引擎对 JSON 语法校验更严格，多余逗号会被判定为语法错误，直接阻断代码执行。
关键语法知识点补充
- JSON 与 JavaScript 对象字面量的区别：JSON 是严格的文本格式，要求键名必须用双引号包裹、末尾不能有多余逗号；而现代 JavaScript 引擎对对象字面量的语法容错性更高（如允许单引号键名、末尾逗号），但 IE6/IE7 完全不支持这种容错。
- IE6/IE7 的 JS 引擎特性：这两个版本基于老旧的 JScript 引擎（而非现代 Chakra 引擎），对 ECMAScript 规范的支持不完整，尤其对对象 / 数组末尾逗号的解析会直接抛出语法错误，这也是此类兼容性问题的根源。
二、问题复现与解决方案
错误代码示例
var obj = {
'name': 'qqyumidi',
'gender': 'male' //此处不能加上, ！！
}
alert(obj.name);
补充解决方案说明：
- 核心修复：删除对象最后一个键值对后的逗号，这是解决 IE6/IE7 语法错误的唯一方式。
- 预防手段：手动编写 JSON / 对象字面量时养成 “末尾不加逗号” 的习惯；借助 ESLint 等代码检查工具，开启comma-dangle规则（禁止末尾逗号），提前发现此类问题；若使用构建工具（如 Webpack），可通过 Babel 插件自动清理末尾逗号，适配老旧浏览器。
三、jQuery UI Datepicker 时间控件的使用方法
1. 基础引入与调用
引入类库文件
<!-- 引入相应的jquery的UI文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></script>
<!-- 引入此js文件将日历中内容转化成中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">
补充说明：
- 版本适配：jQuery 1.7.1 + jQuery UI 1.8.18 是适配 IE6/IE7 的经典组合，更高版本的 jQuery（如 2.x+）已放弃对 IE6/IE7 的支持；
- 中文本地化：jquery.ui.datepicker-zh-CN.js的核心作用是覆盖 Datepicker 的默认英文配置（如月份、星期名称），本质是修改$.datepicker.regional['zh-CN']配置项。
<div class="demo">
<p>Date:<input type="text" id="datepicker"></p>
</div>
<script type="text/javascript">
$(function() {
//插件的调用
$("#datepicker").datepicker({
//在这里进行插件的属性设置
});
});
</script>
补充说明：
- $(function(){})是$(document).ready()的简写，确保 DOM 加载完成后再初始化插件，避免 IE6/IE7 中 “元素未找到” 的错误；
- Datepicker 初始化时若未配置任何属性，会使用默认值（如日期格式mm/dd/yy、仅显示当前月）。
2. 常用属性实例验证（原文保留，补充关键说明）
（1）altField + altFormat：备用输出字段与格式
<div class="demo">
<p>Date: <input type="text" id="datepicker">
<input type="text" id="alternate" size="30"/></p>
</div>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
补充说明：
- altFormat的格式符含义：
- DD：星期全称（如 “星期一”）；
- d：日期（不带前导零）；
- MM：月份全称；
- yy：四位年份；
效果截图：
（2）showAnim：日期面板动画
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
补充说明：
- 常用动画值：slideDown（下滑）、fadeIn（淡入）、blind（卷帘）、none（无动画）；
- IE6/IE7 对部分动画效果支持不佳（如blind），建议在老旧浏览器中设置showAnim: "none"提升性能。
（3）showButtonPanel：按钮面板
[javascript] view plaincopyprint?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});
补充说明：
- 按钮面板包含 “今天” 和 “关闭” 按钮，“今天” 按钮的点击事件可通过$.datepicker._gotoToday方法自定义，“关闭” 按钮默认触发面板隐藏；
- IE6/IE7 中按钮样式可能错位，需通过 CSS 调整ui-datepicker-buttonpane类的样式。
如图可以看到面板下方有两个按钮：点击 “今天” 会跳到今天的日期，点击 “关闭” 会关闭面板。
（4）dateFormat：日期显示格式
$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
});
补充说明：
- 常见格式配置：yy-mm-dd：2024-01-06（推荐，符合 ISO 规范）；mm/dd/yy：01/06/2024（美式格式）；yy年mm月dd日：2024 年 01 月 06 日（中文格式）；
- 注意：dateFormat仅控制显示格式，提交数据时需手动转换为后端兼容的格式（如yyyy-MM-dd）。
效果截图：
（5）changeMonth + changeYear：下拉选择年月
补充说明：
- changeMonth: true/changeYear: true会将标题栏的年月替换为下拉列表，IE6/IE7 中下拉列表样式需单独适配（如调整高度、字体）；
- 下拉列表的默认年份范围为当前年前后 10 年，可通过yearRange自定义。
其中标题栏的月份或者年份会出现下拉菜单的形式：
（6）yearRange：年份范围
$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});
补充说明：
- 范围写法：相对今年：yearRange: "-10:+5"（今年前 10 年到后 5 年）；相对选中年：yearRange: "c-5:c+5"（选中年前后 5 年）；绝对年份：yearRange: "2010:2025"（固定范围）；
- 注意：yearRange仅在changeYear: true时生效，IE6/IE7 中超出范围的年份无法被选中，无需额外校验。
（7）numberOfMonths：多月份显示
$( "#datepicker" ).datepicker({
numberOfMonths: 3
});
补充说明：
- 配置为数组时：numberOfMonths: [2,3]（显示 2 行 3 列，共 6 个月）；
- IE6/IE7 中多月份显示可能出现宽度溢出，需设置#ui-datepicker-div的宽度为固定值（如width: 600px）。
上面指定 numberOfMonths 为 3，那么弹出的日历面板就会显示当前以及以后两个月，如图：
（8）showOn + buttonText/buttonImage：触发方式
1) 文本按钮触发
$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});
补充说明：
- showOn取值：focus：输入框获焦时触发（默认）；button：仅按钮触发；both：获焦 / 按钮都触发。
效果截图：
2) 图片按钮触发
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
补充说明：
- buttonImageOnly: true表示仅显示图片，不包裹默认按钮样式；
- IE6/IE7 中图片按钮可能出现边框，需添加 CSS：button.ui-datepicker-trigger {border: none;}。
效果截图：
（9）minDate + maxDate：日期范围限制
$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});
补充说明：
- 取值格式：数字：天数（如-20表示 20 天前）；字符串："+10D"（10 天后）、"+1M"（1 个月后）、"+1Y"（1 年后）；日期对象：new Date(2024, 0, 1)（2024 年 1 月 1 日）；
- IE6/IE7 中日期对象的兼容性：需注意月份从 0 开始（0=1 月，11=12 月），避免设置错误。
如下图在 7 号之前都不可选择（当前日期为 27）：
