html 出生年月日插件,日期插件

介绍

图片.png

使用

日期选择器(jQuery)

var nowDate = new Date();

var prevDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate()-1)

var nextDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate())

$('#m-input').szInputDate('init',{

css:{},

startDate:prevDate, // 开始时间

endDate:nextDate // 截止时间

});

// $('#m-input').szInputDate('disabled'); // 禁用

// $('#m-input').szInputDate('unDisabled'); // 启用

// $('#m-input').szInputDate('getDate'); // 获得选择值Date

// $('#m-input').szInputDate('getStringValue '); // 获得选择值String(2017-02-08)

代码

;(function($) {

/*

* input 日期插件

* config:{

*

* css 样式

* disabled 是否禁用 false

* defaultDate 默认显示时间 now Date()

* startDate 起始时间 null

* endDate 截至时间 null

*

* }

* methods:[

*

* init, // 初始化

* disabled, // 禁用

* unDisabled, // 启用

* getDate, // 获得选择值Date

* getStringValue // 获得选择值String(2017-02-08)

*

* ]

* */

$.fn.szInputDate = function(method) {

var config = {

css:{

height:'40px',

width:'160px',

lineHeight:'40px',

borderRadius:'4px'

},

disabled:false,

defaultDate:new Date(),

startDate:null,

endDate:null

};

var setting;

var untils = {

prefixInteger: function(num, n) {

return (Array(n).join(0) + num).slice(-n);

}

};

var methods = {

init: function ( options ) {

setting = $.extend({}, config , options);

return this.each(function() {

var $this = $(this),

data = $this.data('init');

if (!data) {

$(this).data({

init: true

});

}

methods['create'].call($(this), setting)

});

},

disabled:function () {

if(!this.data('init')){

$.error('Must fist use method init on jQuery.tooltip');

return null;

};

this.attr('disabled',true);

return this;

},

unDisabled:function () {

if(!this.data('init')){

$.error('Must fist use method init on jQuery.tooltip');

return null;

};

this.attr('disabled',false);

return this;

},

getDate: function () {

if(!this.data('init')){

$.error('Must fist use method init on jQuery.tooltip');

return null;

};

return this.data('selectDate');

},

getStringValue: function () {

if(!this.data('init')){

$.error('Must fist use method init on jQuery.tooltip');

return null;

};

return this.find('.showDate').text();

},

/**

* 更新展示——选择日期

* @param _updateDate

*/

updateSelectDisplay:function (_updateDate ) {

var uYear = _updateDate.getFullYear(); // 刷新年份

var uMonth = _updateDate.getMonth(); // 月份 0表示1月

var uMonth_ = uMonth+1; // 月份 1表示1月

var uDate = _updateDate.getDate();

this.find('.showDate').empty().append(''+uYear+'-'+

''+untils.prefixInteger(uMonth_,2)+'-' +

''+untils.prefixInteger(uDate,2)+'');

},

/**

* 更新展示——展示日期

* @param _updateDate

*/

updateShowDisplay:function ( _updateDate ) {

var uYear = _updateDate.getFullYear(); // 刷新年份

var uMonth = _updateDate.getMonth(); // 月份 0表示1月

var uMonth_ = uMonth+1; // 月份 1表示1月

var uDate = _updateDate.getDate();

this.find('.datePanel').empty().append('

'+

'

'

'+(uYear+'年'+untils.prefixInteger(uMonth_,2)+'月')+'

'+

'

'

Su '+

'

Mo '+

'

Tu '+

'

We'+

'

Th'+

'

Fr'+

'

Sa'+

'

');

var uAllDay = new Date(uYear, uMonth_, 0).getDate(); // 月份总天数

var uFirstDay = new Date(uYear, uMonth, 1).getDay(); //月份一号星期几 0表示星期日

var $tbody = this.find('tbody').empty();

var uArr = [];

for(var i=0 ; i

uArr.push('')

}

for(var j=0 ; j

uArr.push(j+1)

}

var $td;

for(var z=0 ; z

if(z % 7 == 0){

$tr = $('

');

$tr.appendTo($tbody)

}

if(typeof uArr[z] == "string"){

$('

').appendTo($tr)

}else{

var $td = $('

').appendTo($tr).attr({

'data-year':uYear,

'data-month':uMonth,

'data-date':uArr[z],

}).append(''+uArr[z]+'');

}

}

var selectDate= this.data('selectDate');

var sYear = selectDate.getFullYear();

var sMonth = selectDate.getMonth();

var sDate = selectDate.getDate();

if(uMonth == sMonth && uYear == sYear ){

this.find('td[data-date='+sDate+']').addClass(' dateSelect')

}

},

clearNoAllowSelectClass:function (setting) {

var _this = this;

// 判断startDate/endDate

if(!!setting.startDate && setting.startDate > _this.data('selectDate')){

$.error('create error : 开始时间大于默认时间');

}

if(!!setting.endDate && setting.endDate < _this.data('selectDate')){

$.error('create error : 截至时间小于默认时间');

}

var $tds = _this.find('td[data-date]');

$tds.each(function (index,value) {

var $this = $(value);

if((!!setting.startDate && (new Date($this.attr('data-year'),$this.attr('data-month'),$this.attr('data-date')) < setting.startDate))

|| (!!setting.endDate && (new Date($this.attr('data-year'),$this.attr('data-month'),$this.attr('data-date')) > setting.endDate))){

$this.children().removeClass('allowSelectDate')

}

})

},

create: function (setting) {

var _defailtDate = setting.defaultDate;

var defaultDate = new Date(_defailtDate.getFullYear(),_defailtDate.getMonth(),_defailtDate.getDate());

var _this = this;

_this.empty().append('

.data({defaultDate:defaultDate,selectDate:defaultDate,showDate:defaultDate});

if(_this.data('init')){

// already init

// set css

_this.addClass('m-inputDate').css(setting.css);

_this.find('.datePanel').css({

top:this.height()+'px'

})

}else{

$.error('Must fist use method init on jQuery.tooltip');

return this;

};

methods['updateSelectDisplay'].call(this, defaultDate);

methods['updateShowDisplay'].call(this, defaultDate);

// 更新allowSelect

methods['clearNoAllowSelectClass'].call(this,setting);

if(setting.disabled){

this.attr('disabled',true);

}else{

this.attr('disabled',false);

}

this.off('click')

.on('click','.leftMonth',function () {

var showDate = _this.data('showDate');

var newShowDate = new Date(showDate.getFullYear() , showDate.getMonth() , 0 )

methods['updateShowDisplay'].call(_this, newShowDate);

_this.data({

showDate:newShowDate

})

methods['clearNoAllowSelectClass'].call(_this,setting);

})

.on('click','.rightMonth',function () {

var showDate = _this.data('showDate');

var newShowDate = new Date(showDate.getFullYear() , showDate.getMonth()+2 , 0 )

methods['updateShowDisplay'].call(_this, newShowDate);

_this.data({

showDate:newShowDate

})

methods['clearNoAllowSelectClass'].call(_this,setting);

})

.on('click','td[data-date] a.allowSelectDate',function () {

_this.find('td[data-date]').removeClass('dateSelect');

var newSelect = $(this).parent().addClass('dateSelect');

var newSelectDate = new Date(newSelect.attr('data-year'),newSelect.attr('data-month'),newSelect.attr('data-date'))

methods['updateSelectDisplay'].call(_this, newSelectDate);

_this.data({

selectDate:newSelectDate

})

});

return this;

}

};

if (methods[method]) {

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

} else if (typeof method === 'object' || !method) {

return methods.init.apply(this, arguments);

} else {

$.error('Method' + method + 'does not exist on jQuery.tooltip');

}

};

})(jQuery);

/*

input date 插件样式

*/

:root{

--mInputDateHeight : 30px;

--mInputDateWidth : 140px;

}

.m-inputDate{

display: inline-block;

position: relative;

width: var(--mInputDateWidth);

min-width: 120px;

height: var(--mInputDateHeight);

line-height: calc( var(--mInputDateHeight) - 2px );

vertical-align: middle;

border: 1px solid #a1a1a1;

color: #333;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;;

}

/*showDate*/

.m-inputDate .showDate{

display: block;

position: relative;

width: 100%;

height: 100%;

padding-right: 15px;

text-align: center;

cursor: pointer;

}

.m-inputDate:hover .showDate{

outline: 1px solid rgba(0,160,220,1);

}

.m-inputDate .showDate:after{

content: '';

position: absolute;

top: calc( 50% - 3px );

right: 5px;

border-top: 6px solid #333;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

}

.m-inputDate .showDate em{

padding-left: 3px;

padding-right: 3px;

}

/*datePanel*/

.m-inputDate .datePanel{

display: none;

position: absolute;

top: calc( var(--mInputDateHeight) - 1px );

left: -1px/*calc( (var(--mInputDateWidth) - 200px )/2 )*/;

width: 290px;

padding: 5px;

border:1px solid #dfdfdf;

border-radius: 2px;

background-color: #FFFFFF;

z-index: 200;

}

.m-inputDate:hover .datePanel{

display: block;

}

/*datePanel-title*/

.m-inputDate .leftMonth,.m-inputDate .rightMonth{

width: 30px;

height: 30px;

cursor: pointer;

position: relative;

}

.m-inputDate .leftMonth{

float: left;

}

.m-inputDate .leftMonth:after{

content: '';

position: absolute;

top: 5px;

left: 5px;

border-top: 9px solid transparent;

border-bottom: 9px solid transparent;

border-right: 18px solid #dfdfdf;

}

.m-inputDate .rightMonth{

float: right;

}

.m-inputDate .rightMonth:after{

content: '';

position: absolute;

top: 5px;

left: 5px;

border-top: 9px solid transparent;

border-bottom: 9px solid transparent;

border-left: 18px solid #dfdfdf;

}

.m-inputDate .leftMonth:hover,.m-inputDate .rightMonth:hover{

border: 1px solid #dfdfdf;

border-radius: 3px;

}

.m-inputDate .showMonth{

text-align: center;

}

/*datePanel-table*/

.m-inputDate .datePanel-table th{

text-align: center;

font-weight: bold;

font-family: Arial,Helvetica,sans-serif;

width: 40px;

height: 30px;

}

.m-inputDate .datePanel-table td{

text-align: center;

font-family: Arial,Helvetica,sans-serif;

padding: 2px;

}

.m-inputDate .datePanel-table td > a{

display: block;

width: 36px;

height: 26px;

line-height: 24px;

padding-right: 5px;

text-align: right;

text-decoration: none;

box-sizing: border-box;

font-size: 14px;

border: 1px solid #dfdfdf;

color: #dfdfdf;

background-color: transparent;

cursor: default;

}

.m-inputDate .datePanel-table td > a.allowSelectDate{

color: #333;

background-color: #F6F6F6;

border: 1px solid #dfdfdf;

cursor: pointer;

}

.m-inputDate .datePanel-table td.dateSelect a{

border:1px solid rgba(0,160,220,1);

color:rgba(0,160,220,1);

background-color: transparent;

}

.m-inputDate .datePanel-table td.closeDay a{

border:1px solid #dfdfdf;

color:#dfdfdf;

background-color: transparent;

}

.m-inputDate .datePanel-table td > a:hover{

background-color: rgba(0,160,220,0.2);

}

.m-inputDate .datePanel-table td.closeDay > a:hover{

background-color: transparent;

cursor: default;

}

/*.m-inputDate disabled*/

.m-inputDate[disabled="disabled"]{

background-color: #dfdfdf;

}

.m-inputDate[disabled="disabled"] .showDate:after{

content: '';

position: absolute;

top: calc( 50% - 3px );

right: 5px;

border-top: 6px solid #a1a1a1;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

}

.m-inputDate[disabled="disabled"] .showDate{

cursor: default;

outline: none;

}

.m-inputDate[disabled="disabled"]:hover .datePanel{

display: none;

}