Bootstrap-Datepicker est un très excellent plug-in de sélection de temps, et la valeur par défaut est d'afficher les dates en anglais. Cet article vous présente le fichier JS avec Bootstrap Datepicker avec le chinois.
// Utilisez JSIF ($ (". DatePicker"). Longueur> 0) {$ (". DatePicker"). DatePicker ({Language: "ZH-CN", AutoClose: True, // AutoClose: true, // Masquer automatiquement la boîte de sélection de la date après la sélection Clearbtn: TRUE, // Clear Button Todaybtn: True, // aujourd'hui Button Format: "Yyyy-mm-mm" format});}Ce qui suit est le fichier CSS et le code JS du Datepicker
/ *! * DatePicker pour bootstrap ** Copyright 2012 Stefan Petre * sous licence APache V2.0 * http://www.apache.org/licenses/license-2.0**/.datepick 4px; border-radius: 4px; / *. Dow {border-top: 1px solide #ddd! Importante;} * /}. DatePicker: avant {contenu: ''; affichage: en ligne de bloc; border-left: 7px solide #ccc; border-right: 7px transparent: rga (0, 0, 7px solide #ccc; 0.2); position: absolu; en haut: -7px; gauche: 6px;}. DatePicker: après {contenu: ''; affichage: bloc en ligne; bordure-bordel: 6px Solid transparent; Border-Right: 6px Solid Transparent Aucun;}. TABLEAU DE DATEPICKER {Largeur: 100%; marge: 0;}. DatePicker TD, .DatePicker Th {Text-Align: Center; Width: 20px; Height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; Border-Radius: 4px;}. #eeeeee; curseur: pointeur;}. DatePicker td.day.disabled {couleur: #eeeeeeeee;}. DatePicker td.old, .DatePicker td.new {Color: # 999999;}. DatePicker td.active, .DatePicker td.active: hover {Color: #ffffff; -Moz-linear-gradient (haut, # 0088cc, # 0044cc); arrière-image: -webkit-gradient (linéaire, 0 0, 0 100%, de (# 0088cc), à (# 0044cc)); arrière-plan: -webkit-linear-gratte -o-linear-gradient (top, # 0088cc, # 0044cc); background-image: linéaire-gradient (en bas, # 0088cc, # 0044cc); background-repeat: repeat-x; filter: Progid: dxiagetransform.microsoft.gradient (startColorsstr = '# 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,25); * Background-Color: # 0044c; Par défaut, ils se démarquent plus étant donné qu'ils n'auront pas de bordures * / filtre: PROGID: dxiageTransform.microsoft.gradient (activé = false); couleur: #fff; text-shadow: 0 -1px 0 rgba (0, 0, 0, 0.25);}. Datepick 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, .datepick 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,. {Background-Color: # 003399 /9; }.DatePicker TD Span {affichage: bloc; largeur: 47px; hauteur: 54px; line-height: 54px; float: gauche; marge: 2px; curseur: pointeur; -webkit-border-radius: 4Px; -Moz-border-radius: 4Px; border-radius: 4Px; -Moz-Border-Radius: 4Px; border-radius: 4Px; -Moz-Border-Radius: 4Px; border-radius: 4Px;. td span: hover {background: #eeeeeeee;}. datepicker td span.active {colore: #ffffff; background-color: # 006dcc; background-image: -moz-linear-gradient (top, # 0088cc, # 0044cc); background-image: -webkit-gradient (linear, 0 0, 0 100%, frot à (# 0044cc)); arrière-image: -webkit-linear-gradient (haut, # 0088cc, # 0044cc); background-image: -o-linear-gradient (top, # 0088c PROGID: dxiagetransform.microsoft.gradient (startColorstr = '# ff0088cc', EndColorstr = '# ff0044cc', GradientType = 0); bordure-bordure: # 0044cc # 0044cc # 002A80; Border-Color: Rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25); * Background-Color: # 0044cc; / * Darken Buttons IE7 Par défaut, afin qu'ils ne se démarquent plus étant donné qu'ils n'auront pas de frontières * / filter: PROGID: DxiageTransform.Microsoft.gradient (activé = false); Color: #ffff; 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] {colore: #ffffff; background-color: # # 0044cc; # 003BB3;}. DatePicker td span.active: actif, .DatePicker td span.active.active {background-color: # 003399 /9; }.datepicker td span.old {Color: # 999999;}. {Font-Size: 21px;}. Datepicker thead tr: premier-enfant th {curseur: pointeur;}. datepicker thead tr: premier-enfant th: hover {background: #eeeeeeee;}. entrée-apprend.date .addd-on i. 16px;} / * =================================================================================================================================. =================================================================================================================================. =================================================================================================================================. =================================================================================================================================. Copyright 2012 Stefan Petre ** Licencié sous la licence Apache, version 2.0 (la "licence"); * Vous ne pouvez pas utiliser ce fichier sauf conforme à la licence. Garanties ou conditions de toute nature, expressives ou implicites. =============================================================================================================================. ==============================================================================================================================. =============================================================================================================================. ==============================================================================================================================. Options) {this.element = $ (élément); this.format = dpglobal.parseformat (options.format || this.element.data ('date-format') || 'yyyy-mm-dd'); this.picker = $ (dpglobal.template) .cluck ('body'). sur ({cliquez: cliquez:. 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)});} autre {si (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.MinviewMode = this.show, this));}} this. options.minViewMode || this.element.data ('date-minViewMode') || 0; if (typeof this.minViewMode === 'String') {switch (this.minviewMode) {case 'mois': this.minviewMode = 1; Break; case 'Years': this.minviewMode = 2; Break; par défaut: this.MinviewMode = 0; Break;}} this.viewMode = options.ViewMode || this.element.data ('date-viswMode') || 0; if (typeof this.viewMode === 'String') {switch (this.viewMode) {case 'mois': this.viewmode = 1; 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.height = this...component? this.component.outerHeight (): this.element.outerHeight (); this.place (); $ (window) .on ('redimensi', $ .proxy (this.place, this)); if (e) {e.stoppropagation (); e.preventdefault ();} if (! this.isinput) {} var that = this; $ (Document). 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 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.format); if (! this.isinput) {if (this.component) {this.element.find ('input'). prop ('value', formated);} this.element.data ('date', formated);} else {this.element.prop ('value', if (formated newddon === 'String') {this.date = dpglobal.parsedate (newDate, this.format);} else {this.date = new Date (newDate);} this.set (); this.viewDate = new Date (this.date.gettigelyar (), this.date.getmonth (), 1, 0, 0, 0, 0, 0); function () {var offset = this.component? this.component.offset (): this.element.offset (); this.picker.css ({top: offset.top + this.height, gauche: offset.left});}, update: function (newdate) {this.date = dpglobal.parsedate? this.element.prop ('value'): this.element.data ('date')), this.format); this.viewDate = new Date (this.date.getlyar (), this.date.getMonth (), 1, 0, 0, 0, 0); this.fill ();}, fillwow: function () {var dowcnt = this.weekstart; '<tr>'; while (dowcnt <this.weekstart + 7) {html + = '<th>' + dpglobal.dates.daysmin [(dowcnt ++)% 7] + '</ th>';} html + = '</ tr>'; this.picker.find ('. datepick thead '). append (html);}, fillmonths: function () {var html =' '; var i = 0 whem TD '). APPEND (html);}, fill: function () {var d = new Date (this.viewDate), année = d.getlyar (), 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 = [] CLSNAME, Prévy, Prevm; While (prevmonth.Valueof () <NextMonth) {if (prevMonth.getDay () === this.weekStart) {html.push ('<tr>');} CLSNAME = this.onrender (prevmonth); prevy = prevmETH.getlyear (); prevm = prevmonth.GetTh.getMoL (ifmulh ();); && prevy === année) || actif ';} html.push (' <td> '+ prevmonth.getDate () +' </td> '); if (prevmonth.getday () === this.weekend) {html.push (' </tr> ');} prevmonth.setdate (prevmEth.getDate () + 1);} this.Picker.Find. tBody '). vide (). append (html.join (' ')); var currentyear = this.date.getlyar (); var mois = this.picker.find ('. datepicker-months '). find (' th: eq (1) '). text (année) .end (). {mois.eq (this.date.getMonth ()). addClass ('active');} html = ''; année = parseInt (année / 10, 10) * 10; var annont = this.picker.find ('. Datepicker-années'). Find ('th: eq (1)'). - = 1; pour (var i = -1; i <11; i ++) {html + = '<span>' + année + '</span>'; Year + = 1;} wencont.html (html);}, click: function (e) {e.stoppropagation (); e.preventDefault (); var Target = $ (e.target) .cosest. th '); if (target.length === 1) {switch (cible [0] .NodeName.tolowerCase ()) {case' th ': switch (cible [0] .classname) {case' switch ': this.showmode (1); cask; case' provis ': 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]. (Target [0] .className === 'Précédent'? -1: 1)); this.fill (); this.set (); break;} Break; case 'Span': if (target.is ". 10) || 0; this.viewDate.setlyear (année);} if (this.viewMode! == 0) {this.date = new Date (this.viewDate); this.element.trigger ({type: 'changée', date: this.date, vue: ViewMode: Dpglobal.modes [this.viewMode] .clsName});} this.showMode (-1); this.fill (); this.set (); casse; case 'td': if (target.is ('. Day') &&! Target.is ('. Disabled')) {var day = parseInt (Target.Text (), 10) || 1; this.viewDate.getMonth (); if (Target.is ('. Old')) {Month - = 1;} else if (target.is ('. new'))) {Month + = 1;} var année = this.viewDate.getlyar (); this.date = nouvelle date (année, mois, jour, 0,0,0,0); this.viewDate = nouvelle date (année, mois, math.min (28, jour), 0,0,0,0); this.fill (); this.set (); this.element.trigger ({type: 'changéé', date: this.date, visuelMode: dpglobal.modes [this.viewMode] .clsName});} bris;}}}, mousDown: function (e) {e.stoppropagation (); e.preventDefault ();}, ShowMode: fonction (dir) {if (if (if (dir) {this.viewMode = math.max (this.minviewMode, math.min (2, this.viewMode + dir));} this.picker.find ('> div'). hide (). filter ('. Datepick {return this.each (function () {var $ this = $ (this), data = $ this.data ('datepicker'), options = typeof option === 'Object' && option; if (! data) {$ this.data ('datepick (typeof option === 'string') data [option] (val);});}; $. fn.datepicker.defaults = {onrender: function (date) {return '';}}; $. fn.datepicker.constructor = datepicker; var dpglobal = {modes: [{clsname: 'days', navg: 'mois', navsp: [{ClSname: 1}, {CLSNAME: 'MOIS', NAVFNC: 'ENTIÈRE', NAVSTEP: 1}, {CLSNAME: 'Years', Navfnc: 'Forear', Navstep: 10}], Dates: {Days: ["Sunday", "Lunday", "Mardi", "Jeudi", "Two," Samedi, "Sunday", "], Dayshort: [Sunday", "Two," Samed "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", "Juillet", "juin", "juin", "juin", "décembre"],}, Isleapyear: fonction (année) {return (((an% 4 === 0) && (année% 100! == 0)) || (année% 400 === 0))}, GetdaySinmonth: fonction (année) {retour [31, (31, 31, (31, 31, (Dpglobal.IlSapyear)? 30, 31, 30, 31, 31, 30, 31] [mois]}, parseformat: function (format) {var séparateur = format.match (/*.///-/ s]. *? /), Parties = format.split (// w + /); if (! Séparateur ||! Parts || partie. {séparateur: séparateur, parties: parties};}, parsedate: fonction (date, format) {var parties = date.split (format.separator), date = new Date (), val; date.sethours (0); date.setMinutes (0); date.setseconds (0); date.setmillesecds (0); if (partieS.Legth == format.parts.length) {var année = date.getlyear (), day = date.getDate (), mois = date.getMonth (); for (var i = 0, cnt = format.parts.length; i <cnt; i ++) {val = paSeint (parties [i], 10) || 1; switch (format.Parts [i]) {cas val; date.setDate (val); break; case 'mm': case 'm': mois = val - 1; date.setMonth (val - 1); break; case 'yy': an ': 2000 + val; date.settilyar (2000 + val); cass; Date;}, formatdate: fonction (date, format) {var val = {d: date.getDate (), m: date.getMonth () + 1, yy: date.getlyear (). toString (). substring (2), yyyy: date.getlyar ()}; val.dd = (val.d <10? <10? '<Thead>' + '<Tr>' + '<th> ‹<< / th>' + '<th>' + '<th> ours '<div>' + '<div>' + '<Specd>' + dpglobal.headtemplate + '<Tbody> </ tbody>' + '</s table>' + '</v>' + '<div>' + '<div>' + '<s table>' + dpglobal .HeaHTemplate + dpglobal.contemplate + '</s table>' + '</ div>' + '<div>' + '<s table>' + dpglobal.headtemplate + '</ table>' + '</ div>' + ';} (( window.jquery);Ce qui précède est le fichier JS dans le contrôle DatePicker dans Bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!