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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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学习资料汇总与网址
2007/03/16 PHP
有关php运算符的知识大全
2011/11/03 PHP
深入php多态的实现详解
2013/06/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
使用TensorFlow实现SVM
2018/09/06 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
《海底世界》教学反思
2014/04/16 职场文书
本科应届生自荐信
2014/06/29 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers