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のウェブサイトへのご支援ありがとうございます!