企业官网建设流程全解析

• 前端
• UI库/组件

jQuery Date Range Picker 是一款基于 jQuery 的日期范围选择器插件，内置完整的国际化（i18n）支持：25 种内置语言包、浏览器语言自动检测，以及简单的自定义语言扩展机制。本指南将带你快速完成多语言配置，并通过三步法扩展一个全新的语言。

一、jQuery Date Range Picker 国际化包含哪些内容？

插件的国际化覆盖用户在选择日期时看到的全部界面文案，包括：

• 📅月份名称（month-name）与星期缩写（week-1 到 week-7）
• ⚡快捷选择按钮（如"上周""上个月""7天""过去"等）
• ✅校验提示文案（如"请选择大于 %d 天的日期范围"）
• 🕐时间面板（小时、分钟等标签）

这些文案集中定义在$.dateRangePickerLanguages全局对象中，位于 src/jquery.daterangepicker.js 的第 19–944 行。初始化插件时只需通过一个language参数即可切换语言，日期本身的格式化则交给插件依赖的 moment.js 库完成（因此建议同时引入与界面语言对应的 moment 语言包，保证顶部日期格式一致）。

二、快速切换语言：一个参数即可

最简用法——为输入框绑定选择器并指定language参数：

$('#date-range3').dateRangePicker({ language: 'cn' // 简体中文 });

示例取自仓库演示文件 demo.js。

💡 不传language时，默认值为'auto'，插件会自动读取浏览器的navigator.language（见 src/jquery.daterangepicker.js 的默认配置与 getLanguages 函数）。例如中国浏览器环境下会自动匹配到cn，显示"已选择:"、"快捷选择"、"上个月"等中文界面。若浏览器语言不在内置列表中，则回退到英文默认界面，不会报错。

三、25种内置语言速查表

🌐 注意：简体中文键是cn、繁体中文键是tc，而非 ISO 标准写法。完整的语言包定义可从 src/jquery.daterangepicker.js（以简体中文为例）逐段查阅。

四、自定义语言三步扩展法

内置 25 种语言不满足需求（如小众语言、企业内部术语）时，只需三步即可扩展：

第一步：定义新的语言包

向$.dateRangePickerLanguages对象中挂载一个以自定义名称为键的对象：

$.dateRangePickerLanguages['custom'] = { 'selected': '已选：', 'apply': '确定', 'week-1': '一', 'week-2': '二', 'week-3': '三', 'week-4': '四', 'week-5': '五', 'week-6': '六', 'week-7': '日', 'shortcuts': '快捷', 'default-default': '请选择日期范围' };

完整示例见 demo.js。

第二步：按需填充翻译键（可只翻译一部分）

这是最省心的一步：翻译采用自动回退机制。translate()函数（见 src/jquery.daterangepicker.js）会先查找你定义的语言包，未提供的键自动回退到英文默认文案。因此你只需翻译界面中真正暴露、且英文不合适的文案，其余键全部可以省略。

第三步：初始化时指定语言名称

$('#date-range4-1').dateRangePicker({ language: 'custom' });

至此，选择器界面即使用你定义的语言渲染。三步示例完整链路可参考 demo.js。

五、语言加载机制与回退策略详解

getLanguages()的决策逻辑（src/jquery.daterangepicker.js）可以概括为一棵小决策树：

1. language: 'auto'（默认）→ 读取navigator.language并转小写，命中内置键则采用，否则用英文；
2. 显式指定语言键 → 键存在则采用；
3. 键不存在（或值为'auto'但浏览器语言无对应语言包）→一律回退英文默认语言包，选择器功能不受影响。

一个有趣的实证：演示代码中language: 'en'（见 demo.js）其实并不在内置语言键里，正是走了"回退英文"分支——这也侧面验证了上述机制。

六、常见问题 FAQ

Q1：设置了 language 但界面还是英文？检查语言键拼写与大小写是否与内置表一致（如cn不是zh、se不是sv）；自定义语言则确认$.dateRangePickerLanguages的赋值发生在dateRangePicker()初始化之前。

Q2：为什么只有部分文字被翻译了？这是设计使然——缺失的键回退英文。想让文案更完整，参照 默认英文语言包 把对应键补齐即可。

Q3：界面语言变了，但一周的起始日没变？language只控制文案，一周从周几开始由独立参数startOfWeek: 'monday'或'sunday'（默认 sunday）控制，两者需配合设置。

Q4：日期格式（如 YYYY-MM-DD）如何本地化？由format参数 + moment.js 决定，与插件语言包无关。需要"6月4日"这类本地化格式时，请额外引入对应的 moment 语言包。

七、相关文件路径速览

小结

jQuery Date Range Picker 的国际化设计非常轻量：内置 25 种语言通过language参数一键切换，'auto'模式自动适配浏览器环境，自定义语言三步即可扩展且支持部分翻译自动回退——无论面向国内用户还是全球用户，多语言适配都不再是难题。

• 前端
• UI库/组件