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中的Window窗口对象
Jan 16 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 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
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
js实现常用排序算法
2016/08/09 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python实现数据库并行读取和写入实例
2017/06/09 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
在python中求分布函数相关的包实例
2020/04/15 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js