bootstrap datepicker插件默认英文修改为中文


Posted in Javascript onJuly 28, 2017

datepicker插件默认为英文,而且格式为:mm/dd/yyyy这种情况,看起来不怎么直观。

修改目标:

1、默认显示为中文 

2、格式为:yyyy年mm月dd日 

需要修改两个地方:

1、更改datas对象, 增加zh-cn语言选项;参见源代码的1419行

var dates = $.fn.datepicker.dates = {
 en: {
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  today: "Today",
  clear: "Clear"
 },
  "zh-cn":{
  days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
  daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
  months: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"],
  monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  today: "今天",
  clear: "清空"
 }
 };

红色部分为新增部分。

2、修改默认参数,即defaults对象。      

var defaults = $.fn.datepicker.defaults = {
 autoclose: false,
 beforeShowDay: $.noop,
 calendarWeeks: false,
 clearBtn: false,
 daysOfWeekDisabled: [],
 endDate: Infinity,
 forceParse: true,
 format: 'yyyy年mm月dd日',
 keyboardNavigation: true,
 language: 'zh-cn',
 minViewMode: 0,
 multidate: false,
 multidateSeparator: ',',
 orientation: "auto",
 rtl: false,
 startDate: -Infinity,
 startView: 0,
 todayBtn: false,
 todayHighlight: false,
 weekStart: 0
 };

 3、效果如下

bootstrap datepicker插件默认英文修改为中文

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
详解vue组件之间的通信
Aug 30 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 #Javascript
基于JS实现移动端左滑删除功能
Jul 28 #Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 #Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
You might like
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python中类的继承代码实例
2014/10/28 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python中四舍五入的正确打开方式
2021/01/18 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
简单英文演讲稿
2014/01/01 职场文书
打架检讨书800字
2014/01/10 职场文书
运动会稿件50字
2014/02/17 职场文书
2014年教研组工作总结
2014/11/26 职场文书
人代会简报
2015/07/21 职场文书