Bootstrap Datepicker-это очень отличный плагин для выбора времени, а по умолчанию есть даты на английском языке. Эта статья представляет вам файл JS с Bootstrap DatePicker с китайцем.
// Использование jsif ($ (". DatePicker"). Length> 0) {$ (". DatePicker"). DatePicker ({язык: "ZH-CN", AutoClose: True, // Автоклоз: True, // Automatic With Locde Date Selection Box After Selection ClearBtn: True, // кнопка «Очистить сегодня»: True, // Кнопка сегодня/кнопка «сегодня». формат});}Ниже приведены файл CSS DatePicker и код JS
/*!* DatePicker для начальной загрузки ** Copyright 2012 Stefan Petre* Лицензирован по лицензии Apache V2.0* http://www.apache.org/license/license-2.0**/.datepicker {top: 0; слева: 0; Padding: 4px; margin-top: 1px; -Вебкит-bordius: 4px-radius: 4px-radius: 4px-radius: 4px-radius: 4px-radius: 4px-radius: 4px-radius: 4px-radius: radius: 4px; граница-радий: 4px;/*. Dow {border-top: 1px solid #ddd! 0.2); позиция: абсолютно; Top: -7px; слева: 6px;}. DatePicker: After {Content: ''; Display: Inline Block; Border-left: 6px Solid Transparent; граница правая: 6px Solid Transparent; Border-Bottom: 6px solid #fffffffffff; position: Absolute; -6px; слева: 7px;}. Нет;}. Таблица DatePicker {ширина: 100%; Margin: 0;}. DatePicker TD, .datePicker th {text-align: center; width: 20px; высота: 20px; -webkit-border-radius: 4px; -moz-bord-radius: 4px; border-radius: 4px;}. #eeeeeeee; coursor: pointer;}. DatePicker td.day.disabled {color: #eeeeeeeee;}. DatePicker td.old, .datepicker td.new {color: #999999;}. DatePicker td.active, .datePicker td.active: hoverff: #fffff; founal-color: #006 -Моз-линейр-градиент (вверху, #0088CC, #0044CC); фоновое изображение: -Webkit-gradient (линейный, 0 0, 0 100%, от ( #0088CC), до ( #0044CC)); фоновая Image: -webkit-linear-gradient ( #00888cccc, # # # # # # # # # # # #№ # #№ # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #fostic4-mame: -webkit-linear-gradient ( #008cc); -o-linear-gradient (вверху, #0088CC, #0044CC); фоновое изображение: линейно-градиент (внизу, #0088CC, #0044CC); Facker-Repeat: Repeat-X; Filter: Progid: dximagetransform.microsoft.gradient (startcolorsstr = ' #ff008888888888888888888888888888888888888888888888888888888888888888888888888 EndColorStr = ' #FF0044CC', gradientType = 0); пограничный цвет: #0044CC #0044CC #002A80; пограничный цвет: RGBA (0, 0, 0, 0,1) RGBA (0, 0, 0, 0,1) RGBA (0, 0, 0, 0,25); кнопки по умолчанию, поэтому они выделяются, если у них не будет границ */Фильтр: Прогид: dximageTransform.microsoft.Gradient (enabled = false); цвет: #fff; текстовые тени: 0 -1px 0 rgba (0, 0, 0, 0,25);}. DatePicker Td.active: Hoverpicker Td. T.DACTICE: Focus, .datePicker td.active: Hover: Focus, .datepicker td.active: Active, .datepicker td.active: Hover: Active, .datepicker td.active.active, .datepicker td.active: hover.active, .datepickicker td.active.disabled, .datepicker td.active: hover.diabled, .datepickickcker. TD.Active: Hover [отключен] {Цвет: #FFFFFF; фоновый цвет: #0044CC;*фоновый цвет: #003BB3;}. DatePicker Td.Active: Active, .datePicker td.active: Hover: Active, .datepicker td.active.active, .datePicker td.active: hover.active aactive aactive. span {display: block; width: 47px; высота: 54px; line-height: 54px; float: слева; Маржа: 2px; курсор: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; граница radius: 4px;}. span.active {color: #ffffff; фоновый цвет: #006dcc; фоновое изображение: -мозо-линейно-градиент (вверху, #0088cc, #0044cc); фоновое изображение: -вейбкит-градиент (линейный, 0 0, 0 100%, от ( #0088cc), к ( #0044cc); -Webkit-Linear-Gradient (Top, #0088CC, #0044CC); фоновое изображение: -o-linear-gradient (вверху, #0088CC, #0044CC); фон-изображение: линейный градиент (к снизу, #0088CC, #0044CC); фоновый градиен 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;/*Darken IE7 кнопок по умолчанию, поэтому они выделяются, если у них не будет границ*/filter: progid: dximageTransform.microsoft.gradient (elsanted = false); color: #ff; 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] {color: #ffffff; #003BB3;}. DatePicker TD SPAN.Active: Active, .datePicker td span.active.active {фоновый цвет: #003399 /9; ).datepicker td span.old { #999999;}. DatePicker th.switch {width: 145px;}. {font-size: 21px;}. DatePicker Thead Tr: First-Child th {coursor: pointer;}. DatePicker Thead Tr: First-Child Th: Hover {#eeeeeeeeee;}. Input-append.date .ad-on i, .input-prepend.date .Ad-on i {show: blocksor; 16px;}/* ================================================================================================ ================================================================================================ ================================================================================================ ================================================================================================ Copyright 2012 Stefan Petre ** лицензирован по лицензии Apache, версия 2.0 («Лицензия»);* Вы не можете использовать этот файл, кроме как в соответствии с лицензией.* Вы можете получить копию лицензии по адресу ** http://www.apache.org/license/license-2.0**, если не требуется применимый законодательство или согласовано в соответствии с программным обеспечением. Гарантии или условия любого рода, явные или подразумеваемые.* См. Лицензию на конкретные разрешения на управление языком и* ограничения в соответствии с лицензией.* ============================================================================================ ============================================================================================= ============================================================================================ ============================================================================================= Опции) {this.element = $ (element); this.format = dpglobal.parseformat (options.format || this.element.data ('date-format') || 'yyyy-mm-dd'); this.picker = $ (dpglobal.template) .appendto ('body'). это) //, // 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)}); $ .proxy (this.show, this));} else {this.element.on ('click', $ .proxy (this.show, this));} else {this.element.on ('click', $ .proxy (this.show, this));}} this.minviewmode =. Options.minViewMode || this.eelement.data ('date-minviewmode') || 0; if (typeof this.minviewmode === 'string') {switch (this.minviewmode) {case 'monthy': this.minviewmode = 1; break; case 'wears': this.minviewmode = 2; 0; break;}} this.viewmode = options.viewmode || this.element.data ('date-viewmode') || 0; if (typeof this.viewmode === 'string') {switch (this.viewmode) {case 'mests': this. viewmode = 1; break 'featords': this. this. This. this. This. 0; break;}} this.startviewmode = this.viewmode; this.weekstart = опции. 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.show (); this.component.outerheight (): this.element.outerheight (); this.place (); $ (window) .on ('remize', $ .proxy (this.place, this)); if (e) {e.stoppropagation (); e.preventdefault ();} if (! This. this. 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 ({vare: 'hide', date: this.date});}, set: function () {varatted = dpl this.format); if (! this.isinput) {if (this.component) {this.element.find ('input'). prop ('value', formatted);} this.element.data ('date', formatted);} else {this.element.prop ('value', formatted); === '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, 0);this.fill();},place: function () {var offset = this.component? this.component.offset (): this.element.offset (); this.picker.css ({top: offset.top + this.height, слева: offset.left});}, обновление: функция (newdate) {this.date = dpglobal.parsedate (typeof newdate == 'string'? this.element.prop ('value'): this.element.data ('date')), this.format); this.viewdate = new Date (this.date.getbleear (), this.date.getmonth (), 1, 0, 0, 0, 0); this.fill ();}, filldow: function (var dowcnt = this.week -whiekmstrat = this.weekmstrat; '<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 = 0while (i <12) {html+=' <pan> '+dpglobal.dates.monthsshort [i ++]+' </span> ';} this.picker.find ('. td '). Append (html);}, fill: function () {var d = новая дата (this.viewdate), year = d.getfyear (), month = d.getmonth (), currentdate = this.date.valueof (); this.picker.find ('. DatePicker-Days TH: EQ (1)'). Text (dpglobal.dates.months [месяц]+''+year); var prevmonth = новая дата (год, месяц-1, 28,0,0,0,0), day = dpglobal.getdysinmonth (prevmonth.getallyear (), day = dpglobal.getdaymonth prevmonth.getmonth ()); prevmonth.setdate (день); prevmonth.setdate (day - (prevmonth.getday () - this.weekstart + 7)%7); var nextmonth = new Date (prevmonth); nextmonth.setdate (nextmonth.getdate () + 42); nextmonth = nextmonth.valeof ();); clsname, prevy, prevm; while (prevmonth.valueof () <nextmonth) {if (prevmonth.getday () === this.weekstart) {html.push ('<tr>');} clsname = this.onrender (prevmonth); prevmonth. gootboldyear (); prevmonthmonth.ferthmonthmonth. && prevy === Год) || Предыдущий <Год) {clSname += 'old';} els Active ';} html.push (' <td> '+prevmonth.getdate ()+' </td> '); if (prevmonth.getday () === this.weekend) {html.push (' </tr> ');} prevmonth.setdate (prevmonth.getdate ()+1); tbody '). empty (). Append (html.join (' ')); var currentyear = this.date.getbleear (); var modys = this.picker.find ('. datepicker-months '). Найти (' th: eq (1) '). Текст (год). {months.eq (this.date.getmonth ()). addclass ('active');} html = ''; year = parseint (год/10, 10) * 10; var yearcont = this.picker.find ('... DatePicker-Years'). Найдите («th: eq (1)»). -= 1; for (var i = -1; i <11; i ++) {html+= '<pan>'+year+'</span>'; hem+= 1;} yearcont.html (html);}, щелчок: функция (e) {e.stoppropagation (); th '); if (target.length === 1) {switch (target [0] .nodeName.tolowercase ()) {case' th ': switch (target [0] .classname) {case' Switch ': this.showmode (1); «Далее»: 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;} brea target.parent (). find ('span'). index (target); this.viewdate.setmonth (месяц);} else {var year = parseint (target.text (), 10) || 0; this.viewDate.setevereear (year);} if (this.ViewMode! == 0) {this.Date = new. «Изменен», дата: this.date, viewmode: dpglobal.modes [this.viewmode] .clsname});} this.showmode (-1); this.fill (); this.set (); break; case 'td': if (target.is ('. day') &&! 10) || 1; var month = this.viewdate.getmonth (); if (target.is ('. Old')) {month -= 1;} else if (target.is ('. New'))) {month += 1;} var year = this.viewdate.getbayear ();); this.date = новая дата (год, месяц, день, 0,0,0,0); this.ViewDate = новая дата (год, месяц, математика. Мин (28, день), 0,0,0,0); this.fill (); this.set (); this.element.trigger ({type: 'medicaTate', date: this.date, viewmode: dpglobal.modes [this.viewmode] .clsname});} break;}}}, mousedown: function (e) {e.stoppropation (); {this.viewmode = math.max (this.minviewmode, math.min (2, this.viewmode + dir));} this.picker.find ('> div'). Hide (). Filter ('. DatePicker-' + dpglobal.modes [this.viewmode] .clsname). опция, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ('datepicker'), options = typeof option === 'object' && option; if (! data) {$ this.data ('datepicker', (data = datepicker (ther, $. $ .fn.datepicker.defaults, options)));} if (typeof option === 'string') data [option] (val);});}; $. fn.datepicker.defaults = {onrender: function (date) {return '';}}; $. fn.datepicker.constructor = datepicker; [{clsname: 'Days', Navfnc: 'Month', Navstep: 1}, {clsname: 'Months', Navfnc: 'Folloar', Navstep: 1}, {clsname: 'Годы', Navfnc: «Полностью горе», Navstep: 10}], даты: {дни: [»,« Воскресенье »,« Сторона »,« Пятница »,« Пятница »,« Пятница ». «Суббота», «воскресенье»], Dayshort: [«Sunday», «One», «Two», «Three», «Four», «Five», «Six», «Seven»], Daysmin: [«Day», «One», «Two», «Три», «Four», «Five», «Шесть», «Семь», «Месяцы»: «Январь», «Февраль», «Март», «март», «март», «May», «May», «MAY», «MAY», «MAY», «MAY». «Июль», «июль», «июль», «июль», «июль», «июль», «июль», «июнь», «июнь», «июнь», «декабрь»],}, IsleApyear: функция (год) {return ((год % 4 === 0) && (год % 100! [31, (dpglobal.isleapyear (Год)? 29: 28), 31, 30, 31, 30, 31, 31, 30, 31] [месяц]}, parseformat: function (format) {var sepreator = format.match (/n.///-/ s].*? 0) {бросить новую ошибку ("Формат неверной даты.");} Return {sepreator: seperator, части: части};}, 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.getallyear (), day = dateDate (), month.glet.getMonthomon (); format.parts.length; val; date.setficeear (2000 + val); break; case 'yyyy': Год = val; date.setaillyear (val); break;}} date = новая дата (год, месяц, день, 0, 0, 0);} дата возврата;}, formatdate: function (дата, формат) {var = {d: date.getdate (), m: get.get.get. date.getifleear (). ToString (). substring (2), yyyy: date.getfyear ()}; val.dd = (val.d <10? '0': '') + val.d; val.mm = (val.m <10? {date.push (val [format.parts [i]]);} return date.join (format.separator);}, headtemplate: '<thead>'+'<tr>'+'<th> ‹</th>'+'<th>'+'<Th >› </th>'+'</tr>' </tman> colspan = "7"> </td> </tr> </tbody> '}; dpglobal.template = '<viv>'+'<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);Выше приведено файл JS в управлении DatePicker в начальной загрузке, представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!