Bootstrap-DatePicker es un complemento de selección de tiempo muy excelente, y el valor predeterminado es mostrar fechas en inglés. Este artículo le presenta el archivo JS con Bootstrap DatePicker con chino.
// use jsif ($ (". DatePicker"). formato});}El siguiente es el archivo CSS de DatePicker y el código JS
/*!* DatePicker para Bootstrap ** Copyright 2012 Stefan Petre* con licencia bajo la licencia de Apache v2.0* http://www.apache.org/license/license-2.0**/.datepicker {top: 0; izquierda: 0; relleno: 4px; margen-top: 1px; -webkit-radius: 4px; -Moz-Border-Radius: 4px; border-radio: 4px;/*. Dow {border-top: 1px solid #ddd! Importante;}*/}. Datepicker: antes de {content: ''; visual #ccc; border-bottom-color: rgba (0, 0, 0, 0.2); posición: absoluto; top: -7px; izquierda: 6px;}. DatePicker: After {content: ''; display: inline-block; border-left: 6px sólido transparente; fronteriza: 6px sólido transparente; border-bottom: 6px sólido #ffffffffffffffe; plano sólido; -6px; izquierda: 7px;}. Datepicker> div {display: none;}. Datepicker tabla {ancho: 100%; margen: 0;}. Datepicker td, .datepicker th {text-align: centro; ancho: 20px; altura: 20px; -weBkit-border-Radius: 4px; -moz-border-border-border 4px; border-radio: 4px;}. Datepicker td.day:Hover {en segundo plano: #eeeeee; cursor: pointer;}. Datepicker td.day.disabled {color: #eeeeeeee;}. Datepicker td.old, .datepicker td.new {color: #999999;}. td.active, .datepicker td.active: hover {color: #ffffff; fondo de fondo: #006dcc; background-image: -moz-lineal-gradiente (top, #0088cc, #0044cc); background-image: -webkit-gradiente (lineal, 0 0, 0 100%, de ( #008ccccccc), 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: activo, .datepicker td.active: hover, hover, datepicker td.active.active, .datepicker td.active: hover.active, .datepicker td.active.disable, .datepicker td.active: hover.disable, .datepicker td.active [discapacited], datepicker td.active: hover [discapacitada] {color: #ffffffffe; de fondo; #0044cc;*Color de fondo: #003bb3;}. DatePicker td.active: activo, .datepicker td.active: hover: activo, .datepicker td.active.active, .datepicker td.active: hover.active {de fondo: #003399 /9; bloque; ancho: 47px; altura: 54px; línea de línea: 54px; float: izquierda; margen: 2px; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}. datpicker td span: hover {borden: #eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee;}.}. span.active {color: #ffffff; fondo de fondo: #006dcc; background-image: -moz-lineal-gradiente (top, #0088cc, #0044cc); background-image: -webkit-gradiente (lineal, 0, 0 100%, de ( #0088cc), a ( #0044ccc); -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', endcolortr = ' #ff0044cc', gradiente = 0); border-color: #0044cc #0044cc #002A80; border-color: rgba (0, 0, 0, 0.1) 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: #ffff;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: activo, .datepicker td span.active.active, .datepicker td span.active.disable, .datepicker td span.active [discapacition] {color: #ffff; #ffff; #0044cc;*Color de fondo: #003bb3;}. DatePicker td span.active: activo, .datepicker td span.active.active {background-color: #003399 /9 ;} 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 {fondo: #eeeeeeeeeee;}. Input-append.date .date. .add-on i {display: block; cursor: puntero; ancho: 16px; altura: 16px;}/* ================================================================================================================= ================================================================================================================= ================================================================================================================= ================================================================================================================= Copyright 2012 Stefan Petre ** licenciado bajo la licencia Apache, versión 2.0 (la "Licencia");* No puede usar este archivo, excepto de conformidad con la licencia.* Puede obtener una copia de la Licencia AT ** Http://www.apache.org/license-2.0** A menos que sea necesario. Sin garantías o condiciones de ningún tipo, expresa o implícita.* Consulte la licencia para los permisos de gobierno del idioma específico y* limitaciones bajo la licencia.* =======================================================================================================================================================================================================================================================================================. ================================================================================================================ =======================================================================================================================================================================================================================================================================================. ================================================================================================================ Opciones) {this.element = $ (elemento); this.format = dpGlobal.ParseFormat (options.Format || this.element.data ('date-format') || 'yyyy-mm-dd'); this.picker = $ (dpGlobal.template) .appendTo ('buody'). 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)});} (this.component) {this.component.on ('click', $ .proxy (this.show, this));} else {this.element.on ('click', $ .proxy (this.show, this));} else {this.element.on ('click', $ .proxy (this.show, this));}} this.minViewviewview opciones.minviewmode || this.element.data ('date-minviewmode') || 0; if (typeof this.minviewmode === 'string') {switch (this.minviewMode) {case 'meses': this.minviewMode = 1; break; break; 0; break;}} this.viewMode = options.ViewMode || this.element.data ('date-viewMode') || 0; if (typeof this.viewMode ==== 'string') {switch (this.viewMode) {case 'meses': this.viewMode = 1; break; case 'años: this.viewMode = 2; break; break; 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.heheight? this.component.outerHeight (): this.element.outerHeight (); this.place (); $ (Window) .on ('RESEDE', $. this; $ (documento) .on ('mouseDown', function (ev) {if ($ (ev.target) .cloSest ('. datepicker'). longitud == 0) {that.hide ();}}); this.element.Rigger ({type: 'show', fecha: this.date});}, escondite: escondite: 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 formatted = dpGlobal.FormatDate (this.Date, this.Format); if (! this.isinput) {if (this.component) {this.element.find ('input'). prop ('valor', formattado);} this.data.data ('date', formatted);} {this.element.prop ('value', formatted);}}, setValue: function (newDate) {if (typeOf newDate ==== 'String') {this.Date = dpGlObal.Parsedate (newDate, this.Format);} ME Date (this.date.getblyear (), this.date.getmonth (), 1, 0, 0, 0, 0, 0); this.fill ();}, lugar: 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 nightDate ==== 'string'? Newdate: ((this.isin? this.element.prop ('value'): this.element.data ('date')), this.Format); this.ViewDate = new Date (this.date.getblyear (), this.date.getmonth (), 1, 0, 0, 0, 0); this.fill ();}, filldow: function () {var dowcnt = this.week; '<tr>'; while (dowcnt <this.weekstart+7) {html+= '<th>'+dpglobal.dates.daysmin [(dowcnt ++)%7]+'</th>';} html+= '</tr>'; this.picker.find ('. Datepicker-days-daysss thead '). append (html);}, fillmonths: function () {var html =' '; var i = 0while (i <12) {html+=' <span> '+dpGlobal.dates.MonthsShort [i ++]+' </span> ';} this.picker.find ('. td '). append (html);}, relleno: function () {var d = new date (this.viewDate), año = d.getblyear (), mes = d.getMonth (), currentDate = this.date.valueOf (); this.picker.find ('. PrevMonth.getMonth ()); PrevMonth.SetDate (Day); PrevTh.SetDate (Day - (Prevmonth.getday () - this.weekStart + 7)%7); var nextmonth = new Date (Prevmonth); nextMonth.setDate (nextMonth.getDate () + 42); nextmonth.valeOf (); var html = [] clsname, prevy, prevma; while (prevonth.valueOf () <nextmonth) {if (prevonth.getday () === this.weekStart) {html.push ('<tr>');} clsname = this.onrender ((); prevy = prevy = previo && prevy === año) || Active ';} html.push (' <td> '+previsto.getDate ()+' </td> '); if (anterior tbody '). vacía (). append (html.join (' ')); var currentyear = this.date.getblyear (); var meses = this.picker.find ('. datepicker-months '). Buscar (' th: eq (1) '). texto (año) .end (). Buscar (' span '). {mess.eq (this.date.getmonth ()). addClass ('activo');} html = '' '; año = parseint (año/10, 10) * 10; var y añocont = this.picker.find ('. DatePicker-Years '). Find (' th: eq (1) '. 9). $ (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); ruptura; case 'case': 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 ==== 'previo'? -1: 1)); this.fill (); this.set (); break;} break; case 'span': if (target.is ('. Mes')) {var mes = = Target.Parent (). find ('span'). index (target); this.viewDate.setMonth (mes);} else {var año = parseInt (target.text (), 10) || 0; this.viewDate.settyLiflyear (año);} if (this.viewMode! == 0) {this.date = new feche (this.viewDate); thy.element (type (type (type (tye 'cambiado', fecha: this.date, ViewMode: dpGlobal.modes [this.ViewMode] .clsname});} this.showMode (-1); this.fill (); this.set (); ruptura; case 'td': if (target.is ('. Day') & &! 10) || 1; var mes = this.viewDate.getMonth (); if (target.is ('. Old')) {mes -= 1;} else if (target.is ('. New'))) {mes += 1;} var año = this.viewdate.getblybyar (); this.Date = nueva fecha (año, mes, día, 0,0,0,0); this.viewDate = nueva fecha (año, mes, math.min (28, día), 0,0,0,0); this.fill (); this.set (); this.element.trigger ({type: 'cambiatate', date: this.Date, ViewMode: dpGlobal.modes [this.viewMode] .clsname});} break;}}}, MouseDown: function (e) {e.Stoppropagation {this.ViewMode = Math.max (this.minviewMode, Math.min (2, this.viewMode + dir));} this.picker.find ('> div'). hide (). filtre ('. datepicker-' + dpglobal.modes [this.viewMode] .clsname) .show ();} Ot}; $. function (opción, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ('datepicker'), options = typeof option ==== 'objeto' && opción; if (! Data) {$ this.data ('datepicker', (data = new datepicker (this, $ .extend ({},,, $ .fn.datepicker.defaults, options))));} if (typeof option ==== 'string') data [opción] (val);});}; $. fn.datepicker.defaults = {onrender: function (date) {return '' ';}}; $. fn.datepicker.constructor = datepicker; {modos: [{clsname: 'días', navfnc: 'mes', navstep: 1}, {clsname: 'meses', navfnc: 'plottyear', navstep: 1}, {clsname: 'años', navfnc: 'plottyear', navstep: 10}, fatores: {días: ["el domingo", los martes ",", ",", ",", martes ",", ", martes", ",", ", martes", ",", martes ",", ",", martes ",", ",", ", martes", ",", ",", martes ",", ",", ",", martes ",", ",", ",", martes ",", ",", martes ",", ",", ",", ", martes", ",", ",", martes ",", ",", ",", martes ",", ",", martes ". "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", "Junio", "julio", "julio", "julio", "julio", "julio", "julio", "julio", "junio", "junio", "junio", "diciembre"],}, isleapyear: function (año) {return ((año % 4 === 0) && (año % 100! == 0)) || (año % 400 === 0)}, Get Daysinmons {return [31, (dpGlobal.Eseseapyear (año)? 29: 28), 31, 30, 31, 30, 31, 31, 30, 31] [mes]}, ParseFormat: function (format) {var separator = format.match (/que.///-/ s].*?/), piezas = format.split (// w+//); if (((oh parts. === 0) {tirar un error nuevo ("Formato de fecha no válido.");} Return {separator: separator, piezas: piezas};}, parsedate: function (date, format) {var piezas = 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) format.parts.length; val; date.setblyar (2000 + val); break; case 'yyyy': año = val; date.setblyear (val); break;}} fecha = nueva fecha (año, mes, día, 0, 0, 0);} Detalte de retorno;}, formatDate: función (fecha, format) {var val = {d: date.getDate (), m: m: getmonth () + 1, yy, yy) date.getblyear (). ToString (). Substring (2), aaa yyy: date.getblyear ()}; val.dd = (val.d <10? '0': '') + val.d; val.mm = (val.m <10? '0' ':' '') + val.m; var fecha = []; para (var i = 0, cnt.l longitud. {date.push (val [format.parts [i]]);} return date.Join (format.separator);}, HeadTemplate: '<thead>'+'<tr>'+'<th> ‹</th>'+'<th>'+'<th>› </th>'+'</tr>'+'</tman>', conttAmplate: '<tbody> <tr> <td colspan = "7"> </td> </tr> </tbody>'}; dpglobal.template = '<div>'+'<div>'+'<table>'+dpglobal.headtemplate+'<tbody> </tbody>'+'</table>'+'</div>'+'<div>'+'<div>'+'<table>+dpglobal .headtemplate+dpglobal.conttemplate+'</bable>'+'</div>'+'<div>'+'<table>'+dpglobal.headtemplate+'</table>'+'</div>'+';} ( Window.jquery);El anterior es el archivo JS en el control DatePicker en Bootstrap introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!