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

2024-12-19 09:52:05

datepicker插件默认为英文，而且格式为：mm/dd/yyyy这种情况，看起来不怎么直观。

修改目标：

1、默认显示为中文

2、格式为：yyyy年mm月dd日

需要修改两个地方：

1、更改datas对象，增加zh-cn语言选项；参见源代码的1419行

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"
 },
  "zh-cn":{
  days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
  daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
  months: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"],
  monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  today: "今天",
  clear: "清空"
 }
 };

红色部分为新增部分。

2、修改默认参数，即defaults对象。

var defaults = $.fn.datepicker.defaults = {
 autoclose: false,
 beforeShowDay: $.noop,
 calendarWeeks: false,
 clearBtn: false,
 daysOfWeekDisabled: [],
 endDate: Infinity,
 forceParse: true,
 format: 'yyyy年mm月dd日',
 keyboardNavigation: true,
 language: 'zh-cn',
 minViewMode: 0,
 multidate: false,
 multidateSeparator: ',',
 orientation: "auto",
 rtl: false,
 startDate: -Infinity,
 startView: 0,
 todayBtn: false,
 todayHighlight: false,
 weekStart: 0
 };

3、效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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

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

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

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

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

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

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

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

创建一个django工程,我使用的django 1.8.2,创建工程后,settings.py中设置中文显示支持定义 LANGUAGE_CODE = 'en-us'#改为zh-Hans 如果改为zh-cn则会报错报错提示 django IOError: No translation files found for default language zh-cn 即找不到zh-cn对应的本地化文件.一般而言,zh-cn编码对应的本地化文件夹为zh_CN,我去django的安装目录查找zh_CN,结
IDEA 高版本 PlantUML 插件默认主题修改的详细过程

目录一.问题描述 1.1 背景 1.2 示例对比二.为什么? 2.1 官网线索 2.2 插件源码 2.3 官方账号三.怎么办? 3.1 单图处理 3.2 一劳永逸 4.总结一.问题描述 1.1 背景 PlantUML 是非常不错的使用脚本画图的工具,效率很高.大家可以选择在官网上进行作图,但很多人会担心公司内部业务图泄露的风险,而且每次都要打开官网也不是很方便. 很多人会选择在 IDEA 中安装 PlantUML Integration 插件.但是高版本的 IDEA PlantUML I
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"
浅析使用BootStrap TreeView插件实现灵活配置快递模板

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 开发条件: 安装bootstrap-treeview插件,具体操作见: bootstrap-treeview 实现功能: 1.一个模板可指定子模板(包含多个地区.价格等) 2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的
Jquery日期选择datepicker插件用法实例分析

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

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

相关推荐

随机推荐