O Bootstrap-Datepicker é um excelente plug-in de seleção de tempo, e o padrão é exibir datas em inglês. Este artigo apresenta o arquivo JS com o bootstrap datepicker com chinês.
// use jsif ($ (". Datepicker"). Comprimento> 0) {$ (". Datepicker"). Datepicker ({idioma: "zh-cn", autoclose: true, // autoclose: true, // ocultar automaticamente a caixa de seleção de data após a seleção: "True, // limpar o botão hoje: formato});}A seguir, o arquivo CSS e o código JS do DatePicker
/*!* Datepicker para bootstrap ** Copyright 2012 Stefan petre* licenciado sob a licença Apache v2.0* http://www.apache.org/license/license-----------rgin-topOp: 1pxx {top: 0; esquerda: 0; preenchimento: 4px; margin-topop: 1px; 4px; -moz-Border-Radius: 4px; Rádio de borda: 4px;/*. Dow {Border-top: 1px Solid #DDD! IMPORTION;}*/}. DatePicker: Antes {content: ''; Display: Block Inline; Border-Left: 7px Solid; #CCC; Border-Bottom-Color: RGBA (0, 0, 0, 0.2); Posição: Absoluto; topo: -7px; esquerda: 6px;}. DatePicker: After {content: ''; Display: Bloco de borda; borda-left: 6px Solid Transparent; Border-Right: 6px Solid Solid; 7px;}. Datepicker> div {display: nenhum;}. Tabela de datepicker {width: 100%; margem: 0;}. Datepicker td, .datepicker th {text-align: centro; largura: 20px; altura: 20px; -webkit-bordius: 4px; 4px;}. Datepicker td.day:hover {background: #eeeeee; cursor: pointer;}. Datepicker td.day.disabled {color: #eeeeeeeeeeeeee;}. Datepicker td.old, .datepicker td.new {color: #9999;}. #fffff; cor de fundo: #006dcc; imagem de fundo: -moz-linear-gradiente (topo, #0088cc, #0044cc); imagem de fundo: -webkit gradiente (linear, 0 0, 0 100%, de (0088cc), para ( #0044cc) -Webkit-linear-gradiente (topo, #0088cc, #0044cc); imagem de fundo: -o-linear-gradiente (topo, #0088cc, #0044cc); imagem de fundo: gradiente linear (inferior, #0088cc, #004-rate); progid: dximageTransform.microsoft.gradiente (startColorstr = ' #ff0088cc', endColorstr = ' #ff0044cc', gradientType = 0); border-cor: #0044cc #0044cc #002a80; border-cor: 0.1) rgba (0, 0, 0, 0,25);*cor de fundo: #0044cc;/*escurece os botões IE7 por padrão para que eles se destacem mais, pois não terão bordas*/filtro: progid: dximageTransform.microsoft.grad (inabed = false); color: #fff; 0.25);}. Datepicker td.Active: Passe, .Datepicker td.Active: Passe o mouse: .datepicker td.active: focus, .datepicker td.active: hover: focus, .datepicker td td: ativo, .datepicker td.active. td.Active: hover.active, .Datepicker td.active.disabled, .datepicker td.active: hover.disabled, .datepicker td.active [desativado] ,. datepicker td.Active: hover [desativado] {color: #ffff; background-color: #0044cc; border [desativado] {color: #fff; TD.Active: ativo, .datepicker td.active: mouse: ativo, .datepicker td.active.active, .datepicker td.active: hover.active {background-color: #003399 /9; 2px; cursor: ponteiro; -webkit-border-radius: 4px; -moz-border-radius: 4px; radio de borda: 4px;}. Datepicker td span: hover {background: #eeeeeeeeee;}. Datepicker span.active {color: #ffff; -Moz-linear-gradiente (topo, #0088cc, #0044cc); imagem de fundo: -webkit-gradiente (linear, 0 0, 0 100%, de ( #0088cc), para ( #0044cc); backmage-image: -webkit-linear #0044cc); Imagem de fundo: -o-linear-gradiente (topo, #0088cc, #0044cc); imagem de fundo: gradiente linear (para baixo, #0088cc, #0044cc); fundo-repetir: repetição-x; filtro: filtro: progid: dximageTransform.microsoft.gradiente (startColorstr = ' #ff0088cc', endColorstr = ' #ff0044cc', gradientType = 0); border-cor: #0044cc #0044cc #002a80; border-cor: 0.1) rgba (0, 0, 0, 0,25);*cor de fundo: #0044cc;/*escurece os botões IE7 por padrão para que eles se destacem mais, pois não terão bordas*/filtro: progid: dximageTransform.microsoft.grad (inabed = false); color: #fff; 0.25);}. Datepicker td span.Active: pairar, .datepicker td span.active: focus, .datepicker td span.active: ativo, .datepicker td span.active.Active, .Datepicker td span.active.disabled, .datepicker td span.active [desabilitado] {cor: #fffffffffffffffff.ffff; #003bb3;}. Datepicker td span.active: ativo, .datepicker td span.active.active {background-color: #003399 /9; }.datepicker td span.old {color: #99999;}. {Font-Size: 21px;}. DatePicker Thead TR: Primeira filho th {Cursor: Pointer;}. DatePicker Thead TR: Primeira criança th: hover {Background: #eeeeeeeeeeeeeeeeeee;}. 16px;}/* ====================================================== doc ====================================================== doc ====================================================== doc ====================================================== doc Copyright 2012 Stefan Petre ** licenciado sob a licença Apache, versão 2.0 (a "licença");* Você não pode usar esse arquivo, exceto em conformidade com a licença. Base,* sem garantias ou condições de qualquer tipo, expresso ou implícito.* Veja a licença para as permissões de governança de idiomas específicas e* limitações sob a licença.* =============================================================================================================== ======================================================= doc =============================================================================================================== ======================================================= doc opções) {this.Element = $ (elemento); this.format = dpglobal.parseFormat (options.format || this.Element.data ('date-format') || 'yyyy-mm-dd'; this.picker = $ (dpglobal.template) .appendto ('body); este) //, // 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) (); $ .Proxy (this.show, this));} else {this.element.on ('clique', $ .proxy (this.show, this));} else {this.element.on ('click', $ .Proxy (thisshow, this); options.MinViewMode || this.Element.Data ('Date-MinViewMode') || 0; if (typeof this.minViewMode === 'String') {switch (this.minviewMode) {case 'meses': this.MinViewMode = 1 Break; case '' ': this.MinView; 0; quebrar;}} this.viewMode = options.viewMode || this.Element.data ('date-viewMode') || 0; if (typeof this.viewMode === 'String') {switch (thisViewMode) {case ': thisviewMode = 1; Break; case' 'ANIVE. 0; quebrar;}} this.startViewMode = this.viewMode; this.weekstart = options.weekstart || this.element.data ('data 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 = {construtor: datepicker, mostre: função (e) {this.picker.show ({construtor: datepicker; this.component.outerHeight (): this.Element.outerHeight (); this.place (); $ (janela) .on ('redimensionar', $ .Proxy (this.place, this)); se (e) {e.StopPropagation (); e.PreventDault ();} (! function (ev) {if ($ (ev.target) .closest ('. datepicker'). length == 0) {that.hide ();}}); this.element.Trigger ({type: 'show', date: this.date});}, hide: function () {this.picker.hide (); = this.startViewMode; this.showMode (); if (! this.isInput) {$ (document) .off ('mousedown', this.hide);} // this.set (); this.Element.trigger ({type: 'hide', date: this.date}); this.Format); if (! this.isInput) {if (this.component) {this.element.find ('input'). prop ('value', formatted);} this.Element.data ('date', formatted);} else {this.Element.prop ('value', formatted); === 'string') {this.date = dpglobal.parsedate (newDate, this.format);} else {this.date = new Date (newDate);} this.set (); this.ViewDate = 0 (this.date.getlyear (), this.date.getMonth () 0, 0, 0, 0, 0, 0, 0, 0, 0. function () {var offset = this.component? this.component.offset (): this.element.offset (); this.picker.css ({top: offset.top + this.Height, esquerda: offset.left});}, atualização: function (newDate) {this.date = dpglobal.parsedate (tipo de newdate ==='= '' '' '' '' '' ''? this.Element.Prop ('value'): this.Element.data ('date')), this.Format); this.ViewDate = new Date (this.date.getlyear (), this.date.getmonth (), 1, 0, 0, 0, this.fill ();}, FillDow: function () {0, 0, 0); this.fill ();}, FillDow: function () {var dowr dawc; '<tr>'; while (dowcnt <this.weekstart+7) {html+= '<th>'+dpglobal.dates.daysmin [(dowcnt ++)%7]+'</th>';} html = '</tr>'; this.picker.find. thead '). Anexe (html);}, preenchmOnths: function () {var html =' '; var i = 0while (i <12) {html+=' <pan> '+dpglobal.dates.monthsshort [i ++' '</span>'; td '). Anexar (html);}, preencher: function () {var d = new Date (thisviewDate), ano = d.getlyear (), mês = d.getMonth (), currentDate = this.date.valueof (); this.picker.find ('. datepicker-days th: eq (1)'). text (dpglobal.dates.months [mês]+''+ano); var preminth = nova data (ano, mês-1, 28,0,0,0,0), dia = dpglobal.getDaysinMmonth (prevmonnthyful.ghet.0,0), dia = dia = dpglobal.getDaysinMonth (prevmonthslying.get.0,0,0), dia = dpglobal.getDaysinMonth (prevmonth.ghtmonsful.0,0, prevmonth.getMonth ()); prevmonth.setDate (dia); prevmonth.setDate (dia - (prevOnth.Getday () - this.Weekstart + 7)%7); var nexThOnth = new Data (prevOntmoMMOMMOMMOMMOMMOMMOMMOMOM.SEXTDATE (nextontHoTOFTATE) [) [) nextMonThMonThMOMMOMMOMMOMTH. NEXTMOMMOMTEM. NEXT. NEXT. NEXT. NEXT. next. next. next. next. próximo; clsname, prevy, prevm; while (prevmonth.valueof () <nextmonth) {if (prevmonth.getday () === this.weekstart) {html.push ('<tr>');} clsname = this.OnRender (prevMoM); && prevy === ano) || Prevy <ano) {clsname += 'Old';} else if ((prevm> mês && prevy === ano) || previe> ano) {clsname += 'new'; ativo ';} html.push (' <td> '+prevmonth.getdate ()+' </td> '); if (prevMonth.getday () === this.weekend) {html.push (' </tr> ');} prevOnth. TBody '). Empty (). Anexe (html.join (' ')); var currentyear = this.date.getlyear (); var meses = this.picker.find ('. datepicker-meses). {meses.eq (this.date.getMonth ()). addclass ('ativo');} html = ''; ano = parseint (ano/10, 10) * 10; var anocont = this.picker.find ('. datePicker-anos'). Find ('th: eq (1)'). -= 1; para (var i = -1; i <11; i ++) {html+= '<pan>'+ano+'</span>'; ano+= 1;} yearcont.html (html);}, clique: função (e) {e.stopPropAgation (); e.eveventDaffult (varvera; 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': case ': case': case ': case': case ': case': case ': 'Next': thisViewDate ['set'+dpglobal.modes [this.viewMode] .navfnc] .call (this.ViewDate, thisViewDate ['get'+dpglobal.modes [this.ViewMode] .navfnc] .call (thisViewDate)+dpgloBal.nvEd.mod. (Target [0] .className === 'prev'? -1: 1)); this.fill (); this.set (); quebra;} break; case 'span': if (target.is ('. mês')) {var Month = Target.Parent (). Find ('span). 10) || 0; this.ViewDate.SetlyEar (ano);} if (this.viewMode! == 0) {this.date = new Date (this.ViewDate); this.Element.Trigger ({Type: 'Alterilate', data: this.date, viewmode: Dpglobal.modes [this.viewMode] .clsName});} this.showMode (-1); this.fill (); this.set (); quebra; case 'td': if (Target.is ('. this.ViewDate.getMonth (); if (Target.is ('. Old')) {mês -= 1;} else if (Target.is ('. new'))) {mês += 1;} var ano = this.ViewDate.Getlyear (); this.date = nova data (ano, mês, dia, 0,0,0,0); this.ViewDate = nova data (ano, mês, Math.min (28, dia), 0,0,0,0); this.fill (); this.set (); this.Element.Trigger ({type: 'alterações', data: this.date, viewMode: dpglobal.modes [this.viewMode] .clsname});} break;}}}, mouseDown: function (e) {e.stopPropagation (); e.eventDefult () {e.stopApagation:); {this.viewMode = Math.max (this.MinViewMode, Math.min (2, this.viewMode + dir));} this.picker.find ('> div'). hide (). filtro ('.clSicker-' + dpglobal.modes [this.viewMode] .nksName) .Show (); {return this.each (function () {var $ this = $ (this), data = $ this.data ('datepicker'), opções = typeof opção === 'object' && option; if (! data) {$ this.data ('datePicker', (data = newpicker (this, $ .extend ({}, $. (typeof opção === 'string') dados [option] (val);});}; $. 1},{clsName: 'months',navFnc: 'FullYear',navStep: 1},{clsName: 'years',navFnc: 'FullYear',navStep: 10}],dates:{days: ["Sunday", "Monday", "Tuesday", "Thursday", "Friday", "Saturday", "Sunday"],daysShort: ["Sunday", "One", "two", "three", "four", "five", "six", "seven"],daysMin: ["day", "one", "two", "three", "four", "five", "six", "seven"],months: ["January", "February", "March", "April", "May", "May", "June", "July", "July", "July", "July", "July", "July", "Julho", "junho", "junho", "junho", "dezembro"],}, isleapyear: function (ano) {return (((ano % 4 === 0) && (ano % 100! == 0)) || (ano % 400 === 0))}, getDaysInmOnth: função (ano, (mês) {Return [Return) [Return) 30, 31, 30, 31, 31, 30, 31] [mês]}, parseformat: function (formato) {var separator = format.match (/.////// s].*?/), Partes = format.split (// w+/); if (! Separador ||! {separador: separador, partes: partes};}, analisedato: function (data, formato) {var partes = date.split (format.separator), date = new Date (), val; date.Sethours (0); date.setminutes (0); date.SeSeConds (0); date.setMilLis; format.parts.length) {var ano = date.getlyear (), dia = date.getDate (), mês = date.getMonth (); para (var i = 0, cnt = format.Parts.Length; i <cnt; i ++) {val = parseInt [i], 10) | |d; val; date.setDate (val); quebra; case 'mm': case 'm': mês = val - 1; date.setmonth (val - 1); quebra; case 'yy': ano = 2000 + val; data.setfullyear (2000 + val); quebra; case 'yeyy': ano = ano; data. date;}, formatdate: function (data, formato) {var val = {d: date.getDate (), m: date.getMonth () + 1, yy: date.getlyear (). tostring (). <10? '<Thead>'+'<tr>'+'<th> ‹</th>'+'<th>'+'<th>› </th>'+'</tr>'+'</tman>', conttemplate: '<tbody> <tr> <td colspan = "7"> </td> </tump> '<div>'+'<div>'+'<table>'+dpglobal.headtemplate+'<tbody> </tbody>'+'</itlas>'+'</div>'+'<div>'+'<div>' '+' <table> '+dpglobal .HeadTemplate+dpglobal.contTemplate+'</tabela>'+'</div>'+'<div>'+'<table>' '+dpglobal.headtemplate+' </tabela ''+'</div>'+';} ( window.jQuery);O acima exposto está o arquivo JS no controle DatePicker no Bootstrap apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!