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

bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的。本文给大家介绍bootstrap datepicker带中文的js文件。

//用之前引用bootstrap的jsif （$（".datepicker"）.length > 0） {$（".datepicker"）.datepicker（{language: "zh-CN",autoclose: true,//选中之后自动隐藏日期选择框clearBtn: true,//清除按钮todayBtn: true,//今日按钮format: "yyyy-mm-dd"//日期格式}）;}

以下是datepicker的css文件和js代码

/*！* Datepicker for Bootstrap** Copyright 2012 Stefan Petre* Licensed under the Apache License v2.0* http://www.apache.org/licenses/LICENSE-2.0**/.datepicker {top: 0;left: 0;padding: 4px;margin-top: 1px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;/*.dow {border-top: 1px solid #ddd ！important;}*/}.datepicker:before {content: "";display: inline-block;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid #ccc;border-bottom-color: rgba（0, 0, 0, 0.2）;position: absolute;top: -7px;left: 6px;}.datepicker:after {content: "";display: inline-block;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #ffffff;position: absolute;top: -6px;left: 7px;}.datepicker > div {display: none;}.datepicker table {width: 100%;margin: 0;}.datepicker td,.datepicker th {text-align: center;width: 20px;height: 20px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}.datepicker td.day:hover {background: #eeeeee;cursor: pointer;}.datepicker td.day.disabled {color: #eeeeee;}.datepicker td.old,.datepicker td.new {color: #999999;}.datepicker td.active,.datepicker td.active:hover {color: #ffffff;background-color: #006dcc;background-image: -moz-linear-gradient（top, #0088cc, #0044cc）;background-image: -webkit-gradient（linear, 0 0, 0 100%, from（#0088cc）, to（#0044cc））;background-image: -webkit-linear-gradient（top, #0088cc, #0044cc）;background-image: -o-linear-gradient（top, #0088cc, #0044cc）;background-image: linear-gradient（to bottom, #0088cc, #0044cc）;background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient（startColorstr="#ff0088cc", endColorstr="#ff0044cc", GradientType=0）;border-color: #0044cc #0044cc #002a80;border-color: rgba（0, 0, 0, 0.1） rgba（0, 0, 0, 0.1） rgba（0, 0, 0, 0.25）;*background-color: #0044cc;/* Darken IE7 buttons by default so they stand out more given they won"t have borders */filter: progid:DXImageTransform.Microsoft.gradient（enabled = false）;color: #fff;text-shadow: 0 -1px 0 rgba（0, 0, 0, 0.25）;}.datepicker td.active:hover,.datepicker td.active:hover:hover,.datepicker td.active:focus,.datepicker td.active:hover:focus,.datepicker td.active:active,.datepicker td.active:hover:active,.datepicker td.active.active,.datepicker td.active:hover.active,.datepicker td.active.disabled,.datepicker td.active:hover.disabled,.datepicker td.active[disabled],.datepicker td.active:hover[disabled] {color: #ffffff;background-color: #0044cc;*background-color: #003bb3;}.datepicker td.active:active,.datepicker td.active:hover:active,.datepicker td.active.active,.datepicker td.active:hover.active {background-color: #003399 9;}.datepicker td span {display: block;width: 47px;height: 54px;line-height: 54px;float: left;margin: 2px;cursor: pointer;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}.datepicker td span:hover {background: #eeeeee;}.datepicker td span.active {color: #ffffff;background-color: #006dcc;background-image: -moz-linear-gradient（top, #0088cc, #0044cc）;background-image: -webkit-gradient（linear, 0 0, 0 100%, from（#0088cc）, to（#0044cc））;background-image: -webkit-linear-gradient（top, #0088cc, #0044cc）;background-image: -o-linear-gradient（top, #0088cc, #0044cc）;background-image: linear-gradient（to bottom, #0088cc, #0044cc）;background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient（startColorstr="#ff0088cc", endColorstr="#ff0044cc", GradientType=0）;border-color: #0044cc #0044cc #002a80;border-color: rgba（0, 0, 0, 0.1） rgba（0, 0, 0, 0.1） rgba（0, 0, 0, 0.25）;*background-color: #0044cc;/* Darken IE7 buttons by default so they stand out more given they won"t have borders */filter: progid:DXImageTransform.Microsoft.gradient（enabled = false）;color: #fff;text-shadow: 0 -1px 0 rgba（0, 0, 0, 0.25）;}.datepicker td span.active:hover,.datepicker td span.active:focus,.datepicker td span.active:active,.datepicker td span.active.active,.datepicker td span.active.disabled,.datepicker td span.active[disabled] {color: #ffffff;background-color: #0044cc;*background-color: #003bb3;}.datepicker td span.active:active,.datepicker td span.active.active {background-color: #003399 9;}.datepicker td span.old {color: #999999;}.datepicker th.switch {width: 145px;}.datepicker th.next,.datepicker th.prev {font-size: 21px;}.datepicker thead tr:first-child th {cursor: pointer;}.datepicker thead tr:first-child th:hover {background: #eeeeee;}.input-append.date .add-on i,.input-prepend.date .add-on i {display: block;cursor: pointer;width: 16px;height: 16px;}/* =========================================================* bootstrap-datepicker.js * http://www.eyecon.ro/bootstrap-datepicker* =========================================================* Copyright 2012 Stefan Petre** Licensed under the Apache License, Version 2.0 （the "License"）;* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.* ========================================================= */！function（ $ ） {// Picker objectvar Datepicker = function（element, options）{this.element = $（element）;this.format = DPGlobal.parseFormat（options.format || this.element.data（"date-format"） || "yyyy-mm-dd"）;this.picker = $（DPGlobal.template）.appendTo（"body"）.on（{click: $.proxy（this.click, this）//,//mousedown: $.proxy（this.mousedown, this）}）;this.isInput = this.element.is（"input"）;this.component = this.element.is（".date"） ? this.element.find（".add-on"） : false;if （this.isInput） {this.element.on（{focus: $.proxy（this.show, this）,//blur: $.proxy（this.hide, this）,keyup: $.proxy（this.update, this）}）;} else {if （this.component）{this.component.on（"click", $.proxy（this.show, this））;} else {this.element.on（"click", $.proxy（this.show, this））;}}this.minViewMode = options.minViewMode||this.element.data（"date-minviewmode"）||0;if （typeof this.minViewMode === "string"） {switch （this.minViewMode） {case "months":this.minViewMode = 1;break;case "years":this.minViewMode = 2;break;default:this.minViewMode = 0;break;}}this.viewMode = options.viewMode||this.element.data（"date-viewmode"）||0;if （typeof this.viewMode === "string"） {switch （this.viewMode） {case "months":this.viewMode = 1;break;case "years":this.viewMode = 2;break;default:this.viewMode = 0;break;}}this.startViewMode = this.viewMode;this.weekStart = options.weekStart||this.element.data（"date-weekstart"）||0;this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;this.onRender = options.onRender;this.fillDow（）;this.fillMonths（）;this.update（）;this.showMode（）;};Datepicker.prototype = {constructor: Datepicker,show: function（e） {this.picker.show（）;this.height = this.component ? this.component.outerHeight（） : this.element.outerHeight（）;this.place（）;$（window）.on（"resize", $.proxy（this.place, this））;if （e ） {e.stopPropagation（）;e.preventDefault（）;}if （！this.isInput） {}var that = this;$（document）.on（"mousedown", function（ev）{if （$（ev.target）.closest（".datepicker"）.length == 0） {that.hide（）;}}）;this.element.trigger（{type: "show",date: this.date}）;},hide: function（）{this.picker.hide（）;$（window）.off（"resize", this.place）;this.viewMode = this.startViewMode;this.showMode（）;if （！this.isInput） {$（document）.off（"mousedown", this.hide）;}//this.set（）;this.element.trigger（{type: "hide",date: this.date}）;},set: function（） {var formated = DPGlobal.formatDate（this.date, this.format）;if （！this.isInput） {if （this.component）{this.element.find（"input"）.prop（"value", formated）;}this.element.data（"date", formated）;} else {this.element.prop（"value", formated）;}},setValue: function（newDate） {if （typeof newDate === "string"） {this.date = DPGlobal.parseDate（newDate, this.format）;} else {this.date = new Date（newDate）;}this.set（）;this.viewDate = new Date（this.date.getFullYear（）, this.date.getMonth（）, 1, 0, 0, 0, 0）;this.fill（）;},place: function（）{var offset = this.component ? this.component.offset（） : this.element.offset（）;this.picker.css（{top: offset.top + this.height,left: offset.left}）;},update: function（newDate）{this.date = DPGlobal.parseDate（typeof newDate === "string" ? newDate : （this.isInput ? this.element.prop（"value"） : this.element.data（"date"））,this.format）;this.viewDate = new Date（this.date.getFullYear（）, this.date.getMonth（）, 1, 0, 0, 0, 0）;this.fill（）;},fillDow: function（）{var dowCnt = this.weekStart;var html = "<tr>";while （dowCnt < this.weekStart + 7） {html += "<th class="dow">"+DPGlobal.dates.daysMin[（dowCnt++）%7]+"</th>";}html += "</tr>";this.picker.find（".datepicker-days thead"）.append（html）;},fillMonths: function（）{var html = "";var i = 0while （i < 12） {html += "<span class="month">"+DPGlobal.dates.monthsShort[i++]+"</span>";}this.picker.find（".datepicker-months td"）.append（html）;},fill: function（） {var d = new Date（this.viewDate）,year = d.getFullYear（）,month = d.getMonth（）,currentDate = this.date.valueOf（）;this.picker.find（".datepicker-days th:eq（1）"）.text（DPGlobal.dates.months[month]+" "+year）;var prevMonth = new Date（year, month-1, 28,0,0,0,0）,day = DPGlobal.getDaysInMonth（prevMonth.getFullYear（）, prevMonth.getMonth（））;prevMonth.setDate（day）;prevMonth.setDate（day - （prevMonth.getDay（） - this.weekStart + 7）%7）;var nextMonth = new Date（prevMonth）;nextMonth.setDate（nextMonth.getDate（） + 42）;nextMonth = nextMonth.valueOf（）;var html = [];var clsName,prevY,prevM;while（prevMonth.valueOf（） < nextMonth） {if （prevMonth.getDay（） === this.weekStart） {html.push（"<tr>"）;}clsName = this.onRender（prevMonth）;prevY = prevMonth.getFullYear（）;prevM = prevMonth.getMonth（）;if （（prevM < month && prevY === year） || prevY < year） {clsName += " old";} else if （（prevM > month && prevY === year） || prevY > year） {clsName += " new";}if （prevMonth.valueOf（） === currentDate） {clsName += " active";}html.push（"<td class="day "+clsName+"">"+prevMonth.getDate（） + "</td>"）;if （prevMonth.getDay（） === this.weekEnd） {html.push（"</tr>"）;}prevMonth.setDate（prevMonth.getDate（）+1）;}this.picker.find（".datepicker-days tbody"）.empty（）.append（html.join（""））;var currentYear = this.date.getFullYear（）;var months = this.picker.find（".datepicker-months"）.find（"th:eq（1）"）.text（year）.end（）.find（"span"）.removeClass（"active"）;if （currentYear === year） {months.eq（this.date.getMonth（））.addClass（"active"）;}html = "";year = parseInt（year/10, 10） * 10;var yearCont = this.picker.find（".datepicker-years"）.find（"th:eq（1）"）.text（year + "-" + （year + 9））.end（）.find（"td"）;year -= 1;for （var i = -1; i < 11; i++） {html += "<span class="year"+（i === -1 || i === 10 ? " old" : ""）+（currentYear === year ? " active" : ""）+"">"+year+"</span>";year += 1;}yearCont.html（html）;},click: function（e） {e.stopPropagation（）;e.preventDefault（）;var target = $（e.target）.closest（"span, td, th"）;if （target.length === 1） {switch（target[0].nodeName.toLowerCase（）） {case "th":switch（target[0].className） {case "switch":this.showMode（1）;break;case "prev":case "next":this.viewDate["set"+DPGlobal.modes[this.viewMode].navFnc].call（this.viewDate,this.viewDate["get"+DPGlobal.modes[this.viewMode].navFnc].call（this.viewDate） + DPGlobal.modes[this.viewMode].navStep * （target[0].className === "prev" ? -1 : 1））;this.fill（）;this.set（）;break;}break;case "span":if （target.is（".month"）） {var month = target.parent（）.find（"span"）.index（target）;this.viewDate.setMonth（month）;} else {var year = parseInt（target.text（）, 10）||0;this.viewDate.setFullYear（year）;}if （this.viewMode ！== 0） {this.date = new Date（this.viewDate）;this.element.trigger（{type: "changeDate",date: this.date,viewMode: DPGlobal.modes[this.viewMode].clsName}）;}this.showMode（-1）;this.fill（）;this.set（）;break;case "td":if （target.is（".day"） && ！target.is（".disabled"））{var day = parseInt（target.text（）, 10）||1;var month = this.viewDate.getMonth（）;if （target.is（".old"）） {month -= 1;} else if （target.is（".new"）） {month += 1;}var year = this.viewDate.getFullYear（）;this.date = new Date（year, month, day,0,0,0,0）;this.viewDate = new Date（year, month, Math.min（28, day）,0,0,0,0）;this.fill（）;this.set（）;this.element.trigger（{type: "changeDate",date: this.date,viewMode: DPGlobal.modes[this.viewMode].clsName}）;}break;}}},mousedown: function（e）{e.stopPropagation（）;e.preventDefault（）;},showMode: function（dir） {if （dir） {this.viewMode = Math.max（this.minViewMode, Math.min（2, this.viewMode + dir））;}this.picker.find（">div"）.hide（）.filter（".datepicker-"+DPGlobal.modes[this.viewMode].clsName）.show（）;}};$.fn.datepicker = function （ option, val ） {return this.each（function （） {var $this = $（this）,data = $this.data（"datepicker"）,options = typeof option === "object" && option;if （！data） {$this.data（"datepicker", （data = new Datepicker（this, $.extend（{}, $.fn.datepicker.defaults,options））））;}if （typeof option === "string"） data[option]（val）;}）;};$.fn.datepicker.defaults = {onRender: function（date） {return "";}};$.fn.datepicker.Constructor = Datepicker;var DPGlobal = {modes: [{clsName: "days",navFnc: "Month",navStep: 1},{clsName: "months",navFnc: "FullYear",navStep: 1},{clsName: "years",navFnc: "FullYear",navStep: 10}],dates:{days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],},isLeapYear: function （year） {return （（（year % 4 === 0） && （year % 100 ！== 0）） || （year % 400 === 0））},getDaysInMonth: function （year, month） {return [31, （DPGlobal.isLeapYear（year） ? 29 : 28）, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]},parseFormat: function（format）{var separator = format.match（/[./-s].*?/）,parts = format.split（/W+/）;if （！separator || ！parts || parts.length === 0）{throw new Error（"Invalid date format."）;}return {separator: separator, parts: parts};},parseDate: function（date, format） {var parts = date.split（format.separator）,date = new Date（）,val;date.setHours（0）;date.setMinutes（0）;date.setSeconds（0）;date.setMilliseconds（0）;if （parts.length === format.parts.length） {var year = date.getFullYear（）, day = date.getDate（）, month = date.getMonth（）;for （var i=0, cnt = format.parts.length; i < cnt; i++） {val = parseInt（parts[i], 10）||1;switch（format.parts[i]） {case "dd":case "d":day = val;date.setDate（val）;break;case "mm":case "m":month = val - 1;date.setMonth（val - 1）;break;case "yy":year = 2000 + val;date.setFullYear（2000 + val）;break;case "yyyy":year = val;date.setFullYear（val）;break;}}date = new Date（year, month, day, 0 ,0 ,0）;}return date;},formatDate: function（date, format）{var val = {d: date.getDate（）,m: date.getMonth（） + 1,yy: date.getFullYear（）.toString（）.substring（2）,yyyy: date.getFullYear（）};val.dd = （val.d < 10 ? "0" : ""） + val.d;val.mm = （val.m < 10 ? "0" : ""） + val.m;var date = [];for （var i=0, cnt = format.parts.length; i < cnt; i++） {date.push（val[format.parts[i]]）;}return date.join（format.separator）;},headTemplate: "<thead>"+"<tr>"+"<th class="prev">‹</th>"+"<th colspan="5" class="switch"></th>"+"<th class="next">›</th>"+"</tr>"+"</thead>",contTemplate: "<tbody><tr><td colspan="7"></td></tr></tbody>"};DPGlobal.template = "<div class="datepicker dropdown-menu">"+"<div class="datepicker-days">"+"<table class=" table-condensed">"+DPGlobal.headTemplate+"<tbody></tbody>"+"</table>"+"</div>"+"<div class="datepicker-months">"+"<table class="table-condensed">"+DPGlobal.headTemplate+DPGlobal.contTemplate+"</table>"+"</div>"+"<div class="datepicker-years">"+"<table class="table-condensed">"+DPGlobal.headTemplate+DPGlobal.contTemplate+"</table>"+"</div>"+"</div>";}（ window.jQuery ）;

以上所述是小编给大家介绍的BootStrap中Datepicker控件带中文的js文件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！