介绍
图片.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');
$tr.appendTo($tbody)
}
if(typeof uArr[z] == "string"){
$(' /*
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;
}