BootStrap Datepicker 插件修改为默认中文的实现方法

 更新时间:2017年02月10日 14:50:16   作者:cnhxz  
bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文。下面通过本文给大家介绍BootStrap Datepicker 插件修改为默认中文的实现方法,一起看看吧

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 插件修改为默认中文的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 原生javascript上传图片带进度条【实例分享】

    原生javascript上传图片带进度条【实例分享】

    本文主要介绍了原生javascript上传图片带进度条的实例详解。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 用js简单提供增删改查接口

    用js简单提供增删改查接口

    这篇文章主要介绍了用js简单提供增删改查接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript的内置对象Date详解

    JavaScript的内置对象Date详解

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • javascript Prototype 对象扩展

    javascript Prototype 对象扩展

    从对象创建一个实例说起来貌似是很简单的东西,是啊,基本在所有的语言中,都是用new关键字来创建实例的
    2009-05-05
  • 实例讲解JavaScript 计时事件

    实例讲解JavaScript 计时事件

    这篇文章主要介绍了JavaScript 计时事件的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    这篇文章主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
    2016-05-05
  • Echats图表大屏自适应的实现方法

    Echats图表大屏自适应的实现方法

    很多时候我们需要用图表来制作我们统计的数据直观的分析,所以我们可以用Echarts来制作图表,这篇文章主要给大家介绍了关于Echats图表大屏自适应的实现方法,需要的朋友可以参考下
    2021-10-10
  • javascript实现控制的多级下拉菜单

    javascript实现控制的多级下拉菜单

    这篇文章主要介绍了javascript实现控制的多级下拉菜单,包含示例代码,效果非常不错,这里推荐给大家。
    2015-07-07
  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    这篇文章主要介绍了原生js拖拽功能制作滑动条实例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • js列举css中所有图标的实现代码

    js列举css中所有图标的实现代码

    最近在做一个通用的配置模块。配置模块中必然要对系统的菜单、功能模块、权限资源等进行配置,为了更好的用户体验,图标是必不可少的!
    2011-07-07

最新评论