BootStrap中Datepicker控件带中文的js文件
发布时间：2020-12-18 00:50:38 所属栏目：安全 来源：网络整理
导读：bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的。本文给大家介绍bootstrap datepicker带中文的js文件。 0) {$(".datepicker").datepicker({language: "zh-CN",autoclose: true,//选中之后自动隐藏日期选择框clearBtn: true,//清
|
bootstrap-datepicker 是一个非常优秀的时间选择插件，默认是英文显示日期的。本文给大家介绍bootstrap datepicker带中文的js文件。 0) {
$(".datepicker").datepicker({
language: "zh-CN",autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: true,//清除按钮
todayBtn: true,//今日按钮
format: "yyyy-mm-dd"//日期格式
});
}
以下是datepicker的css文件和js代码 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 {
background: #eeeeee;
cursor: pointer;
}
.datepicker td.day.disabled {
color: #eeeeee;
}
.datepicker td.old,.datepicker td.new {
color: #999999;
}
.datepicker td.active,.datepicker td.active:hover {
color: #ffffff;
background-color: #006dcc;
background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
background-image: -webkit-linear-gradient(top,#0044cc);
background-image: -o-linear-gradient(top,#0044cc);
background-image: linear-gradient(to bottom,#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.1) rgba(0,0.25);
*background-color: #0044cc;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0.25);
}
.datepicker td.active:hover,.datepicker td.active:hover:hover,.datepicker td.active:focus,.datepicker td.active:hover:focus,.datepicker td.active:active,.datepicker td.active:hover:active,.datepicker td.active.active,.datepicker td.active:hover.active,.datepicker td.active.disabled,.datepicker td.active:hover.disabled,.datepicker td.active[disabled],.datepicker td.active:hover[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
.datepicker td.active:active,.datepicker td.active:hover.active {
background-color: #003399 9;
}
.datepicker td span {
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;
}
.datepicker td span:hover {
background: #eeeeee;
}
.datepicker td span.active {
color: #ffffff;
background-color: #006dcc;
background-image: -moz-linear-gradient(top,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;
background-color: #0044cc;
*background-color: #003bb3;
}
.datepicker td span.active:active,.datepicker td span.active.active {
background-color: #003399 9;
}
.datepicker td span.old {
color: #999999;
}
.datepicker th.switch {
width: 145px;
}
.datepicker th.next,.datepicker th.prev {
font-size: 21px;
}
.datepicker thead tr:first-child th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover {
background: #eeeeee;
}
.input-append.date .add-on i,.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
/* =========================================================
* bootstrap-datepicker.js
* http://www.eyecon.ro/bootstrap-datepicker
* =========================================================
* Copyright 2012 Stefan Petre
*
* Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,software
* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
// Picker object
var Datepicker = 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,keyup: $.proxy(this.update,this)
});
} else {
if (this.component){
this.component.on('click',$.proxy(this.show,this));
} else {
this.element.on('click',this));
}
}
this.minViewMode = options.minViewMode||this.element.data('date-minviewmode')||0;
if (typeof this.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 (typeof this.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) {
}
var that = 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',set: function() {
var formated = 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 (typeof newDate === '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);
this.fill();
},place: function(){
var offset = 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(
typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),this.format
);
this.viewDate = new Date(this.date.getFullYear(),fillDow: function(){
var dowCnt = this.weekStart;
var html = ' ';
year += 1;
}
yearCont.html(html);
},click: function(e) {
e.stopPropagation();
e.preventDefault();
var target = $(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')) {
var month = target.parent().find('span').index(target);
this.viewDate.setMonth(month);
} else {
var year = parseInt(target.text(),10)||0;
this.viewDate.setFullYear(year);
}
if (this.viewMode !== 0) {
this.date = new Date(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')){
var day = parseInt(target.text(),10)||1;
var month = this.viewDate.getMonth();
if (target.is('.old')) {
month -= 1;
} else if (target.is('.new')) {
month += 1;
}
var year = this.viewDate.getFullYear();
this.date = new Date(year,month,day,0);
this.viewDate = new Date(year,Math.min(28,day),0);
this.fill();
this.set();
this.element.trigger({
type: 'changeDate',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 ) {
return this.each(function () {
var $this = $(this),data = $this.data('datepicker'),options = typeof option === 'object' && option;
if (!data) {
$this.data('datepicker',(data = new Datepicker(this,$.extend({},$.fn.datepicker.defaults,options))));
}
if (typeof option === 'string') data[option](val);
});
};
$.fn.datepicker.defaults = {
onRender: function(date) {
return '';
}
};
$.fn.datepicker.Constructor = Datepicker;
var DPGlobal = {
modes: [
{
clsName: 'days',navFnc: 'Month',navStep: 1
},{
clsName: 'months',navFnc: 'FullYear',{
clsName: 'years',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][month]
},parseFormat: function(format){
var separator = format.match(/[./-s].*?/),parts = format.split(/W+/);
if (!separator || !parts || parts.length === 0){
throw new Error("Invalid date format.");
}
return {separator: separator,parts: parts};
},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.getFullYear(),day = date.getDate(),month = date.getMonth();
for (var i=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 = new Date(year,0);
}
return date;
},formatDate: function(date,format){
var val = {
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;
var date = [];
for (var i=0,cnt = format.parts.length; i < cnt; i++) {
date.push(val[format.parts[i]]);
}
return date.join(format.separator);
},headTemplate: ''+
' | '+
' | '+
'',contTemplate: ' | '+
'
'+
' ';
}( window.jQuery );
以上所述是小编给大家介绍的BootStrap中Datepicker控件带中文的js文件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! | ||||
相关内容
- scala – `sbt package`会产生巨大的战争档案 – 如何让它更
- scala – 什么是IntelliJ IDEA导入’xxx-build’模块？
- 一个基于Angular4+Bootstrap4+Scss的后台管理系统界面
- 使用垂直选择VIM添加新行
- 当reloadOnSearch为false时,$location.search上的AngularJs
- angular的canvas画图例子
- 混合Scala和Java：如何获得通用类型的构造函数参数吧？
- Bootstrap学习笔记 - 排版
- shell – 如何通过Rust中的stdin将输入发送到程序
- scala – 未经过滤：什么时候选择netty