Bootstrap-Datepicker ist ein sehr ausgezeichnetes Plug-in für die Zeitauswahl, und die Standardeinstellung besteht darin, Daten in Englisch anzuzeigen. In diesem Artikel wird Ihnen die JS -Datei mit Bootstrap DatePicker mit Chinesisch vorgestellt.
// Verwenden Sie JSIF ($ (". DatePicker"). Länge> 0) {$ (". DatePicker"). DatePicker ({Sprache: "Zh-Cn", AutoClosse: Richtig, // autoclose: true, // automatisch das Datum Auswahlkästchen After Selektion ClearBtn: true, // cleardddddddddn. Format});}Das Folgende ist die CSS -Datei und den JS -Code des DatePickers
/*!* DatePicker für Bootstrap ** Copyright 2012 Stefan Petre* lizenziert unter der Apache-Lizenz v2.0* http://www.apache.org/licenses/license-2.0**/.datepicker {top: 0; links: 0; padding: 4px; margin-top: 1px; 4px; -Moz-Border-Radius: 4px; Border-Radius: 4px;/*. Dow {Border-Top: 1px solid #ddd! #ccc; Border-Bottom-Farbe: RGBA (0, 0, 0, 0,2); Position: absolut; ober: -7px; links: 6px;}. DatePicker: Nach {Inhalt: ''; Anzeige: Inline-Block; Border-Links: 6PX-Transparent; Border-Right: 6px Solid; -6px; links: 7px;}. DatePicker> div {display: keine;}. DatePicker-Tabelle {Breite: 100%; Rand: 0;}. DatePicker td, .datepicker th {text-Align: center; width: 20px; 4px; Border-Radius: 4px;}. DatePicker td.day:Hover {Hintergrund: #eeeeee; 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); 0.25);}. DatePicker Td.Active: Hover, .datepicker Td.Active: Hover: Hover, .datepicker Td.Active: Focus, .datepicker td.active: Hover: Focus,. td.active: hover.active, .datepicker td.active.disabled, .datepicker td.active: hover.disabled, .datepicker td.active [deaktiviert], DatePicker td.active: Hover [deaktiviert] {color: #ffffffffffffry; # #0044cc; td.active: aktiv, .datepicker td.active: schwebe: aktiv,. 2px; Cursor: Zeiger; -Webkit-Border-Radius: 4px; -Moz-Border-Radius: 4px; Border-Radius: 4px;}. DatePicker TD Span: Hover {Hintergrund: #eeeeeeeee; -moz-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: -Webkit-Gradient (linear, 0, 0 100%, von ( #0088cc), bis ( #0044cc); -O-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: Linear-Gradient (bis unten, #0088cc, #0044cc); Hintergrundrepeat: Repeat-X; Filter: Progid: Dimagetransform.Microsoft.gradient (startcolorStr = ' #ff008ccc',, 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, 0,25); Sie sind also mehr hervor, da sie keine Grenzen haben */filter: progid: timaTransform.microsoft.gradient (enabled = false); Farbe: #ffff; text -shadow: 0 -1px 0 rgba (0, 0, 0, 0,25);}. DatePicker td Span. span.active: aktiv,. #003399 /9; Zeiger;}. DatePicker Thead Tr: Erst-Kind th: hover {Hintergrund: #eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee =========================================================ieben =========================================================ieben =========================================================ieben =========================================================ieben Copyright 2012 Stefan Petre ** lizenziert unter der Apache-Lizenz, Version 2.0 (die "Lizenz");* Sie dürfen diese Datei nur in Übereinstimmung mit der Lizenz verwenden. Garantien oder Bedingungen jeglicher Art, entweder ausdrücklich oder impliziert.* Siehe die Lizenz für die spezifischen Sprachgovernance -Berechtigungen und* Einschränkungen im Rahmen der Lizenz.* =================================================================ieben ============================================================ieben =================================================================ieben ============================================================ieben Optionen) {this.element = $ (element); this.format = dpglobal.Parseformat (options this) //, // MouseDown: $ .proxy (this.mouseDown, this)}); this.issinput = this.element.is ('Eingabe'); this.crent = this.element.is ('. Datum')? this.element.find ('. add-on'): false; if (this.is.Input) {this.element.on ({Focus: $ .proxy (this.show, this), // Blur: $ .proxy (this.hide, this), keyUp: $ .proxy (this.update, this)}) {{if {if {wenn (this.comPonent) {this.comPonent.on ('click', $ .proxy (this.show, this));} else {this.element.on ('click', $ .proxy (this.show, this); {this.element.on ('klick', $. Optionen.MinViewMode || this.element.data ('Date-minViewMode') || 0; if (typeof this.minViewMode === 'String') {Switch (this.MinViewMode) {case 'Monate': this.MinViewMode = 1; break; 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 6: this.weekStart - 1; this.onrender = options.onrender; this.component.outerHeight (): this.element.outerHeight (); this.Place (); Funktion (ev) {if ($ (ev.target) .cLosest ('. DatePicker'). Länge == 0) {that.hide ();}}); this.place); this.viewMode = this.StartViewMode; this.showMode (); if (! this.issinput) {$ (document) .off ('MouseDown', this.hide);} // this.set (); Dpglobal.formatdate (this.date, this.format); if (! This.issinput) {if (this.comPonent) {this.element.find ('input'). Prop ('value', formated);} this.element.data ('Date', formated); formatiert);}}, setValue: function (newDate) {if (typeof newDate === 'String') {this.date = dpGlobal.ParseDate (newDate, this.format);} else {this.date = new Date (newDate);} this.set (); this.date.getMonth (), 1, 0, 0, 0, 0, 0); this.fill ();}, platz: function () {var offset = this.comPonent? this.comPonent.Offset (): this.element.offset (); this.picker.css ({top: offset.top + this.height, links: offset.left});}, update: function (newdate) {this.date = dpGlobal.Parsedate (typeof Newdate === 'String'? this.element.prop ('value'): this.element.data ('Datum'), this.format); '<tr>'; thead '). append (html);}, fillmonths: function () {var html =' '; var i = 0, während (i <12) {html+=' <span> '+dpglobal.dates.monthsshort [i ++]+' </span> '; td '). append (html);}, fill: function () {var d = neues Datum (this.viewDate), Year = d.GetingFoyear (), monat = d.getMonth (), currentDate = this.date.ValueOf (); this.picker.find ('. DatePicker-Tage th: EQ (1)'). Text (dpglobal.dates.months [Monat]+''+Jahr); var prevonth = neues Datum (Jahr, Monat 1, 28,0,0,0,0), Day = dpglobal.getdaysinmonth (prevonthing (prevonthyar), (prevonthing). prevmonth.getMonth ()); prevonth.setDate (Tag); prevonth.setDate (Tag - (prevonth.getday () - this.weekstart + 7)%7); var nextMonth = neues Datum (prevMonth); nextMonth.setdat (nextmonth.getDate () + 42); nextmonth = nextmonth = [[); clsname, prevy, prevm; while (prevmonth.valueof () <nextmonth) {if (prevmonth.getday () === this.weekStart) {html.push ('<tr>');} Clsname = this.onrender (prevonmonmmonth. && prevy === Jahr) || PREVY <Jahr) {Clsname += 'Old';} else if ((prevm> monat && prevy active ';} html.push (' <td> '+prevmonth.getDate ()+' </td> '); if (prevonth.getday () === this.weePend) {html.push (' </tr> '); tbody '). leer (). append (html.join (' '); var currentyear = that.date.getingfullyear (); var monates = this.picker.find ('. DatePicker-Monate '). Find (' Th: Glase (1) '). {monats.eq (this.date.getMonth ()). AddClass ('Active');} html = ''; 9)). End (). Find ('td'); $ (e.target) .closest ('span, td, th'); if (target.length === 1) {Switch (Ziel [0] .Nodename.tolowerCase ()) {case 'th': switch (target [0] .Classname) {case 'switch': this.showmode (1); break; '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 * (Ziel [0] .className === 'prev'? -1: 1); target.parent (). find ('span'). index (Ziel); this.viewdate.setmonth (monat);} else {var Jahr = parseInt (target.Text (), 10) || 0; this.viewdate.setfouly (Jahr);} if (this.Tocment.Tocry.dat.dat. 'geändert', Datum: this.date, viewMode: dpglobal.modes [this.viewMode] .clsname});} this.showMode (-1); this.fill (); this.set (); break; case 'td': if (target.is ('. 10) || 1; var monat = this.viewdate.getMonth (); if (target.is ('. Old')) {monat -= 1;} else if (target this.date = neues Datum (Jahr, Monat, Tag, 0,0,0,0); this.viewdate = neues Datum (Jahr, Monat, math.min (28, Tag), 0,0,0,0); this.Fill (); this.set (); this.element.trigger ({type: 'geändert', Datum: this.date, viewMode: dpglobal.modes [this.viewMode] .clsname});} break;}}}, MouseDown: Funktion (e) {e.StopPropagation (); {this.viewMode = math.max (this.MinViewMode, math.min (2, this.viewMode + dir));} this.picker.find ('> div'). hide (). filter ('. DatePicker-' + dpgobal.modes [this.viewMode]. = function (option, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ('DatePicker'), options = typeof option === 'Objekt' && option; if (! data) {$ that that.data ('DatePicker', (Data = New DatePicker (this $) ($. $. {Modi: [{Clsname: 'Days', navfnc: 'Monat', navstep: 1}, {clsname: 'Monate', navfnc: 'Vollständig', navstep: 1}, {clsname: 'jahrelang', navfnc: 'vollst "Friday", "Samstag", "Sunday"], Daysshort: ["Sunday", "One", "Two", "Three", "Four", "Five", "Six", "Seven"], Daysmin: ["Day", "One", "Two", "Three", "Four", "Five", "Six", "Six", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "ach "öde ich "June", "Juli", "Juli", "Juli", "Juli", "Juli", "Juli", "Juli", "June", "June", "June", "Dezember"],}, Isleapyear: Funktion (Jahr) {Return ((Jahr % 4 === 0) && (Jahr % 100! {return [31, (dpglobal.isleaPyear (Jahr)? 29: 28), 31, 30, 31, 30, 31, 31, 30, 31] [Monat]}, Parseformat: Funktion (Format) {var separator = format.match.match (/…////s]. === 0) {Neuen Fehler werfen ("Ungültiges Datumsformat.");} Return {Separator: Separator, Teile: Teile};}, ParseDate: Funktion (Datum, Format) {var parts = date.Split (Format.separator), Datum = neu Date (), Val; Datum.Sethours (0); Datum.SetMinutes (0); Datum.SetSeconds (0); Datum.SetMilliseconds (0); if (Teils.Length === -Format.Parts.Length) {var Jahr = Datum. Format.Parts.length; val; Datum.setingvoll (2000 + val); break; Fall 'yyyy': Jahr = val; Datum. Datum.Getinging (). toString (). Substring (2), yyyy: Datum. {date.push(val[format.parts[i]]);}return date.join(format.separator);},headTemplate: '<thead>'+'<tr>'+'<th>‹</th>'+'<th>'+'<th>›</th>'+'</tr>'+'</tman>',contTemplate: '<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+'</table>'+'</div>'+'<div>'+'<table>'+dpGlobal.headtemplate+'</table>'+'</div>'+';} ( Fenster.JQuery);Das obige ist die JS -Datei in der DatePicker -Steuerung in Bootstrap, die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!