介绍
图片.png
使用
<h1>日期选择器(jQuery)</h1>
<div id="m-input"></div>
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('<em>'+uYear+'</em><span>-</span>'+
'<em>'+untils.prefixInteger(uMonth_,2)+'</em><span>-</span>' +
'<em>'+untils.prefixInteger(uDate,2)+'</em>');
},
/**
* 更新展示——展示日期
* @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('<div class="datePanel-title">'+
'<div class="leftMonth"></div><div class="rightMonth"></div>' +
'<div class="showMonth">'+(uYear+'年'+untils.prefixInteger(uMonth_,2)+'月')+'</div></div>'+
'<table class="datePanel-table"><thead><tr>'+
'<th scope="col"> <span title="Sunday">Su</span> </th>'+
'<th scope="col"> <span title="Monday">Mo</span> </th>'+
'<th scope="col"> <span title="Tuesday">Tu</span> </th> '+
'<th scope="col"> <span title="Wednesday">We</span></th>'+
'<th scope="col"> <span title="Thursday">Th</span></th>'+
'<th scope="col"> <span title="Friday">Fr</span></th>'+
'<th scope="col"> <span title="Saturday">Sa</span></th>'+
'</tr> </thead><tbody></tbody></table>');
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<uFirstDay ; i++ ){
uArr.push('')
}
for(var j=0 ; j<uAllDay ; j++ ){
uArr.push(j+1)
}
var $td;
for(var z=0 ; z<uArr.length ; z++){
if(z % 7 == 0){
$tr = $('<tr></tr>');
$tr.appendTo($tbody)
}
if(typeof uArr[z] == "string"){
$('<td></td>').appendTo($tr)
}else{
var $td = $('<td></td>').appendTo($tr).attr({
'data-year':uYear,
'data-month':uMonth,
'data-date':uArr[z],
}).append('<a class="allowSelectDate" href="javascript:void(0);">'+uArr[z]+'</a>');
}
}
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('<div class="showDate"></div><div class="datePanel"></div>')
.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;
}
