Bootstrap-DatePickerは非常に優れたTime Selectionプラグインであり、デフォルトは英語で日付を表示することです。この記事では、Bootstrap DatePickerを使用したJSファイルを中国語と紹介します。
// jsif（$（ "。datepicker"）。length> 0）{$（ "。DatePicker"）。DatePicker（{Language： "zh-cn"、autoclose：true、// autoclose：true、// clearbtn：true、// clear button：true button：true button：true button：true button：trace button：trace button：trace button：trace button：trace button：trace button：trace button：todayフォーマット}）;}以下は、DatePickerのCSSファイルとJSコードです
/*！* bootstrapのdatepicker ** Copyright 2012 Stefan Petre* apacheライセンスv2.0* http://www.apaches.org/licenses/license-2.0**/.datepicker {top：0; left：0; padding：4px; -webkit-bord：4px; 4px; -moz-border-radius：4px; border-radius：4px;/*。dow{border-top：1px solid #ddd！fality;}*/}。datepicker：before {content： ''; display：inline-block; border-left：7px solid rulight：border-right; #ccc; border-bottom-color：rgba（0、0、0、0.2）; position：aspolute; top：-7px; left：6px;}。datepicker：after {content： ''; display：inline-block; border-left：6px solid透過;境界線右：6pxソリッド＃fffff：6pxtom：6pxtom：6px -6px;左：7px;}。datepicker> div {display：none;}。datepicker table {width：100％; margin：0;}。datepicker td、.datepicker th {center; width：20px; height：height：20px; -wabkit-bordius：4px; -moz-bodis：4px; -moz-bodis 4px;}。datepicker td.day：hover {background：＃eeeee; cursor：pointer;}。datepicker td.day.disabled {color：eeeeee;}。datepicker td.old、.datepicker td.new {color：＃99999;}。 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）; -webkit-linear-gradient（top、＃0088cc、＃0044cc）; background-image：-o-linear-gradient（top、＃0088cc、＃0044cc）; background-image：linear-gradient（botton、＃0088cc、＃0044cc）; bouckinded-repeat：rept-x;フィルター： 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）;*背景色：＃0044CC;/*デフォルトでIE7ボタンを暗くするので、境界線がありません。 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 Td.active.active、.datePicker TD.Active：Hover.active、.datePicker TD.Active.Disabled、.DatePicker TD.Active：Hover.Disabled、.DatePicker TD.Active [Disabled] ,.. ＃0044cc;*background-color：＃003bb3;}。datepicker td.active：active、.datepicker td.active：hover：active、.datepicker td.active、.datepicker td.active：hover.active {backgroughtolor：＃003399 /9;ブロック;幅：47px;高さ：54px;ラインハイト：54px;フロート：左;マージン：2px;カーソル：ポインター; -webkit-border-radius：4px; -moz-border-radius：4px; border-radius：4px;}。 {color：#ffffff; background-color：＃006dcc; background-image：-moz-linear-gradient（top、＃0088cc、＃0044cc）; background-image：-webkit-gradient（linear、0 0、100％、from（＃0088cc）、（＃0044CC）; ＃0088cc、＃0044cc）; background-image：-o-linear-gradient（top、＃0088cc、＃0044cc）; background-image：linear-radient（botton、＃0088cc、＃0044cc、＃0044cc）;バックグラウンドリピート：Repeat-X;フィルター： 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）;*背景色：＃0044cc;/*デフォルトでIE7ボタンを暗くするので、境界を持っていないので、より際立っています*/フィルター：dixmagetransform.microsoft.gradient（enabled = false）; color：#ffff; text-shadow：0 -1px 0-shadow：0 -1px 0-shadow： 0.25）;}。datePicker td span.active：hover、.datepicker td span.active：focus、.datepicker td span.active：active、.datepicker td span.active、.datepicker td span.active.disabled、.datepicker td picker td picker td picker td span.act-cold.actic ＃0044cc;*background-color：＃003bb3;}。datepicker td span.active：active、.datepicker td span.active.active {background-color：＃003399 /9;} .datepicker td span.old {coler：＃99999;}。 145px;}。datepicker th.next、.datepicker th.prev {font-size：21px;}。datepicker thead tr：first-child th {cursor：pointer;}。 。 ========================================================================================================== ========================================================================================================== ========================================================================================================== ==========================================================================================================著作権2012 Stefan Petre ** Apacheライセンスバージョン2.0（「ライセンス」）に基づいてライセンスされています。*ライセンスに準拠している場合を除き、このファイルを使用できません。基礎、*明示的または黙示的ないずれかの種類の保証または条件なし。 ============================================================================================================================================== ====================================================================================================================================== ============================================================================================================================================== ====================================================================================================================================== options）{this.element = $（element）; this.format = dpglobal.parseformat（options.format || this.element.data（ 'date-format'）|| 'yyyy-mm-dd'）; this.picker = $（dpglobal.template）.appendto（ 'body'）。 this）//、// mousedown：$ .proxy（this.mousedown、this）}）; this.isinput = this.element.is（ 'input'）; this.component = this.element.is（ '。日付'）？ this.element.find（ '。アドオン'）：false; if（this.isinput）{this.element.on（{focus：$ .proxy（this.show、this）、// blur：$ .proxy（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））;} options.minviewmode || this.element.data（ 'date-minviewmode'）|| 0; if（typeof this.minviewmode === 'string'）{switch（this.minviewmode）{case 'moths'：this.minviewmode = 1; break 'years' = 2; minviewmode = 2; minviewmode = 2; 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 = 1; viewmode = 2; viewmode = 2; 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; thil.filldow（）; thil.fillmonths（）; this.update（）; this.showmode（）; datePicker.prototype = {constructor：datepicker、show：function（e）{this.show（）; thiChow（）; this.component.outerheight（）：this.element.outerheight（）; this.place（）; $（window）。 this; $（document）.on（ 'mousedown'、function（ev）{if（$（ev.target）.closest（'。datepicker '）。length == 0）{that.hide（）;}}）; this.element.trigger（{type：' show '、date：this.date}）; function（）{this.picker.hide（）; $（window）.off（ 'resize'、this.place）; this.viewmode = this.startviewmode; this.showmode（）; if（！this.isput）{$（document）.off（ 'mousedown'、this.hide）; this.date}）;}、set：function（）{var formatted = dpglobal.formatdate（this.date、this.format）; if（！this.isinput）{if（this.component）{this.element.find.find（ 'input'）。 {this.element.prop（ 'value'、formatted）;}}、setValue：function（newdate）{if（typeof newdate === 'string'）{this.date = dpglobal.parsedate（newdate、this.format）;} els {this.date = 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 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = == this.element.prop（ 'value'）：this.element.data（ 'date'））、this.viewdate = new date（this.date.get.getmonth（）、1、0、0、0、0）; thil.fill（）; '<tr>'; while（dowcnt <this.weekstart+7）{html+= '<th>'+dpglobal.dates.daysmin [（dowcnt ++）％7]+'</th>';} html+= '</tr>'; this.picker.find（ '。 thead '）。append（html）;}、fillmonths：function（）{var html =' '; var i = 0 while（i <12）{html+=' <span> '+dpglobal.dates.monthsshort [i ++]+' </span> ';}この.picker.find（'。 td '）。append（html）;}、fill：function（）{var d = new.viewdate）、year = d.getfulterear（）、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、mont-1、28,0,0,0）、day = dpglobal.getdaysinnth prevmonth.getmonth（））; prevmonth.setdate（day）; prevmonth.setdate（day-（prevmonth.getday（） - this.weekstart + 7）％7）; var nextmonth = new month（prevmonth）; nextmonth.setdate（nextmonth.getdate（） + 42）; nextmonth = nextmonth.value var clsname、prevy、prevm; while（prevmonth.valueof（）<nextmonth）{if（prevmonth.getday（）=== this.weekstart）{html.push（ '<tr>'）;} clsname = this.onrender（prevymonth）; prevy = prev（）; prev（）; prev（） && prevy === year）||。 Active ';} html.push（' <td> '+prevmonth.getDate（）+' </td> '）; if（prevmonth.getday（）=== this.weekend）{html.push（' </tr> '）;} prevmonth.setdate（prevmonth.getdate（） tbody '）。 {months.eq（this.date.getmonth（））。addclass（ 'active'）;} html = ''; year = parseint（year/10、10） * 10; var yearcont = this.picker.find（ '。DatePicker'）。 9））。end（）。find（ 'td'）; year- = 1; $（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）; case 'preved'：case 'prect'： '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（ '。月'））{var month = {var month =ターゲット.Parent（）。find（ 'span'）。index（target）; this.viewdate.setmonth（month）;} else {var year = parseint（target.text（）、10）|| 0; this.viewdate.setfulter（year）;} if（this.viewmode！== 0）{this = date = new date {thive.viewied（thive（this（this（this bewied）; 「変更」、日付：this.date、viewmode：dpglobal.modes [this.viewmode] .clsname}）;} this.showmode（-1）; this.fill（）; this.set（）; break; case 'td'：if（target.is（ '。'。day '）&&！target.is（'。 10）|| 1; var month = this.viewdate.getmonth（）; if（target.is（ '。古い'））{月 - = 1;} else if（target.is（ '。new'））{month += 1;} var = this.viewdate.getSullear（）; this.date = new Date（年、月、日、0,0,0,0）; this.viewdate = new Date（year、month、math.min（28、day）、0,0,0,0）; this.fill（）; this.set（）; this.element.trigger（{type： 'chanderate'、date：this.date、viewmode：dpglobal.modes [this.viewmode] .clsname}）;} break;}}}、function（e）{e.Stoppropagation（）; {this.viewmode = math.max（this.minviewmode、math.min（2、this.viewmode + dir）;} this.picker.find（ '> div'）。hide（） function（option、val）{return this.each（function（）{var $ this = $（this）、data = $ this.data（ 'datepicker'）、options = option === 'object'＆option; if（！data）{$ this.data（ 'datepicker'、（data = new datePicker（this $。 $ .fn.datepicker.defaults、options、options））））;} if（typeof option === 'string'）data [option]（val）;}）;}; $。fn.datepicker.defaults= {onrender：function（date）{return '';}}; $。 {modes：[{clsname： 'days'、navfnc： 'month'、navstep：1}、{clsname： 'months'、navfnc： 'fullyear'、navstep：1}、{clsname： 'years'、navfnc： 'fullyear'、navstep：10}]、dates： "" "" "" "" "" "" "monday" 「金曜日」、「土曜日」、「日曜日」]、daysshort：[「日曜日」、「1つ」、「1つ」、「2」、「3」、「4」、「5」、「6」、7」]、daysmin：["day"、 "one"、 "two"、 "3"、 "4"、 "5"、 "6、" "" "" "1月"、 "" "" "1月、 「6月」、「7月」、「7月」、「7月」、「7月」、「7月」、「7月」、「7月」、「7月」、「6月」、「6月」、「6月」、「12月」]、}、ISLEAPYEAR：function（year）{ {return [31、（dpglobal.isleapyear（year）？29：28）、31、30、30、31、31、30、31] [月]}、parseformat：function（format）{var separator = format.match.match（/whined match（////-/ s]。*？*？ 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.get.word.getDate（）、月=日付= cnt = cent（）; format.parts.length; i <cnt; val; date.set.fulterear（2000 + val）; break; case 'yyyy'：year = val; date.set.fully（val）;}} new date（year、day、day、0、0、0）;}、formatdate：function（date、falmat）{var val = {d：datedate（）、mint（）、mint（）、m： date.get.fullyear（）。toString（）。substring（2）、yyyy：date.get.fullyear（）}; val.dd =（val.d <10？ '0'： ''） + val.mm =（val.m <10？ '0'： ''） + val.m; var date = []; {date.push（val [format.parts [i]]）;} return date.join（format.separator）;}、headtemplate： '<thead>' <tr> '+'+'<th> ‹</th>'+'<th>'+'<th>'+'+'+'</tman>'+'</tman>'+'</tman> '<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>'+';}（}（}（}）） window.jquery）;上記は、編集者が紹介したBootstrapのDatePickerコントロールのJSファイルです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！