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

(0)

相关推荐

  • bootstrap datepicker限定可选时间范围实现方法

    一.应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值. 二.相关知识点 1.bootstrap-datepicker的初始化 引入bootstrap-datepicker.js和bootstrap-datepicker.css bootstrap-datepicker配置参数的了解 2.boostra

  • BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的.本文给大家介绍bootstrap datepicker带中文的js文件. //用之前引用bootstrap的jsif ($(".datepicker").length > 0) { $(".datepicker").datepicker({ language: "zh-CN", autoclose: true,//选中之后自动隐藏日期选择框 cle

  • Bootstrap datepicker日期选择器插件使用详解

    bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以. datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中.因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包. 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&

  • JS控件bootstrap datepicker使用方法详解

    bootstrap-datepicker沙箱环境: bootstrap-datepicker沙箱环境: 1.requirejs配置 requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 urlArgs:'v=2016110701', paths: { jquery: ["../../plugins/jquery/jquery

  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把

  • bootstrap datepicker插件默认英文修改为中文

    datepicker插件默认为英文,而且格式为:mm/dd/yyyy这种情况,看起来不怎么直观. 修改目标: 1.默认显示为中文 2.格式为:yyyy年mm月dd日 需要修改两个地方: 1.更改datas对象, 增加zh-cn语言选项:参见源代码的1419行 var dates = $.fn.datepicker.dates = { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesd

  • BootStrap的Datepicker控件使用心得分享

    2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能! 公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单.今天遇到要使用它的datepicker这个控件. 问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后.于是一顿研究,从上午研究到3点才解决问题. 总结了一下问题所在.主要原因是项目里用的jquery

  • 浅谈Bootstrap的DatePicker日期范围选择

    用日期插件时,经常会有一种需求.两个input框选择.开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间. 我们当然可以用选择的结果来判断输入正确与否.但是更好的办法是让我们的日期选择插件做出一些限制. Bootstrap搭配了很优秀的日期选择插件.DatePicker和DateTimePicker. 两者功能很类似.使用方法也是差不多的.DatePicker支持更多的事件和设置. 看api知道日期变化的时候会有一个事件changeDate.当选择的日期变化的时候,会

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

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文 1.首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存 2.增加 cn 语言选项 var dates = $.fn.datepicker.dates = { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesday"

  • 修改ligerui 默认确认按钮的方法

    如下所示: $.extend($.ligerDefaults.DialogString, {ok: '取消单据'}); showDialogPay = $.ligerDialog.alert('正在支付中,请稍候...',function(){ clearInterval(intval); $.extend($.ligerDefaults.DialogString, {ok: '确认'}); payReverse(); }); 以上就是小编为大家带来的修改ligerui 默认确认按钮的方法全部内

  • 在Pycharm中修改文件默认打开方式的方法

    新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了个Text,然后就乱码了: 那我们不小心操作后,怎么重新修改文件的默认打开方式呢? 1.File -> Settings -> Editor -> File Types 找到Text下的"*.sqlite3",把它删掉就ok啦~ 以上这篇在Pycharm中修改文件默认打开方式的方法就是小编分享给大家的全部内容了,希望能给大家一个参

  • 修改Tomcat默认访问根目录的方法

    在Tomcat默认安装后,tomcat的主目录是webapps/root目录. 在conf文件夹下面找到server.xml 打开 在<hosts>  ......</hosts>中间添加一行 复制代码 代码如下: <Context path="" docBase="/usr/tomcat/apache-tomcat-8.5.11/webapps/guanwang" debug="0" reloadable=&quo

  • centos 修改ssh默认端口号的方法示例

    linux服务器一般默认的ssh端口号都为22,所以在大部分的使用者手中出于安全考虑就需要修改ssh的默认端口号,下面为为修改ssh默认端口号方法 一:修改/etc/ssh/sshd_config配置文件(注意:这里是sshd_config,而不是ssh_config) 1:查看ssh的默认端口号 netstat -anp|grep ssh 2:修改/etc/ssh/sshd_config配置文件 在sshd_config文件中添加一个端口号10011(这里保留22端口,是为了放置假如配置失败的

  • vue如何使用swiper插件修改左右箭头的默认样式

    目录 使用swiper插件修改左右箭头的默认样式 vue中修改swiper样式问题 原因 解决方法 总结 使用swiper插件修改左右箭头的默认样式 效果图 修改箭头的背景,以及颜色 .swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px;

  • bootstrap时间插件daterangepicker使用详解

    本文实例为大家分享了bootstrap时间插件daterangepicker的具体代码,供大家参考,具体内容如下 插件下载地址:https://github.com/dangrossman/bootstrap-daterangepicker 头部引入文件: <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link

  • bootstrap日期插件daterangepicker使用详解

    今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得: 插件开源地址:daterangepicker日期控件, 插件使用只要按照开源中的文档信息来就好先包括以下引用: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="moment.js"

随机推荐