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函数库-集合框架
Apr 27 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php 数学运算验证码实现代码
2009/10/11 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
js实现弹窗效果
2020/08/09 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
基于Python的关键字监控及告警
2017/07/06 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Pycharm更换python解释器的方法
2018/10/29 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python socket模块方法实现详解
2019/11/05 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
乡镇纠风工作实施方案
2014/03/22 职场文书
学校交通安全责任书
2014/08/25 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
golang 实用库gotable的具体使用
2021/07/01 Golang
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis