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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
js操作二进制数据方法
Mar 03 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
Yii核心验证器api详解
2016/11/23 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
机器学习python实战之决策树
2017/11/01 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python实现小世界网络生成
2019/11/21 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
岗位廉洁从业承诺书
2014/03/28 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
节约用电通知
2015/04/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS