前端jquery日期插件
分享一个前端jquery日期插件，方便自己后面需要时查找使用。
效果：
1、html demo。
时间控件
点击下方输入框
2、 dateSelect.css
.mobileSelect{
position: relative;
z-index: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.mobileSelect .grayLayer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #eee;
background: rgba(0, 0, 0, 0.7);
z-index: 888;
display: block;
}
.mobileSelect .content {
width: 100%;
display: block;
position: fixed;
z-index: 889;
color: black;
-webkit-transition: all 0.4s;
transition: all 0.4s;
bottom: -350px;
left:0;
background: white;
}
.mobileSelect .content .fixWidth {
width: 90%;
margin: 0 auto;
position: relative;
}
.mobileSelect .content .fixWidth:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mobileSelect .content .btnBar {
border-bottom: 1px solid #DCDCDC;
font-size: 15px;
height: 45px;
position: relative;
text-align: center;
line-height: 45px;
}
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {
height: 45px;
width: 55px;
cursor: pointer;
position: absolute;
top: 0;
}
.mobileSelect .content .btnBar .cancel {
left: 0;
color: #666;
}
.mobileSelect .content .btnBar .ensure {
right: 0;
color: #1e83d3;
}
.mobileSelect .content .btnBar .title {
font-size: 15px;
}
.mobileSelect .content .panel:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mobileSelect .content .panel .wheels {
width: 100%;
height: 200px;
overflow: hidden;
}
.mobileSelect .content .panel .wheel {
position: relative;
z-index: 0;
float: left;
width: 50%;
height: 200px;
overflow: hidden;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.mobileSelect .content .panel .wheel .selectContainer {
display: block;
text-align: center;
-webkit-transition: -webkit-transform 0.18s ease-out;
transition: -webkit-transform 0.18s ease-out;
transition: transform 0.18s ease-out;
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
}
.mobileSelect .content .panel .wheel .selectContainer li {
font-size: 20px;
display: block;
height: 40px;
line-height: 40px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mobileSelect .content .panel .selectLine {
height: 40px;
width: 100%;
position: absolute;
top: 80px;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
}
.mobileSelect .content .panel .shadowMask {
position: absolute;
top: 0;
width: 100%;
height: 200px;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
opacity: 0.9;
pointer-events: none;
}
.mobileSelect-show {
opacity: 1;
z-index: 10000;
visibility: visible;
}
.mobileSelect-show .content {
bottom: 0;
}
3、dateSelect.js
$.extend({
//年月日
selectYY_MM_DD: function(g, a, k) {
var d, e, b ;
b = new Date;
var starYear = b.getFullYear() - 55 ;//最小选项
var maxYear = b.getFullYear()+5;//最大的选项
d = starYear; e = maxYear;
b = [10,0,0];
var dateVal = $(g).val(); //获取输入框的值
if( dateVal != undefined && dateVal != ""){
dateVal = dateVal.split("-");
//设置默认选择的项
dateVal && 3 == dateVal.length ? b = [dateVal[0] - starYear , dateVal[1] -1 , dateVal[2] -1 ] : b = b;
} else{
var nowDate = new Date;
b=[nowDate.getFullYear()-starYear,nowDate.getMonth(),nowDate.getDate()-1]
}
new MobileSelect({
trigger: g,
title: '选择时间',
wheels: function(a, b) {
for (var d = [{ data: [] }]; a <= b; a++) {
for (var e = { id: a, value: a , childs: [] }, c = 1; 12 >= c; c++) {
for (var h = [], g = (1 == c || 3 == c || 5 == c || 7 == c || 8 == c || 10 == c || 12 == c) ? 31 : 2 == c ? 0 == a % 4 && 0 != a % 100 ? 29 : 0 == a % 400 ? 29 : 28 : 30, f = 1; f <= g; f++)
h.push({ id: f < 10 ? '0' + f : f, value: f < 10 ? '0' + f : f });
e.childs.push({ id: c < 10 ? '0' + c : c, value: c < 10 ? '0' + c : c , childs: h < 10 ? '0' + h :h })
}
d[0].data.push(e)
}
return d
}(d, e),
position: b,
callback: function(a, b) {
if(k != undefined){
k({
year: b[0].id,
month: b[1].id,
day: b[2].id
})
}
}
})
}
//年月
,selectDate_YM: function(el, cbFn) {
/*创建日期数据*/
var createDateData = function(info) {
var dateData = [{
data: []
}];
var childData = [];
for (var j = 1; j <= 12; j++) {
if (j < 10) {
childData.push({
id: '0' + j,
value: '0' + j
});
} else {
childData.push({
id: j,
value: j
});
}
}
for (var i = info.startYear; i <= info.maxYear; i++) {
dateData[0].data.push({
id: i,
value: i,
childs: childData
});
}
return dateData;
};
var info = {},
now = new Date();
info.nowYear = now.getFullYear();
info.nowMonth = (now.getMonth() + 1);
info.startYear = info.nowYear - 60; //最小的选项
info.maxYear = info.nowYear + 3; //最大的选项
var dateVal = $(el).val(); //获取输入框的值
var tempos = [10, 0];
if (dateVal != undefined && dateVal != "") {
dateVal = dateVal.split("-");
//设置默认选择的项
dateVal && 2 == dateVal.length ? tempos = [dateVal[0] - info.startYear, dateVal[1] - 1] : tempos = tempos;
}
//年月 带有至今选项
var selectDate_YM = new MobileSelect({
trigger: el,
title: '选择年月',
wheels: createDateData(info),
position: tempos,
//设置默认选择的项
callback: function(item, data) {
if (data.length > 1) {
var dateInfo = {
year: data[0].id,
month: data[1].id,
};
} else {
var dateInfo = {
year: data[0].id,
};
}
cbFn && cbFn(dateInfo);
}
});
}
//专门用于结束时间，有至今选项
,
selectDate_YM_END: function(el, cbFn) {
/*创建日期数据*/
var createDateData = function(info) {
var dateData = [{
data: []
}];
var childData = [];
for (var j = 1; j <= 12; j++) {
if (j < 10) {
childData.push({
id: '0' + j,
value: '0' + j
});
} else {
childData.push({
id: j,
value: j
});
}
}
for (var i = info.startYear; i <= info.maxYear; i++) {
dateData[0].data.push({
id: i,
value: i,
childs: childData
});
}
//如果是结束日期的 加上至今选项
if ($(el).data("type") == "end") dateData[0].data.push({
id: info.maxYear + 1,
value: "至今"
});
return dateData;
};
var info = {},
now = new Date();
info.nowYear = now.getFullYear();
info.nowMonth = (now.getMonth() + 1);
info.startYear = info.nowYear - 60; //最小的选项
info.maxYear = info.nowYear; //最大的选项
var dateVal = $(el).val(); //获取输入框的值
var tempos = [10, 0];
if (dateVal != undefined && dateVal != "") {
if (dateVal == "至今") {
tempos = [info.maxYear - info.startYear + 1];
} else {
dateVal = dateVal.split("-");
//设置默认选择的项
dateVal && 2 == dateVal.length ? tempos = [dateVal[0] - info.startYear, dateVal[1] - 1] : tempos = tempos;
}
}
var selectDate_YM_END = new MobileSelect({
trigger: el,
title: '选择年月',
wheels: createDateData(info),
position: tempos,
//设置默认选择的项
callback: function(item, data) {
if (data.length > 1) {
var dateInfo = {
year: data[0].id,
month: data[1].id,
};
} else {
var dateInfo = {
year: data[0].id,
};
}
cbFn && cbFn(dateInfo);
}
});
}
//年
, selectDate_Y: function(el, cbFn) {
/*创建日期数据*/
var createDateData = function(info) {
var dateData = [{
data: []
}];
for (var i = info.startYear; i <= info.maxYear; i++) {
dateData[0].data.push({
id: i,
value: i
});
}
return dateData;
};
var info = {},
now = new Date();
info.nowYear = now.getFullYear();
info.nowMonth = (now.getMonth() + 1);
info.startYear = info.nowYear - 60; //最小的选项
info.maxYear = info.nowYear ; //最大的选项
var dateVal = $(el).val(); //获取输入框的值
var tempos = [info.maxYear - info.startYear , 0];//设置初始值
if (dateVal != undefined && dateVal != "") {
dateVal = dateVal.split("-");
//设置默认选择的项
dateVal && 1 == dateVal.length ? tempos = [dateVal[0] - info.startYear] : tempos = tempos;
}
var selectDate_Y = new MobileSelect({
trigger: el,
title: '选择年份',
wheels: createDateData(info),
position: tempos,
//设置默认选择的项
callback: function(item, data) {
if (data.length > 1) {
var dateInfo = {
year: data[0].id,
};
} else {
var dateInfo = {
year: data[0].id,
};
}
cbFn && cbFn(dateInfo);
}
});
}
//时分
,select_HH_MM: function(el, cbFn) {
/*创建日期数据*/
var createDateData = function(info) {
var dateData = [{
data: []
}];
var childData = [];
//分钟
for (var j = 0; j <= 59; j++) {
if (j < 10) {
childData.push({
id: '0' + j,
value: '0' + j
});
} else {
childData.push({
id: j,
value: j
});
}
}
//小时
for (var i = info.startHour; i <= info.maxHour; i++) {
var pra = i < 10 ? '0' + i: i
dateData[0].data.push({ id: pra, value: pra, childs: childData });
}
return dateData;
};
var info = {};
info.startHour = 0;
info.maxHour = 23;
info.startMinute = 0; //最小的选项
info.maxMinute = 59; //最大的选项
var designTimeVal = $(el).val(); //获取输入框的值
var tempos = [0, 0];
if (designTimeVal != undefined && designTimeVal != "") {
designTimeVal = designTimeVal.split(":");
//设置默认选择的项
designTimeVal && 2 == designTimeVal.length ? tempos = [designTimeVal[0] - info.startHour, designTimeVal[1]] : tempos = tempos;
}
var select_HH_MM = new MobileSelect({
trigger: el,
title: '选择时分',
connector: ':',
wheels: createDateData(info),
position: tempos,
//设置默认选择的项
callback: function(item, data) {
if (data.length > 1) {
var dateInfo = {
year: data[0].id,
month: data[1].id,
};
} else {
var dateInfo = {
year: data[0].id,
};
}
cbFn && cbFn(dateInfo);
}
});
}
//时分秒
,select_HH_MM_SS: function(el, cbFn) {
/*创建日期数据*/
var createDateData = function(info) {
var dateData = [{
data: []
}];
var childData = [] , childDatass = [];
//秒钟
for (var j = 0; j <= 59; j++) {
if (j < 10) {
childDatass.push({
id: '0' + j,
value: '0' + j
});
} else {
childDatass.push({
id: j,
value: j
});
}
}
//分钟
for (var j = 0; j <= 59; j++) {
if (j < 10) {
childData.push({
id: '0' + j,
value: '0' + j,
childs: childDatass
});
} else {
childData.push({
id: j,
value: j,
childs: childDatass
});
}
}
//小时
for (var i = info.startHour; i <= info.maxHour; i++) {
var pra = i < 10 ? '0' + i: i
dateData[0].data.push({ id: pra, value: pra, childs: childData });
}
return dateData;
};
var info = {};
info.startHour = 0;
info.maxHour = 23;
info.startMinute = 0; //最小的选项
info.maxMinute = 59; //最大的选项
var designTimeVal = $(el).val(); //获取输入框的值
var tempos = [0, 0 , 0];
if (designTimeVal != undefined && designTimeVal != "") {
designTimeVal = designTimeVal.split(":");
//设置默认选择的项
designTimeVal && 3 == designTimeVal.length ? tempos = [designTimeVal[0] - info.startHour, designTimeVal[1] ,designTimeVal[2]] : tempos = tempos;
}else{
var nowDate = new Date;
tempos=[nowDate.getFullYear(),nowDate.getMonth() + 1,nowDate.getDate()]
}
var select_HH_MM = new MobileSelect({
trigger: el,
title: '选择时分秒',
connector: ':',
wheels: createDateData(info),
position: tempos,
//设置默认选择的项
callback: function(item, data) {
if (data.length > 1) {
var dateInfo = {
year: data[0].id,
month: data[1].id,
};
} else {
var dateInfo = {
year: data[0].id,
};
}
cbFn && cbFn(dateInfo);
}
});
}
});mobileSelect.js
(function() {
function getClass(dom,string) {
return dom.getElementsByClassName(string);
}
//构造器
function MobileSelect(config) {
this.mobileSelect;
this.wheelsData = config.wheels;
this.jsonType = false;
this.cascadeJsonData = [];
this.displayJson = [];
this.cascade = false;
this.startY;
this.moveEndY;
this.moveY;
this.oldMoveY;
this.offset = 0;
this.offsetSum = 0;
this.oversizeBorder;
this.curDistance = [];
this.clickStatus = false;
this.isPC = true;
this.init(config);
}
MobileSelect.prototype = {
constructor: MobileSelect,
init: function(config){
var _this = this;
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
_this.checkDataType();
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
_this.trigger = document.querySelector(config.trigger);
if(!_this.trigger){
console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
return false;
}
_this.wheel = getClass(_this.mobileSelect,'wheel');
_this.slider = getClass(_this.mobileSelect,'selectContainer');
_this.wheels = _this.mobileSelect.querySelector('.wheels');
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
_this.popUp = _this.mobileSelect.querySelector('.content');
_this.callback = config.callback ? config.callback : function(){};
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};
_this.initPosition = config.position ? config.position : [];
_this.titleText = config.title ? config.title : '';
_this.connector = config.connector != undefined && config.connector != "" ? config.connector : '-';//拼接值的连接符
_this.trigger.style.cursor='pointer';
_this.setStyle(config);
_this.setTitle(_this.titleText);
_this.checkIsPC();
_this.checkCascade();
if (_this.cascade) {
_this.initCascade();
}
//定位 初始位置
if(_this.initPosition.length < _this.slider.length){
var diff = _this.slider.length - _this.initPosition.length;
for(var i=0; i'+
''+
''+
''+ cancelText +''+
''+
''+ ensureText +''+
''+
''+
''+
''+
''+
''+
'年月日'+
''+
''+
''+
' - ';
for(var j=0; j<_this.displayJson[i].length; j++){
//行
tempHTML += '
- '+_this.displayJson[i][j][_this.keyMap.value]+' '; } tempHTML += '