BootStrap Datepicker 插件修改为默认中文的实现方法


Posted in Javascript onFebruary 10, 2017

bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文

1、首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存

2、增加 cn 语言选项 

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"
    },
    cn: {
      days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
      daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
      months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      today: "今天",
      clear: "清除"
    }
  };

红色部分为增加的语言选项

3、修改默认参数,默认语言为 cn 

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

红色部分为修改的默认语言

至此完成默认中文的修改,效果如下图:

BootStrap Datepicker 插件修改为默认中文的实现方法

以上所述是小编给大家介绍的BootStrap Datepicker 插件修改为默认中文的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
用js实现随机返回数组的一个元素
Aug 13 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 #Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 #Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 #Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 #Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 #Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
You might like
php Static关键字实用方法
2010/06/04 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JS的get和set使用示例
2014/02/20 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
Vue.js的动态组件模板的实现
2018/11/26 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
python 日期操作类代码
2018/05/05 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python 实现线程之间的通信示例
2020/02/14 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python time.strptime格式化实例详解
2021/02/03 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
出国留学经济担保书
2014/04/01 职场文书
客户答谢会致辞
2015/07/30 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技