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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python在图片中添加文字的两种方法
2017/04/29 Python
python进行文件对比的方法
2018/12/24 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
Java基础面试题
2014/07/19 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
英语专业推荐信
2013/11/16 职场文书
金融事务专业求职信
2014/04/25 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
运动与健康自我评价
2015/03/09 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS