Bootstrap-Datepicker adalah plug-in pilihan waktu yang sangat baik, dan standarnya adalah untuk menampilkan tanggal dalam bahasa Inggris. Artikel ini memperkenalkan kepada Anda file JS dengan Bootstrap DatePicker dengan Cina.
// Gunakan JSIF ($ (". DatePicker"). Panjang> 0) {$ (". DatePicker"). DatePicker ({bahasa: "ZH-CN", Autoclose: True, // Autoclose: True, // Sembunyikan Kotak Tanggal Setelah Pemilihan: "Benar, // Clear Button Today, // Today, // Tanggal Today:" format});}Berikut ini adalah file CSS DatePicker dan kode JS
/*!* DatePicker untuk Bootstrap ** Hak Cipta 2012 Stefan Petre* dilisensikan di bawah lisensi Apache v2.0* http://www.apache.org/licenses/license-2.0**/.datepicker {top: 0; kiri: 0; padding: 4px; margin-top: 1px; 4px; -Moz-border-radius: 4px; border-radius: 4px;/*. Dow {border-top: 1px solid #ddd! Penting;}*/}. Datepicker: Sebelum {Content: ''; Display: inline-block; border-left: 7px solid transparent; border-right: 7p-block-block; border-left: 7px solid transparent; border-right: 7p-block-block; border-left: 7px solid transparent; border-right: 7p-block-block; border-left: 7px solid transparent; border-right: 7p-block #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 transparent;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 {text-align: center;width: 20px;height: 20px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}. DatePicker td.day:hover {latar belakang: #eeeeee; kursor: pointer;}. DatePicker td.day.disabled {color: #eeeeeeee; {Color: #FFFFFF; latar belakang-warna: #006dcc; latar belakang-gambar: -moz-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -webkit-gradient (linier, 0 0, 0 100%, dari ( #0088cc), ke ( #00444444444444, dari ( #0088cc), ke ( #0044), dari ( #0088cc), ke ( #0044, dari ( #0088cc), ke ( #0044, #0088cc, #0044cc); latar belakang-gambar: -o-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: linear-gradient (ke bawah, #0088cc, #0044cc); latar belakang-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), 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); RGBA (0, 0, 0, 0.25);*latar belakang-warna: #0044cc;/*Tombol Gelap IE7 secara default sehingga lebih menonjol mengingat mereka tidak akan memiliki batas*/filter: progid: dximagetransform.microsoft.gradient (enabled = false); color: #fff; Text-Shadow. 0.25);}. DatePicker TD.Active: Hover, .DatePicker TD.Active: Hover: Hover, .DatePicker TD.Active: Focus ,.DatePicker td.active: hover: .DatePicker td.active: Active ,.DatePicker TD.Active: hover: hover, ActiveCKick. td.active: hover.active, .datePicker td.active.disabled, .datePicker td.active: hover.disabled, .datepicker td.active [dinonaktifkan], datepicker td.active: hover [dinonaktifkan] {color: #fffff; latar belakang-latar belakang: #00 latar belakang: o warna: #FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFT; #003BB3;}. DatePicker TD.Active: Active, .DatePicker TD.Active: Hover: Active, .DatePicker td.active.active, .DatePicker td.active: hover.active {latar belakang-color: #003399 /9; 54px; line-height: 54px; float: left; margin: 2px; kursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} datepicker td span: hover {latar belakang: #eeeeeeeeeeeeeee. #006dcc; latar belakang-gambar: -Moz-linear-gradient (atas, #0088cc, #0044cc); latar belakang-gambar: -webkit-gradient (linear, 0 0, 0 100%, dari ( #0088cc), ke ( #0044cc)); latar belakang-latar belakang: -weBKITID #0044cc); latar belakang-gambar: -o-linear-gradient (Top, #0088cc, #0044cc); latar belakang-gambar: linear-gradient (ke bawah, #0088cc, #0044cc); latar belakang-reveat: pengulangan-X; filter: progid: dximagetransform.microscrom.crosoft. endColorStr = ' #ff0044cc', gradientType = 0); Border-color: #0044cc #0044cc #002a80; Border Butson: RGBA (0, 0, 0, 0.1) RGBA (0, 0, 0, 0.1) RGBA (0, 0, 0, 0.2); default sehingga mereka lebih menonjol mengingat mereka tidak akan memiliki perbatasan */filter: progid: dximagetransform.microsoft.gradient (diaktifkan = false); warna: #ffff; teks -shadow: 0 -1px 0 rgba (0, 0, 0, 0, 0.25);}. Datpicker td span. span.active: Active, .DatePicker td span.active.active, .DatePicker td span.active.disabled, .DatePicker td span.active [dinonaktifkan] {color: #ffffff; latar belakang-latar belakang. {Background-Color: #003399 /9;}.datepicker td span.old {color: #999999;}. DatePicker th.switch {width: 145px;}. DatePicker th.next, .datePicker Th.prev {font-Size: 21px;}.}.}. pointer;}. DatePicker Thead TR: First-Child TH: Hover {latar belakang: #eeeeeeee;}. Input-append.date .add-on i, .input-prepend.date .add-on i {display: blok; kursor: pointer; lebar: 16px; tinggi: 16px;}/* ============================================================================================================================================== ============================================================================================================================================== ============================================================================================================================================== ============================================================================================================================================== Hak Cipta 2012 Stefan Petre ** dilisensikan di bawah Lisensi Apache, Versi 2.0 ("Lisensi");* Anda tidak boleh menggunakan file ini kecuali sesuai dengan lisensi.* Anda dapat memperoleh salinan lisensi di ** http://www.apache.org/licensess/lisensi-2.0** kecuali jika disetujui atau disetujui oleh antreed atau disetujui dalam antrian, inlicenses, inlicens- lisensi-2. Dasar,* tanpa jaminan atau ketentuan dalam bentuk apa pun, baik tersurat maupun tersirat.* Lihat lisensi untuk izin tata kelola bahasa tertentu dan* batasan di bawah lisensi.* ============================================================================================================================================================== ==================================================================================================================================================== ============================================================================================================================================================== ==================================================================================================================================================== opsi) {this.element = $ (element); this.format = dpglobal.parseformat (options.format || this.element.data ('date-format') || 'yyyy-mm-dd'); this.picker = $ (dpglobal.template). lampai ('). ini) //, // mousedown: $ .proxy (this.mousedown, this)}); this.isInput = this.element.is ('input'); this.component = this.element.is ('. Tanggal')? 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 ('klik', $ .proxy (this.show, this));}} this.minviewMode = Options.minviewMode || this.element.data ('date-minviewMode') || 0; if (typeof this.minviewMode === 'string') {switch (this.minviewMode) {case 'bulan': this.minviewMode = 1; break; case 'years': this. 0; break;}} this.viewMode = option.viewMode || this.element.data ('date-viewMode') || 0; if (typeof this.viewMode === 'string') {switch (ini. 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.prototype = {constructor: datePicker, show: function (e) {this.picker.prototype = {constructor: datePicker, show: function (e) {this.picker.show ini. function (ev) {if ($ (ev.target) .closest ('. datePicker'). length == 0) {that.hide ();}}); this.element.trigger ({type: 'show', this.Date});}, hide: function () {this.picker.hide (); $ '; = this.startViewMode; this.showmode (); if (! this.isInput) {$ (dokumen) .off ('mousedown', this.hide);} // this.set (); this.element.trigger ({type: hide ', date: this.date});}, set: {{{{{{), date: this.date});}, set: {{{{{), date: this.date});}, set: {{{{{), date: this.date});}, set: {{{{{), date: this.date});}, set: {{{{) {{) {{) {{{); this.format); if (! this.isInput) {if (ini. === '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 = ini. this.component.offset (): this.element.offset (); this.picker.css ({top: offset.top + this.height, kiri: offset.left});}, update: function (newDate) {this.date = dpglobal.parsedate (typeof newDate === ' this.element.prop ('value'): this.element.data ('date')), this.format); this.viewDate = new Date (this.date.getlyear (), this.date.getMonth (), 1, 0, 0, 0, 0); this.fill ();}, filldow: function () {varmln; varml; varml; varml; var. '<tr>'; while (dowcnt <this.weekstart+7) {html+= '<th>'+dpglobal.dates.daysmin [(dowcnt ++)%7]+'</t>';} html+= '</tr>'; this.picker.find (' Thead '). append (html);}, fillmontths: function () {var html =' '; var i = 0 saat (i <12) {html+=' <span> '+dpglobal.dates.monthsshort [i ++]+' </span> ';} ini. td '). append (html);}, isi: function () {var d = tanggal baru (this.viewDate), tahun = .getlyear (), bulan = d.getMonth (), currentDate = this.date.valueof (); this.picker.find ('. DatePicker-Days TH: eq (1)'). Teks (dpglobal.dates.months [bulan]+''+tahun); var prevonth = tanggal baru (tahun, bulan-1, 28,0,0,0), hari = dpglobal.getdaysinmonth. 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>');}clsName = this.onRender(prevMonth);prevY = prevMonth.getFullYear();prevM = prevMonth.getMonth();if ((prevM < month &&a prevy === tahun) || aktif ';} html.push (' <td> '+prevmonth.getDate ()+' </td> '); if (prevmonth.getday () === this.weekend) {html.push (' </tr> ');} prevMMMMONTH.setDate (prevmonth.pushdate () () () () () (. tbody '). kosong (). append (html.join (' ')); var currentYear = this.date.getlyear (); var bulan = this.picker.find ('. Datpicker-months '). Temukan (' th: eq (1)). Teks (tahun) .End (). Temukan ('span'). {bulan. -= 1; untuk (var i = -1; i <11; i ++) {html+= '<span>'+tahun+'</span>'; tahun+= 1;} yearcont.html (html);}, klik: fungsi (e) {e.stoppropagation (); e.preventdefault, function (); vararget (e.toppropagation (); e.preventdefault, funce (); vararget (e.toppropagation (); e.preventdefauld, funce (); vararget (E.topPropAgation (); e.preventdefauld, funce (); vararget (e.target (); e.preventdefault, function (); vararget (e.target (); e.preventdefault, function (); vararget (e.target). 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' case 'case' 'Next': this.viewDate ['set'+dpglobal.modes [this.viewMode] .navfnc] .call (this.viewDate, this.viewDate ['get'+dpglobal.modes [this.viewMode] .navfnc] .call (viewDate) Dpglobal.modes [this.viewMode] .NavStep * (target [0] .className === 'prev'? -1: 1)); this.fill (); this.set (); break;} break; case 'span': jika (target.is ('. target.parent (). find ('span'). index (target); this.viewDate.setMonth (bulan);} else {var year = parseInt (target.text (), 10) || 0; this.viewDate.setlyear (tahun);} if (this.viewMode! == 0) {this.date (tahun); {ini. 'ubah', tanggal: this.date, viewMode: dpglobal.modes [this.viewMode] .clsname});} this.showmode (-1); this.fill (); target.set (); case 'td': if (target.is ('. day') &&! 10) || 1; var bulan = this.viewDate.getMonth (); if (target.is ('. Old')) {bulan -= 1;} lain jika (target.is ('. Baru'))) {bulan += 1;} var tahun = this.viewDate.getlyarear (); this.date = tanggal baru (tahun, bulan, hari, 0,0,0,0); this.viewDate = Tanggal baru (tahun, bulan, Math.min (28, hari), 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.max (this.minviewMode, math.min (2, this.viewMode + dir));} this.picker.find ('> div'). hide (). filter ('. DatePicker-' + dpglobal.modes [this.viewMode] .clsname) .dshow (funche). opsi, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ('datePicker'), option = typeOf option === 'Object' && Option; if (! Data) {$ this.data ('datePicker', (data = new datePicker (this, $. extend ({{},}, {{}, {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{) baru $ .fn.datePicker.Defaults, opsi))));} if (typeOf option === 'string') data [opsi] (val);});}; $. fn.datePicker.defaults = {onrender: function (date) {return '';}}; $. fn.datePicker. [{clsname: 'days', navfnc: 'month', navstep: 1}, {clsname: 'bulan', navfnc: 'fullear', navstep: 1}, {clsname: 'years', navfnc: 'fullear', navStep: 10}], date: {days: {days "" "," hari "" "Sabtu", "Minggu"], Daysshort: ["Sunday", "One", "Two", "Three", "Four", "Five", "Six", "Seven"], Daysmin: ["Day", "One", "Two", "May", "Four", "Five", "Six", "Seven"], Bulan "", "" Juni "", "Februari", "PARK", "Seven", "Bulan" " "Juli", "Juli", "Juli", "Juli", "Juli", "Juli", "Juli", "June", "June", "June", "Desember"],}, isleapyear: function (tahun) {return ((tahun, {tahun): tahun), tahun % 100! == 0)) ||. [31, (dpglobal.isleapyear (tahun)? 29: 28), 31, 30, 31, 30, 31, 31, 30, 31] [bulan]}, parseformat: fungsi (format) {var pemisah = format.match (/media). === 0) {throw new error ("format tanggal tidak valid.");} Return {pemisah: pemisah, bagian: bagian};}, parsedate: function (tanggal, format) {var bagian = 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 tahun = date.getlyar (), day = date.getDate (), bulan = date = date = date. format.parts.length; val; date.setlyear (2000 + val); break; case 'yyyy': year = val; date.setlyear (val); break;}} tanggal = tanggal baru (tahun, bulan, hari, 0, 0, 0);} tanggal pengembalian;}, format: function (tanggal, format) {var val = {d: date. date.getlearear (). tostring (). substring (2), yyyy: date.getlyear ()}; val.dd = (val.d <10? 0 ':' '') + val.d; val.mm = (var.m <10? 0 ':' ') + val.m; var tanggal = []; untuk (var i = 0? {date.push (val [format.parts [i]]);} return date.join (format.separator);}, headtemplate: '<Thead>'+'<tr>'+'<tr> ‹</th>'+'<t Th>' <th> ›› </th> '+' </tr> '+'+'</templ', </templ ', </templ', </templ ', </THREPLE', </THRET/TRANT </THRET/TRANT </TR> </THRE '+ '<tbody> <tr> <td colspan = "7"> </td> </tr> </tbody>'}; dpglobal.template = '<verv>'+'<div>'+'<able>'+dpglobal.Headtemplate+'<tbody> </tbody>'+'</able>'+'</div>'+'<verv>'+'<verv>'+'<able>'+dpglobal .HeadTemplate+dpglobal.conttemplate+'</ablo>'+'</div>'+'<div>'+'<able>'+dpglobal.headtemplate+'</able>'+'</div>'+';} ( window.jQuery);Di atas adalah file JS dalam versi China dari Kontrol DatePicker di Bootstrap yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!