BootStrap中Datepicker控件带中文的js文件
bootstrap-datepicker是一个非常优秀的时间选择插件，默认是英文显示日期的。本文给大家介绍bootstrapdatepicker带中文的js文件。
//用之前引用bootstrap的jsif($(".datepicker").length>0){
$(".datepicker").datepicker({
language:"zh-CN",
autoclose:true,//选中之后自动隐藏日期选择框
clearBtn:true,//清除按钮
todayBtn:true,//今日按钮
format:"yyyy-mm-dd"//日期格式
});
}
以下是datepicker的css文件和js代码
/*!
*DatepickerforBootstrap
*
*Copyright2012StefanPetre
*LicensedundertheApacheLicensev2.0
*http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker{
top:0;
left:0;
padding:4px;
margin-top:1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
/*.dow{
border-top:1pxsolid#ddd!important;
}*/
}
.datepicker:before{
content:'';
display:inline-block;
border-left:7pxsolidtransparent;
border-right:7pxsolidtransparent;
border-bottom:7pxsolid#ccc;
border-bottom-color:rgba(0,0,0,0.2);
position:absolute;
top:-7px;
left:6px;
}
.datepicker:after{
content:'';
display:inline-block;
border-left:6pxsolidtransparent;
border-right:6pxsolidtransparent;
border-bottom:6pxsolid#ffffff;
position:absolute;
top:-6px;
left:7px;
}
.datepicker>div{
display:none;
}
.datepickertable{
width:100%;
margin:0;
}
.datepickertd,
.datepickerth{
text-align:center;
width:20px;
height:20px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.datepickertd.day:hover{
background:#eeeeee;
cursor:pointer;
}
.datepickertd.day.disabled{
color:#eeeeee;
}
.datepickertd.old,
.datepickertd.new{
color:#999999;
}
.datepickertd.active,
.datepickertd.active:hover{
color:#ffffff;
background-color:#006dcc;
background-image:-moz-linear-gradient(top,#0088cc,#0044cc);
background-image:-webkit-gradient(linear,00,0100%,from(#0088cc),to(#0044cc));
background-image:-webkit-linear-gradient(top,#0088cc,#0044cc);
background-image:-o-linear-gradient(top,#0088cc,#0044cc);
background-image:linear-gradient(tobottom,#0088cc,#0044cc);
background-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.1)rgba(0,0,0,0.1)rgba(0,0,0,0.25);
*background-color:#0044cc;
/*DarkenIE7buttonsbydefaultsotheystandoutmoregiventheywon'thaveborders*/
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
color:#fff;
text-shadow:0-1px0rgba(0,0,0,0.25);
}
.datepickertd.active:hover,
.datepickertd.active:hover:hover,
.datepickertd.active:focus,
.datepickertd.active:hover:focus,
.datepickertd.active:active,
.datepickertd.active:hover:active,
.datepickertd.active.active,
.datepickertd.active:hover.active,
.datepickertd.active.disabled,
.datepickertd.active:hover.disabled,
.datepickertd.active[disabled],
.datepickertd.active:hover[disabled]{
color:#ffffff;
background-color:#0044cc;
*background-color:#003bb3;
}
.datepickertd.active:active,
.datepickertd.active:hover:active,
.datepickertd.active.active,
.datepickertd.active:hover.active{
background-color:#003399\9;
}
.datepickertdspan{
display:block;
width:47px;
height:54px;
line-height:54px;
float:left;
margin:2px;
cursor:pointer;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.datepickertdspan:hover{
background:#eeeeee;
}
.datepickertdspan.active{
color:#ffffff;
background-color:#006dcc;
background-image:-moz-linear-gradient(top,#0088cc,#0044cc);
background-image:-webkit-gradient(linear,00,0100%,from(#0088cc),to(#0044cc));
background-image:-webkit-linear-gradient(top,#0088cc,#0044cc);
background-image:-o-linear-gradient(top,#0088cc,#0044cc);
background-image:linear-gradient(tobottom,#0088cc,#0044cc);
background-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.1)rgba(0,0,0,0.1)rgba(0,0,0,0.25);
*background-color:#0044cc;
/*DarkenIE7buttonsbydefaultsotheystandoutmoregiventheywon'thaveborders*/
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
color:#fff;
text-shadow:0-1px0rgba(0,0,0,0.25);
}
.datepickertdspan.active:hover,
.datepickertdspan.active:focus,
.datepickertdspan.active:active,
.datepickertdspan.active.active,
.datepickertdspan.active.disabled,
.datepickertdspan.active[disabled]{
color:#ffffff;
background-color:#0044cc;
*background-color:#003bb3;
}
.datepickertdspan.active:active,
.datepickertdspan.active.active{
background-color:#003399\9;
}
.datepickertdspan.old{
color:#999999;
}
.datepickerth.switch{
width:145px;
}
.datepickerth.next,
.datepickerth.prev{
font-size:21px;
}
.datepickertheadtr:first-childth{
cursor:pointer;
}
.datepickertheadtr:first-childth:hover{
background:#eeeeee;
}
.input-append.date.add-oni,
.input-prepend.date.add-oni{
display:block;
cursor:pointer;
width:16px;
height:16px;
}
/*=========================================================
*bootstrap-datepicker.js
*http://www.eyecon.ro/bootstrap-datepicker
*=========================================================
*Copyright2012StefanPetre
*
*LicensedundertheApacheLicense,Version2.0(the"License");
*youmaynotusethisfileexceptincompliancewiththeLicense.
*YoumayobtainacopyoftheLicenseat
*
*http://www.apache.org/licenses/LICENSE-2.0
*
*Unlessrequiredbyapplicablelaworagreedtoinwriting,software
*distributedundertheLicenseisdistributedonan"ASIS"BASIS,
*WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.
*SeetheLicenseforthespecificlanguagegoverningpermissionsand
*limitationsundertheLicense.
*=========================================================*/
!function($){
//Pickerobject
varDatepicker=function(element,options){
this.element=$(element);
this.format=DPGlobal.parseFormat(options.format||this.element.data('date-format')||'yyyy-mm-dd');
this.picker=$(DPGlobal.template)
.appendTo('body')
.on({
click:$.proxy(this.click,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),
keyup:$.proxy(this.update,this)
});
}else{
if(this.component){
this.component.on('click',$.proxy(this.show,this));
}else{
this.element.on('click',$.proxy(this.show,this));
}
}
this.minViewMode=options.minViewMode||this.element.data('date-minviewmode')||0;
if(typeofthis.minViewMode==='string'){
switch(this.minViewMode){
case'months':
this.minViewMode=1;
break;
case'years':
this.minViewMode=2;
break;
default:
this.minViewMode=0;
break;
}
}
this.viewMode=options.viewMode||this.element.data('date-viewmode')||0;
if(typeofthis.viewMode==='string'){
switch(this.viewMode){
case'months':
this.viewMode=1;
break;
case'years':
this.viewMode=2;
break;
default:
this.viewMode=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.show();
this.height=this.component?this.component.outerHeight():this.element.outerHeight();
this.place();
$(window).on('resize',$.proxy(this.place,this));
if(e){
e.stopPropagation();
e.preventDefault();
}
if(!this.isInput){
}
varthat=this;
$(document).on('mousedown',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).off('resize',this.place);
this.viewMode=this.startViewMode;
this.showMode();
if(!this.isInput){
$(document).off('mousedown',this.hide);
}
//this.set();
this.element.trigger({
type:'hide',
date:this.date
});
},
set:function(){
varformated=DPGlobal.formatDate(this.date,this.format);
if(!this.isInput){
if(this.component){
this.element.find('input').prop('value',formated);
}
this.element.data('date',formated);
}else{
this.element.prop('value',formated);
}
},
setValue:function(newDate){
if(typeofnewDate==='string'){
this.date=DPGlobal.parseDate(newDate,this.format);
}else{
this.date=newDate(newDate);
}
this.set();
this.viewDate=newDate(this.date.getFullYear(),this.date.getMonth(),1,0,0,0,0);
this.fill();
},
place:function(){
varoffset=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(
typeofnewDate==='string'?newDate:(this.isInput?this.element.prop('value'):this.element.data('date')),
this.format
);
this.viewDate=newDate(this.date.getFullYear(),this.date.getMonth(),1,0,0,0,0);
this.fill();
},
fillDow:function(){
vardowCnt=this.weekStart;
varhtml='<tr>';
while(dowCnt<this.weekStart+7){
html+='<thclass="dow">'+DPGlobal.dates.daysMin[(dowCnt++)%7]+'</th>';
}
html+='</tr>';
this.picker.find('.datepicker-daysthead').append(html);
},
fillMonths:function(){
varhtml='';
vari=0
while(i<12){
html+='<spanclass="month">'+DPGlobal.dates.monthsShort[i++]+'</span>';
}
this.picker.find('.datepicker-monthstd').append(html);
},
fill:function(){
vard=newDate(this.viewDate),
year=d.getFullYear(),
month=d.getMonth(),
currentDate=this.date.valueOf();
this.picker.find('.datepicker-daysth:eq(1)')
.text(DPGlobal.dates.months[month]+''+year);
varprevMonth=newDate(year,month-1,28,0,0,0,0),
day=DPGlobal.getDaysInMonth(prevMonth.getFullYear(),prevMonth.getMonth());
prevMonth.setDate(day);
prevMonth.setDate(day-(prevMonth.getDay()-this.weekStart+7)%7);
varnextMonth=newDate(prevMonth);
nextMonth.setDate(nextMonth.getDate()+42);
nextMonth=nextMonth.valueOf();
varhtml=[];
varclsName,
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&&prevY===year)||prevY<year){
clsName+='old';
}elseif((prevM>month&&prevY===year)||prevY>year){
clsName+='new';
}
if(prevMonth.valueOf()===currentDate){
clsName+='active';
}
html.push('<tdclass="day'+clsName+'">'+prevMonth.getDate()+'</td>');
if(prevMonth.getDay()===this.weekEnd){
html.push('</tr>');
}
prevMonth.setDate(prevMonth.getDate()+1);
}
this.picker.find('.datepicker-daystbody').empty().append(html.join(''));
varcurrentYear=this.date.getFullYear();
varmonths=this.picker.find('.datepicker-months')
.find('th:eq(1)')
.text(year)
.end()
.find('span').removeClass('active');
if(currentYear===year){
months.eq(this.date.getMonth()).addClass('active');
}
html='';
year=parseInt(year/10,10)*10;
varyearCont=this.picker.find('.datepicker-years')
.find('th:eq(1)')
.text(year+'-'+(year+9))
.end()
.find('td');
year-=1;
for(vari=-1;i<11;i++){
html+='<spanclass="year'+(i===-1||i===10?'old':'')+(currentYear===year?'active':'')+'">'+year+'</span>';
year+=1;
}
yearCont.html(html);
},
click:function(e){
e.stopPropagation();
e.preventDefault();
vartarget=$(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);
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'?-1:1)
);
this.fill();
this.set();
break;
}
break;
case'span':
if(target.is('.month')){
varmonth=target.parent().find('span').index(target);
this.viewDate.setMonth(month);
}else{
varyear=parseInt(target.text(),10)||0;
this.viewDate.setFullYear(year);
}
if(this.viewMode!==0){
this.date=newDate(this.viewDate);
this.element.trigger({
type:'changeDate',
date:this.date,
viewMode:DPGlobal.modes[this.viewMode].clsName
});
}
this.showMode(-1);
this.fill();
this.set();
break;
case'td':
if(target.is('.day')&&!target.is('.disabled')){
varday=parseInt(target.text(),10)||1;
varmonth=this.viewDate.getMonth();
if(target.is('.old')){
month-=1;
}elseif(target.is('.new')){
month+=1;
}
varyear=this.viewDate.getFullYear();
this.date=newDate(year,month,day,0,0,0,0);
this.viewDate=newDate(year,month,Math.min(28,day),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).show();
}
};
$.fn.datepicker=function(option,val){
returnthis.each(function(){
var$this=$(this),
data=$this.data('datepicker'),
options=typeofoption==='object'&&option;
if(!data){
$this.data('datepicker',(data=newDatepicker(this,$.extend({},$.fn.datepicker.defaults,options))));
}
if(typeofoption==='string')data[option](val);
});
};
$.fn.datepicker.defaults={
onRender:function(date){
return'';
}
};
$.fn.datepicker.Constructor=Datepicker;
varDPGlobal={
modes:[
{
clsName:'days',
navFnc:'Month',
navStep:1
},
{
clsName:'months',
navFnc:'FullYear',
navStep:1
},
{
clsName:'years',
navFnc:'FullYear',
navStep:10
}],
dates:{
days:["周日","周一","周二","周三","周四","周五","周六","周日"],
daysShort:["日","一","二","三","四","五","六","七"],
daysMin:["日","一","二","三","四","五","六","七"],
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthsShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
},
isLeapYear:function(year){
return(((year%4===0)&&(year%100!==0))||(year%400===0))
},
getDaysInMonth:function(year,month){
return[31,(DPGlobal.isLeapYear(year)?29:28),31,30,31,30,31,31,30,31,30,31][month]
},
parseFormat:function(format){
varseparator=format.match(/[.\/\-\s].*?/),
parts=format.split(/\W+/);
if(!separator||!parts||parts.length===0){
thrownewError("Invaliddateformat.");
}
return{separator:separator,parts:parts};
},
parseDate:function(date,format){
varparts=date.split(format.separator),
date=newDate(),
val;
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
if(parts.length===format.parts.length){
varyear=date.getFullYear(),day=date.getDate(),month=date.getMonth();
for(vari=0,cnt=format.parts.length;i<cnt;i++){
val=parseInt(parts[i],10)||1;
switch(format.parts[i]){
case'dd':
case'd':
day=val;
date.setDate(val);
break;
case'mm':
case'm':
month=val-1;
date.setMonth(val-1);
break;
case'yy':
year=2000+val;
date.setFullYear(2000+val);
break;
case'yyyy':
year=val;
date.setFullYear(val);
break;
}
}
date=newDate(year,month,day,0,0,0);
}
returndate;
},
formatDate:function(date,format){
varval={
d:date.getDate(),
m:date.getMonth()+1,
yy:date.getFullYear().toString().substring(2),
yyyy:date.getFullYear()
};
val.dd=(val.d<10?'0':'')+val.d;
val.mm=(val.m<10?'0':'')+val.m;
vardate=[];
for(vari=0,cnt=format.parts.length;i<cnt;i++){
date.push(val[format.parts[i]]);
}
returndate.join(format.separator);
},
headTemplate:'<thead>'+
'<tr>'+
'<thclass="prev">‹</th>'+
'<thcolspan="5"class="switch"></th>'+
'<thclass="next">›</th>'+
'</tr>'+
'</thead>',
contTemplate:'<tbody><tr><tdcolspan="7"></td></tr></tbody>'
};
DPGlobal.template='<divclass="datepickerdropdown-menu">'+
'<divclass="datepicker-days">'+
'<tableclass="table-condensed">'+
DPGlobal.headTemplate+
'<tbody></tbody>'+
'</table>'+
'</div>'+
'<divclass="datepicker-months">'+
'<tableclass="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
'</table>'+
'</div>'+
'<divclass="datepicker-years">'+
'<tableclass="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
'</table>'+
'</div>'+
'</div>';
}(window.jQuery);
以上所述是小编给大家介绍的BootStrap中Datepicker控件带中文的js文件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！