Bootstrap DatePicker control with Chinese JS file _javascript skills

Bootstrap-datepicker is a very good time to select Plug-ins, the default is the English display date. This article introduces Bootstrap DatePicker with Chinese JS files.

Jsif ($ (". DatePicker") with previous references to bootstrap. Length > 0) {
$ (". DatePicker"). DatePicker ({
language: "ZH-CN",
autoclose:true,//automatically hide the date selection box after selected
clearbtn:true,//Clear button
todaybtn:true,//today button
format: "YYYY-MM-DD"/ /date format
});

The following are DatePicker CSS files and JS code

/*! * DatePicker for Bootstrap * * Copyright Stefan Petre * Licensed under the Apache License v2.0 * http://www.apache.or g/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 Tran
Sparent;
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 {t
Ext-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;}. Date 
Picker 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;
Ground-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.M
Icrosoft.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.a Ctive.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 SP an.old {color: #999999; DatePicker th.switch {width:145px; DatePicker th.next,. DatePicker Th.prev {font-size:2
1px; }. 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
; }/* ========================================================= * bootstrap-datepicker.js * http://www.eyecon.ro/ Bootstrap-datepicker * ========================================================= * Copyright Stefan Petre * * Licensed under the Apache LiCense, Version 2.0 (the "License");
* You could not use this file, except in compliance with the License.  * Obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * unless required by applicable Writing, software * Distributed under the License is distributed on ' as is ' basis, * without Warra
Nties or CONDITIONS of any KIND, either express OR implied.
* The License for the specific language governing permissions and * limitations under the License. * ========================================================= */!function ($) {//Picker object var 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 (t
His.update, this)}); else {if (this.component) {this.component.on (' click ', $.proxy (This.show, this));} else {This.element.on (' click ', $.PR
Oxy (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;
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 ': t
His.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? t
His.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&
gt; ';
html = = ' </tr> ';
This.picker.find ('. Datepicker-days thead '). Append (HTML); Fillmonths:function () {var html = '; var i = 0 while (i <) {html = ' <span class= ' month ' > ' +dpglobal.date
s.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.da
Te.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> ');} Clsna
me = This.onrender (prevmonth);
Prevy = Prevmonth.getfullyear ();
PREVM = Prevmonth.getmonth (); if ((PREVM < month && Prevy = year) | | Prevy < year) {clsname = ' old ';} else if (Prevm > Month &am p;& 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). "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)]. Find (' TD ');
Year-= 1; for (var i =-1; i < 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 (tar Get.length = = 1 {switch (Target[0].nodename.tolowercase ()) {case ' th ': switch (target[0].classname) {case ' switch ': thi
S.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.da
Te, 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 (), 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.M
Ax (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 (' Datepi
Cker '), options = typeof option = = ' object ' && option; if (!data) {$this. Data (' DatePicker ', (data = new DatePicker (this, $.extend ({}, $.fn.datepicker.defaults,options)));
F (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 ', Navst Ep:1}, {clsname: ' Years ', NAVFNC: ' Fullyear ', navstep:10}], dates:{days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday "," Saturday "," Sunday "], Daysshort: [" Day "," one "," two "," three "," four "," five "," six "," seven "], daysmin: [" Day "," one "," two "," three "," four "," five "," six "," seven "], Months: ["January", "February", "March", April "," May "," June "," July "," August "," September "," October "," November "," December "], Monthsshort: [" January "," February "," March "," April ", "May", "June", "July", "August", "September", "October", "November", "December"],}, isleapyear:function (year% 4 = 0) && ( Year% 100!== 0)) | |
(Year% 400 = 0))  }, Getdaysinmonth:function (year, month) {return [to Dpglobal.isleapyear (year) 29:28), 31, 30, 31, 30, 31, 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, CN t = 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 = + val;
Date.setfullyear (+ 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 (). tostr
ing (). 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.sep
Arator); }, 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);

The above is a small set to introduce the bootstrap in the DatePicker control with Chinese JS file, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!