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脚本实现Web页面信息交互
Dec 21 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
bootstrap table小案例
Oct 21 Javascript
微信小程序开发探究
Dec 27 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
基于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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
生成静态页面的PHP类
2006/07/15 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php递归函数怎么用才有效
2018/02/24 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
亮化工程实施方案
2014/03/17 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
详解MySQL集群搭建
2021/05/26 MySQL
Redis 哨兵集群的实现
2021/06/18 Redis
Python 实现Mac 屏幕截图详解
2021/10/05 Python