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中的eval函数
Nov 02 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
window.open()实现post传递参数
Mar 12 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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开发工具之vs2005图解
2008/01/12 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python 将md5转为16字节的方法
2018/05/29 Python
python实现电脑自动关机
2018/06/20 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
专业技术职务聘任书
2014/03/29 职场文书
推荐信格式范文
2014/05/09 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
nginx 配置指令之location使用详解
2022/05/25 Servers