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 相关文章推荐
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python实现12306火车票查询器
2017/04/20 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Python截图并保存的具体实例
2021/01/14 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
英语教师岗位职责
2014/03/16 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
教师读书笔记
2015/06/29 职场文书