Bootstrap-DatePicker는 매우 우수한 시간 선택 플러그인이며 기본값은 영어로 날짜를 표시하는 것입니다. 이 기사에서는 Bootstrap DatePicker가있는 JS 파일을 중국어로 소개합니다.
// jsif ($ ( ". datepicker"). length> 0) {$ ( ". datePicker"). datePicker ({언어 : "Zh-CN", AutoClose : True, // autoclose : // 선택 후 날짜 선택 상자를 자동으로 숨기고 true, // today button format : "yyyyy-dd"// date, // 오늘 버튼 형식 "yyyy-dd"// date " 형식});}다음은 DatePicker의 CSS 파일 및 JS 코드입니다.
/*!* 부트 스트랩에 대한 DatePicker ** Copyright 2012 Stefan Petre* Apache 라이센스 v2.0* http://www.apache.org/licenses/license-2.0**/.datepicker {상단 : 0; 왼쪽; 패딩 : 4px; Margin-Top : 1px;-Wewordor-Bradius : wwww.apache.org/licenses/license-2.0*0/.datepicker {wwww.apache.org/license-2.0*0/.datepicker : 4px; -moz-border-radius : 4px; border-radius : 4px;/*. dow {국경-탑 : 1px solid #ddd! imter;}*/}. datepicker : {content : ''; display : inline-block; Border-Left : 7px 솔리드-권한 : 7px 고체 투명 : 7px 고체 투명; #CCC; 국경-바닥 색상 : RGBA (0, 0, 0, 0.2); 위치 : 위치 : 절대; 상단; 상단 : -7px; 왼쪽 : 6px;}. DatePicker : {content : ''; display : inline-block; border-left : 6px solid transparent; Border-Right : 6px solid-bottom; 7px;}. datePicker> div {display : none;}. datePicker 테이블 {너비 : 100%; 마진 : 0;}. DatePicker td, .datePicker Th {텍스트-알리 린 : 중심; width : 20px; td.day : {background : #eeeeee; cursor : pointer;}. datepicker td.day.disabled {color : #eeeeeeee;}. datepicker td.old, .datepicker td.new {color : #999999;}. datepicker td.active, .datepicker td.active : hover {#fffff : #fffff : #006DCC; 배경 이미지 :-Moz-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, ( #0088cc), ( #0044cc); 배경-값 : -webkit-linear-008c, #008cc. #0044CC); 배경 이미지 : -o-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : 선형 등급 (하단, #0088cc, #0044cc); 배경 반복 : 반복 -X; 필터 : 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = ' #ff0088cc', endcolorstr = ' #ff0044cc', gradientType = 0); Border-Color : #0044cc #0044cc #002A80; Border-Color : RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0). 0.1) rgba (0, 0, 0, 0.25);*배경색 : #0044cc;/*기본적으로 IE7 버튼을 어둡게하므로 테두리*/필터 : progid : progid : gradient (enabled = false); #fff; #fff; #fff; 0.25); datePicker TD.Active : 호버, .datePicker td.Active : 호버 : 호버, .datePicker td.Active : Focus, .DatePicker TD.Active : Hover : .DatePicker TD.Active : Active, .datePicker TD.Active : Hover : .DatePicker TD. Active td.active : hover.active, .datepicker td.active.disabled, .datepicker td.active : hover.disabled, .datepicker td.active [disabled],. datepicker td.active : 호버 [컬러 : #fffff; 배경 색 : #0044cc;*color : #003bb3; td.active : active, .datepicker td.active : hover : active, .datepicker td.active.active, .datepicker td.active : hover.Active {back 2px; 커서 : 포인터; -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px;}. datepicker td span : hover {배경 : #eeeeeee;}. datepicker td span.active {컬러 : #ffff; 006dcc; -Moz-linear-gradient (Top, #0088cc, #0044cc); 배경 이미지 : -webkit-gradient (선형, 0 0, 0 100%, ( #0088cc), ( #0044cc)까지 ( #0044cc); 백그라운드-이미지 : -webkit-linear-gradient (top, #0044cc); -o-linear-gradient (상단, #0088cc, #0044cc); 배경 이미지 : 선형-이미지 : 선형-그라디언트 (하단, #0088cc, #0044cc); 배경 반복 : 반복 X; 필터 : progid : dximagetransform.microsoft.dagient (startColorstrt = ' #ff00888ccccccccccccccccccccc endcolorstr = ' # #ff0044cc', gradientType = 0); 경계 색상 : #0044CC #0044CC #002A80; Border-Color : RGBA (0, 0, 0, 0, 0.1) RGBA (0, 0, 0, 0.1) RGBA (0, 0, 0, 0, 0.25); 기본적으로 버튼이 있으므로 테두리 */필터 : progid : dximagetransform.microsoft.gradient (enabled = false); color : #ffff; text -shadow : 0 -1px 0 RGBA (0, 0, 0, 0, 0.25); datePicker TD Span.Active, hover, hover, hover, add. span.active : active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active [disabled] {color : #ffffff; back {배경색 : #003399 /9; }.datepicker td span.old {color : #999999;}. DatePicker th.width {width : 145px;}. DatePicker th.next, .datepicker th.prev {font-size : 21px;}. DatePicker Tr : 첫 번째 child {cursor : 포인터;}. datepicker thead tr : 1 차 자녀 Th : 호버 {배경 : #eeeeeee;}. input-append.date .add-on i, .input-prepend.date .add-on i {display; 커서 : 포인터; 너비 : 16px; 높이 : 16px;}/*. =========================================================================================================================================== =========================================================================================================================================== =========================================================================================================================================== =========================================================================================================================================== Copyright 2012 Stefan Petre ** Apache 라이센스, 버전 2.0 ( "라이센스")에 따라 라이센스가 부여됩니다. 명시 적 또는 묵시적 인 모든 종류의 보증 또는 조건.* 특정 언어 거버넌스 권한 및* 라이센스에 따른 제한에 대한 라이센스를 참조하십시오.* ============================================================================================================================================== ============================================================================================================================================== ============================================================================================================================================== ============================================================================================================================================== {this.element = $ (요소); this.format = dpglobal.parseformat (옵션 .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 ( '. date')? this.element.find ( '. add-on') : false; if (this.isinput) {this.element.on ({focus : $ .proxy (this.show, this)), // blur : $ .proxy (this.hide, this), $ .proxy (this.update, this); $ .proxy (this.show, this));} else {this.element.on ( 'click', $ .proxy (this.show, this));} else {this.element.on ( 'click', $ .proxy (this.show, this)); this.minviewMode = 옵션 .minViewMode || this.element.data ( 'date-minViewMode') || 0; if (type this.minViewMode === 'string') {switch (this.minViewMode) {case 'Month': this.MinViewMode = 1; break; case 'Years': this.MinViewMode = 2; default : this. 0; break;}} this.viewMode = Options.ViewMode || this.element.data ( 'date-viewMode') || 0; if (type this.ViewMode === 'string') {switch (this.viewMode) {case 'Month': this.viewMode = 1; Break ': that. that. 0; break;}} this.startViewMode = this.ViewMode; this.weekStart = 옵션 .weekStart || this.element.data ( 'date-WeekStart') || 0; this.weekend = this.weekStart === 0? 6 : this.weekStart -1; this.onrender = 옵션 .Onrender; this.fillDow (); this.fillmonths (); this.update (); this.showMode ();}; datePicker.Prototype = {생성자 : datePicker, show : function (e) {this.picker.show (); this.height = this.height = 이. function (ev) {if ($ (ev.target) .closest ( '. datePicker'). length == 0) {that.hide ();}}); this.element.trigger ({type : 'show', date : this.date});}, hide : function () {this.picker.hide (); = this.StartViewMode; this.showMode (); if (! this.isinput) {$ (문서) .Off ( 'MousedOwn', this.Hide);} // this.set (); this.element.trigger ({type : 'hide', date : this.date}); this.format); if (! this.isinput) {if (this.component) {this.element.find ( 'value'). prop ( 'value', formatted);} this.element.data ( 'date', formatted);} else {this.element.prop ( 'value', formatted) {newdvalate : newdvalate : newdvalate : function (newdvalate). === 'string') {this.date = dpglobal.parsedate (newDate, this.format);} else {this.date = new Date (newDate);} this.set (); this.viewDate = new Date (this.date.getlyear (), this.date.get.thmonth (), 0, 0, 0, 0,); function () {var offset = this.component? 이. this.element.prop ( 'value') : this.element.data ( 'date')), this.format); this.viewdate = new 날짜 (this.date.getlyear (), this.get.getmonth (), 1, 0, 0, 0); this.fill ();}, filldow : var dowcnt = this.weekstart; '<tr>'; while (dowcnt <this.weekstart+7) {html+= '<th>'+dpglobal.dates.daysmin [(dowcnt ++)%7]+'</th>';} html+= '</t>'; this.picker.find ( '. Thead '). Append (html);}, fillmonths : function () {var html =' '; var i = 0while (i <12) {html+='<pan> '+dpglobal.dates.monthsshort [i ++]+'</span> ';} this.picker.find ('. td '). Append (html);}, fill : function () {var d = new 날짜 (this.viewdate), 연도 = d.getlyear (), month = d.getmonth (), currentdate = this.date.valueof (); this.picker.find ( '. datepicker-days-days-days th : eq (1)'). text (dpglobal.dates.months [Month]+''+year); var prevmonth = 새로운 날짜 (연도, 월 -1, 28,0,0,0,0), day = dpglobal.getDaysinmonth (prevmonthearear (), prevmonth.getmonth ()); prevmonth.setdate (day); prevmonth.setdate (day- (prevmonth.getday () - this. this. this. this. this. clsname, prevy, prevm; while (prevmonth.valueof () <nextmonth) {if (prevmonth.getDay () === this.weekstart) {html.push ( '<tr>');} clsname = this.onrender (prevmonth); prevy = prevmonth (prevmonth); && prevy === 년) || prevy <년) {clsname += 'old';} else if ((prevm> month && prevy ===) {clsname += 'new';} if (prevmonth.valueof () == clissdate) {clsname += ' Active ';} html.push ('<td> '+prevmonth.getDate ()+'</td> '); if (prevmonth.getday () === this.weekend) {html.push ('</tr> ');} prevmonth.setdate (prevmonth.pord ()+1); tbody '). empty (). append (html.join (' ')); var currentyear = this.get.getlyear (); var month = this.picker.find ('. datepicker-months '). 찾기 ('th : eq (1) ') {months.eq (this.date.getmonth ()). addClass ( 'active');} html = ''; year = parseint (Year/10, 10) * 10; var yearcont = this.picker.find ( '. datepicker years'). 찾기 ( 'th : eq (1)'). -= 1; for (var i = -1; i <11; i ++) {html+= '<span>'+year+'</span>'; year = 1;} yearcont.html (html);}, click : function (e) {e.stoppropagation (); e.preventDefault (); th '); if (target.length === 1) {switch (target [0] .nodename.tolowercase ()) {case'th ': switch (target [0] .classname) {case'switch ': this.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'? -prev '? -prev'? -prev '? -prev'? -prev '? -11 : 1)); this.fill (); this.set (); 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.setlyear (year);} if (this.viewMode! == 0) {this.Dight (this.viewDate); 'Changeate', date : this.date, viewmode : dpglobal.modes [this.viewmode] .clsname});} this.showmode (-1); this.fill (); this.set (); break; case 'td': if (target.is ( '.' 10) || 1; var month = this.viewdate.getmonth (); if (target.is ( '. old')) {month -= 1;} else if (target.is ( '. new'))) {month += 1; var year = this.getlydelyear (); this.date = 새 날짜 (연도, 월, 일, 0,0,0,0); this.viewdate = 새 날짜 (연도, 월, 수학 (28, 일), 0,0,0,0); this.fill (); this.set (); this.element.trigger ({type : 'changeate', date : this.date, viewmode : dpglobal.modes [this.viewMode] .clsname});} break;}}}, mousedown : function (e) {e.StopPropagation (); e.preventDefault (), function : (dir). {this.viewMode = math.Max (this.minViewMode, math.min (2, this.viewMode + dir));} this.picker.find ( '> div'). hide (). filter ( '. datePicker-' + dpglobal.modes [this.viewMode] .clsname); show (); $. 옵션, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ( 'datepicker'), 옵션 = typeof 옵션 === 'Object'&& 옵션; if (! data) {$ this.data ( 'datePicker', (data = new datePicker (this, $ .Extend ({}, $ .fn.datepicker.defaults, 옵션)));} if (typeof 옵션 === 'string') data [옵션] (val);});}; $. fn.datepicker.default = {onrender : function (date) {return '';}}; $. datepuctor.c notstuctor = datepgalkicker; [{clsname : 'days', navfnc : 'month', navstep : 1}, {clsname : 'month', navfnc : 'fullesear', navstep : 1}, {clsname : 'year', navfnc : 'fullear', navstep : 10}], 날짜 : [일요일 "," "" "" "" "" "토요일", "일요일"], DaysShort : [ "일요일", "1", "Two", "Three", "Four", "Five", "Six", "Seven"], Daysmin : [ "Day", "One", "Three", "Four", "Four", "Six", "Seven"], "May", "", "", "", "", "", "", "", "", "", "", "", "", "", " "7 월", "7 월", "7 월", "7 월", "7 월", "7 월", "6 월", "6 월", "12 월"],}, isleapyear : return ((년 % 4 == 0) && (Year % 100! == 0) || (1 년 400 === 0)}, getsinth (wortmonth)} [31, (dpglobal.isleapyear (년)? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31]}, parseformat : fortmat (format) {var separator = format.match (/=), parts = format.split (! === 0) {새 오류 던지기 ( "유효하지 않은 날짜 형식.");} return {분리기 : 분리기, 부품 : 부품};}, parsedate : parsedate : function (date, format) {var parts = date.split (format.separator), date = new 날짜 (), val; date.sethours (0); date.setminutes (0); date.setseconds (0); date.setmilliseconds (0); if (parts.length == format.parts.length) {var year = date.get. 형식. parts.length; i <cnt; val = parseint (part [i], 10) || 1; switchs [i] : case 'd': day = val; setdate (vall; case 'mm': case = val -1); val; date.setlyear (2000 + val); break; case 'yyyy': year = val; date.setlyear (val); break;}} date = new 날짜 (연도, 월, 일, 0, 0, 0);}, formatdate : function (date, format) {d : date.getdate (), m : m : getmonth (date, format) {d : date.getdate () date.getlyear (). tostring (). substring (2), yyyy : date.getlyear ()}; val.dd = (val.d <10? '0': '' + val.d; val.mm = (Val.m <10? '0') : '') + val.m; var date = []; var i = 0, cnt. {date.push (val [format.parts [i]);} return date.join (format.separator);}, headtemplate : '<thead>'+'<tr>'+'<th> ‹</th>'+'<th>'+'<th> </th>'</tr> '</tbode>' colspan = "7"> </td> </tr> </tbody> '}; dpglobal.template = '<div>'+'<div>'+'<table>'+dpglobal.headtemplate+'<tbody> </tbody>'+'</table>'+'</div>'+'<div>'+'<div>'+'<pable>'+dpglobal .headtemplate+dpglobal.conttemplate+'</table>'+'</div>'+'<div>'+'<pable>'+dpglobal.headtemplate+'</table>'+'</div>'+';} ( Window.jQuery);위는 편집기가 소개 한 Bootstrap의 중국어 버전의 JS 파일입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!