Bootstrap-DatePicker เป็นปลั๊กอินการเลือกเวลาที่ยอดเยี่ยมมากและค่าเริ่มต้นคือการแสดงวันที่เป็นภาษาอังกฤษ บทความนี้แนะนำไฟล์ JS ด้วย bootstrap datepicker กับภาษาจีน
// ใช้ jsif ($ (". datepicker"). ความยาว> 0) {$ (". datepicker"). datepicker ({ภาษา: "zh-cn", autoclose: จริง, // autoclose: true, // โดยอัตโนมัติ รูปแบบ});}ต่อไปนี้เป็นไฟล์ CSS ของ DatePicker และรหัส JS
/*!* datepicker สำหรับ bootstrap ** ลิขสิทธิ์ 2012 Stefan Petre* ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache v2.0* http://www.apache.org/licenses/license-2.0**/.datepicker {top: 0; 4px; -moz-border-Radius: 4px; Border-Radius: 4px;/*. Dow {Border-top: 1px Solid #DDD! สำคัญ;}*/}. Datepicker: ก่อน {เนื้อหา: ''; #CCC; ขอบล่าง-สี: RGBA (0, 0, 0, 0.2); ตำแหน่ง: Absolute; Top: -7px; ซ้าย: 6px;}. datepicker: หลังจาก {เนื้อหา: ''; แสดง: inline-block; border-left: 6px -6px; ซ้าย: 7px;}. datepicker> div {display: none;}. datepicker ตาราง {width: 100%; margin: 0;}. datepicker td, .datepicker th {text-allign: center; width: 20px; ความสูง: 20px; 4px; Border-Radius: 4px;}. Datepicker td.day:Hover {พื้นหลัง: #eeeeee; เคอร์เซอร์: ตัวชี้;}. datepicker td.day.disabled {color: #eeeeeee;}. datepicker td.old, .datepicker td.new td.active, .datepicker td.active: hover {color: #ffffff; พื้นหลัง-สี: #006dcc; พื้นหลัง-ภาพ: -moz-linear-gradient (ด้านบน, #0088cc, #0044cc); ถึง ( #0044cc))-ภาพพื้นหลัง: -webkit-linear-gradient (ด้านบน, #0088cc, #0044cc); พื้นหลัง-ภาพ: -o-linear-gradient (ด้านบน, #0088cc, #0044cc); Progid: dximagetransform.microsoft.gradient (startColorStr = ' #ff0088cc', endColorStr = ' #ff0044cc', gradientType = 0); สีชายแดน: #0044cc #0044cc #002a80; 0.1) RGBA (0, 0, 0, 0.25);*พื้นหลังสี: #0044cc;/*ปุ่ม DARKEN IE7 โดยค่าเริ่มต้นดังนั้นพวกเขาจึงโดดเด่นมากขึ้นเนื่องจากพวกเขาจะไม่มีเส้นขอบ*/ตัวกรอง: proGid: dimaGetransform.microsoft.gradient 0.25);}. datepicker td.active: โฮเวอร์, .datepicker td.active: โฮเวอร์: โฮเวอร์, .datepicker td.active: โฟกัส, .datepicker td.active: hover: โฟกัส, .datepicker td.active: active, .datepicker td. td.active: hover.active, .datepicker td.active.disabled, .datepicker td.active: hover.disabled, .datepicker td.active [disabled],. datepicker td.active: hover [disabled] td.active: active, .datepicker td.active: hover: active, .datepicker td.active.active, .datepicker td.active: hover.active {พื้นหลัง-สี: #003399 /9; 2px; เคอร์เซอร์: ตัวชี้; -webkit-Border-Radius: 4px; -moz-Border-Radius: 4px; Border-Radius: 4px;}. Datepicker TD Span: Hover {พื้นหลัง: #EEEEEEE;}. -moz-Linear-Gradient (Top, #0088cc, #0044cc); Inmall-Image: -webkit-gradient (เชิงเส้น, 0 0, 0 100%, จาก ( #0088cc), ถึง ( #0044cc)); -o-linear-gradient (บนสุด, #0088cc, #0044cc); ภาพพื้นหลัง-ภาพ: linear-gradient (ไปด้านล่าง, #0088cc, #0044cc); การตอบสนองพื้นหลัง: ซ้ำ -x; ตัวกรอง: progid: dimximagetransform.microsoft.gradient endcolorstr = ' #ff0044cc', gradientType = 0); สีชายแดน: #0044cc #0044cc #002a80; สีชายแดน: RGBA (0, 0, 0, 0.1) RGBA (0, 0, 0, 0.1) RGBA ปุ่ม IE7 โดยค่าเริ่มต้นดังนั้นพวกเขาจึงโดดเด่นมากขึ้นเนื่องจากพวกเขาจะไม่มีเส้นขอบ */ตัวกรอง: progid: dximagetransform.microsoft.gradient (เปิดใช้งาน = false); สี: #FFFF; text -shadow: 0 -1px 0 rgba (0, 0, 0, 0.25); span.active: โฟกัส, .datepicker td span.active: active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active [disabled] {สี: #ffffff; span.active: active, .datepicker td span.active.active {พื้นหลัง-สี: #003399 /9; }.datepicker td span.old {color: #999999;}. datepicker th.switch {ความกว้าง: 145px;}. 21px;}. datepicker thead tr: ลูกคนแรก th th {เคอร์เซอร์: ตัวชี้;}. datepicker thead tr: ลูกคนแรก th: โฮเวอร์ {พื้นหลัง: #eeeeeeee;}. อินพุต-append.date .add-on i,. 16px;}/* - - - - ลิขสิทธิ์ 2012 Stefan Petre ** ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache, เวอร์ชัน 2.0 ("ใบอนุญาต");* คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต* คุณอาจได้รับสำเนาใบอนุญาตที่ ** http://ww.apache.org/license/license- พื้นฐาน* โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย* ดูใบอนุญาตสำหรับการอนุญาตการกำกับดูแลภาษาเฉพาะและข้อ จำกัด* ภายใต้ใบอนุญาต* - - - - ตัวเลือก) {this.element = $ (องค์ประกอบ); this.format = dpglobal.parseformat (opotions.format || this.element.data ('date-format') || 'yyyy-mm-dd'); this.picker = $ (dpglobal.template). สิ่งนี้) //, // mousedown: $ .proxy (this.mousedown, this)}); this.isinput = this.element.is ('อินพุต'); this.Component = this.element.is ('. วันที่')? this.element.find ('. add-on'): false; ถ้า (this.isinput) {this.element.on ({focus: $ .proxy (this.show, นี่), // blur: $ .proxy (this.hide, this), keyup: $ .proxy (this.Component) {this.component.on ('คลิก', $ .proxy (this.show, this));} else {this.element.on ('คลิก', $ .proxy (this.show, this))}}}}}}} ตัวเลือก minViewMode || this.element.data ('date-minViewMode') || 0; ถ้า (typeof this.minViewMode === 'สตริง') {switch (this.minViewMode) {กรณี 'เดือน': this.minViewMode = 1; 0; break;}} this.viewmode = opotions.viewmode || this.element.data ('date-viewMode') || 0; ถ้า (typeof this.viewmode === 'สตริง') {switch (this.viewMode) 0; break;}} this.startViewMode = this.viewMode; this.weekStart = opotions.weekStart || this.element.data ('วันที่-สัปดาห์สตาร์ต') || 0; this.weekend = this.weekStart === 0? 6: this.weekStart - 1; this.onrender = opotions.onrender; this.filldow (); this.fillmonths (); this.update (); this.showmode ();}; datepicker.prototype = {constructor: datepicker this.Component.outerheight (): this.element.outerheight (); thaplace.place (); $ (window) .on ('resize', $ .proxy (นี่คือสิ่งนี้)); ถ้า (e) {e.stoppropagation (); e.preventdefault (); สิ่งนี้; $ (เอกสาร) .on ('mousedown', ฟังก์ชั่น (ev) {ถ้า ($ (ev.target) .closest ('. datepicker'). ความยาว == 0) {that.hide ();}}); this.element.trigger ({type: 'แสดง', วันที่: function () {this.picker.hide (); $ (หน้าต่าง) .off ('resize', thinplace); this.viewmode = this.startViewMode; this.showMode (); ถ้า (this.isInput) {$ (เอกสาร). this.date});}, set: function () {var formatted = dpglobal.formatdate (this.date, this.format); if (! this.isinput) {ถ้า (this.component) {this.element.find ('อินพุต') {this.element.prop ('value', จัดรูปแบบ);}}, setValue: function (newDate) {ถ้า (typeof newdate === 'String') {this.date = dpglobal.parsedate (newDate, this.format); วันที่ (this.date.getlyear (), this.date.getMonth (), 1, 0, 0, 0, 0, 0); this.fill ();}, สถานที่: ฟังก์ชั่น () {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 this.element.prop ('value'): this.element.data ('วันที่')), this.format); this.viewdate = วันที่ใหม่ (this.date.getlyear (), this.date.getMonth (), 1, 0, 0, 0, 0); '<tr>'; ในขณะที่ (dowcnt <this.weekStart+7) {html+= '<th>'+dpglobal.dates.daysmin [(dowcnt ++)%7]+'</th>';} html+= '</tr>'; TheaD '). ผนวก (html);}, fillmonths: function () {var html =' '; var i = 0 ในขณะ (i <12) {html+=' <span> '+dpglobal.dates.monthsshort [i ++]+' </span> '; td '). ผนวก (html);}, การเติม: ฟังก์ชัน () {var d = วันที่ใหม่ (this.viewdate), ปี = d.getualear (), เดือน = d.getMonth (), currentDate = this.date.valueof (); this.picker.find ('. datepicker-days th: eq (1)') ข้อความ (dpglobal.dates.months [เดือน]+''+ปี); var prevmonth = วันที่ใหม่ (ปี, เดือนที่ 1, 28,0,0,0,0), day = dpglobal.getDaysinmonmmonth Prevmonth.getMonth ()); Prevmonth.setDate (วัน); Prevmonth.setDate (วัน - (Prevmonth.getDay () - นี่คือ WeekStart + 7)%7); var nextmonth = วันที่ใหม่ (Prevmonth); nextmonth.setDate clsname, prevy, prevm; ในขณะที่ (prevmonth.valueof () <nextmonth) {ถ้า (prevmonth.getday () === this.weekstart) {html.push ('<tr>');} clsname = this.onrender && prevy === ปี) || prevy <ปี) {clsname += 'old';} อื่นถ้า ((prevm> เดือน && prevy === ปี) || prevy> ปี) {clsname += 'new'; active ';} html.push (' <td> '+prevmonth.getDate ()+' </td> '); ถ้า (prevmonth.getday () === this.weekend) {html.push (' </tr> '); tbody '). empty (). ผนวก (html.join (' ')); var currentyear = this.date.getlyear (); var เดือน = this.picker.find ('. datepicker-months ') ค้นหา (' th: eq (1) ') {months.eq (this.date.getMonth ()). addclass ('active');} html = ''; ปี = parseint (ปี/10, 10) * 10; var yearcont = this.picker.find ('datepicker ปี') ค้นหา ('th: eq (1)') 9)). end (). find ('td'); ปี -= 1; สำหรับ (var i = -1; i <11; i ++) {html+= '<pan>'+ปี+'</span>' ปี+= 1;} yearcont.html (html); $ (e.target) .closest ('span, td, th'); ถ้า (target.length === 1) {switch (เป้าหมาย [0] .nodename.toLowerCase ()) {case 'th': switch (เป้าหมาย [0] .className) {case 'switch' 'ถัดไป': this.viewdate ['set'+dpglobal.modes [this.viewmode] .navfnc] .call (this.viewdate, this.viewdate ['get'+dpglobal.modes [this.viewmode] .navfnc] .call dpglobal.modes [this.viewmode] .navstep * (เป้าหมาย [0] .classname === 'prev'? -1: 1)); this.fill (); this.set (); break;} break; case 'span': if (target.is ('. เดือน')) target.parent (). find ('span'). ดัชนี (เป้าหมาย); this.viewdate.setMonth (เดือน);} else {var year = parseint (target.text (), 10) || 0; this.viewdate.setedlyear (ปี);} ถ้า (this.viewmode! == 0) 'เปลี่ยน', วันที่: this.date, viewMode: dpglobal.modes [this.viewMode] .clSname});} this.showMode (-1); this.fill (); set.set (); break; case 'td': ถ้า (target.is ('. 10) || 1; var month = this.viewdate.getMonth (); ถ้า (target.is ('. old')) {เดือน -= 1;} อื่นถ้า (target.is ('. ใหม่'))) {เดือน += 1; this.date = วันที่ใหม่ (ปี, เดือน, วัน, 0,0,0,0); this.viewdate = วันที่ใหม่ (ปี, เดือน, math.min (28, วัน), 0,0,0,0); this.fill (); this.set (); this.element.trigger ({type: 'เปลี่ยน', วันที่: this.date, viewmode: dpglobal.modes [this.viewmode] .clsname});} break;}}}, mousedown: function (e) {e.stoppropagation (); {this.viewMode = math.max (this.minViewMode, math.min (2, this.viewmode + dir));} this.picker.find ('> div'). ซ่อน (). filter ('. = ฟังก์ชั่น (ตัวเลือก, val) {return this.each (function () {var $ this = $ (this), data = $ this.data ('datepicker'), ตัวเลือก = ตัวเลือก typeof === 'object' && ตัวเลือก; if (! data) {$ this.data ('datepicker' $ .fn.datePicker.defaults, ตัวเลือก))));} ถ้า (ตัวเลือก typeof === 'string') ข้อมูล [ตัวเลือก] (val);});}; $. fn.datepicker.defaults = {onrender: function (วันที่) {return '; {โหมด: [{clsname: 'Days', navfnc: 'เดือน', navstep: 1}, {clsname: 'เดือน', navfnc: 'เต็มเต็ม', navstep: 1}, {clsname: 'ปี', navfnc: "วันศุกร์", "วันเสาร์", "วันอาทิตย์"], daysshort: ["วันอาทิตย์", "หนึ่ง", "สอง", "สาม", "สี่", "ห้า", "หก", "เจ็ด"], วัน: ["วัน", "สอง", "สี่", " "มิถุนายน", "กรกฎาคม", "กรกฎาคม", "กรกฎาคม", "กรกฎาคม", "กรกฎาคม", "กรกฎาคม", "กรกฎาคม", "มิถุนายน", "มิถุนายน", "มิถุนายน", "ธันวาคม",}, isleapyear: ฟังก์ชั่น (ปี) {return [31, (dpglobal.isleapyear (ปี)? 29: 28), 31, 30, 31, 30, 31, 31, 30, 31] [เดือน]}, parseformat: ฟังก์ชั่น (รูปแบบ) {var separator = format.match (/[////-/ // 0) {โยนข้อผิดพลาดใหม่ ("รูปแบบวันที่ไม่ถูกต้อง");} return {ตัวคั่น: ตัวคั่น, ชิ้นส่วน: ชิ้นส่วน};}, parsedate: ฟังก์ชั่น (วันที่, รูปแบบ) {var parts = วันที่. วันที่ (), val; date.sethours (0); date.setMinutes (0); date.setSeconds (0); date.setMilliseconds (0); ถ้า (parts.length === รูปแบบ parts.length) {var ปี = วันที่ i <cnt; i ++) {val = parseint (ส่วน [i], 10) || 1; switch (format.parts [i]) {case 'dd': case 'd': day = val; date.setdate (val); + val); break; case 'yyyy': ปี = val; date.setualear (val); break;}} วันที่ = วันที่ใหม่ (ปี, เดือน, วัน, 0, 0, 0);} วันที่คืน;}, formatdate: ฟังก์ชั่น (วันที่, รูปแบบ) date.getlyear (). toString (). substring (2), yyyy: date.getlyear ()}; val.dd = (val.d <10? '0': '') + val.d; val.mm = (val.m <10? '0': ') + val.m; {date.push (val [format.parts [i]]);} date.join (format.Saperator);}, headtemplate: '<thead>'+'<tr>'+'<th> ‹</th>' <thuth> colspan = "7"> </td> </tr> </tbody> '}; dpglobal.template = '<div>'+'<div>'+'<table>'+dpglobal.headtemplate+'<tbody> </tbody> .HEADTEMPLATE+DPGLOBAL.CONTTEMPLATE+'</table>'+'</div>'+'<div>'+'<table>'+dpglobal.headTemplate+'</blable>'+'</div>'+'} ( window.jquery);ข้างต้นคือไฟล์ JS ในเวอร์ชันภาษาจีนของการควบคุม datepicker ใน bootstrap แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!