zl_date
Version:
日期选择插件
219 lines (206 loc) • 6.29 kB
JavaScript
var _el = '';
var y = '';
var m = '';
var d = '';
var _type = '';
function Z_date(obj){
//添加input
_el = document.querySelector(obj.el);
_type = obj.type;
_el.style.position = 'relative';
_el.innerHTML = '<div class="Z_date" ><span onclick="Z_showDiv()"><input class="Z_ipt" onfocus="blur()" type="text" ><img src="comm/img/date.png" /></span><div onclick="noBubbling()" style="display:none"></div></div>';
document.querySelector('body').addEventListener("click",function(){
var _div = _el.querySelector(".Z_date div");
_div.style.display = 'none';
});
var _date = new Date();
//当前年
y = _date.getFullYear();
//当前月
m = _date.getMonth()+1;
//当前日
d = _date.getDate();
if(m < 10){
m = "0" + m;
}
if(d < 10){
d = "0" + d;
}
Z_thisMonth();
}
function Z_thisMonth(){
var str = y + "-" + m + "-" + '01';
var new_date = new Date(str);
//当前月1号是周几？
var _day = new_date.getDay();
var newDate = new Date(y,m,0);
//当前月总共多少天
var _allDay = newDate.getDate();
var _allDate = [];
//剩余格子
var _lattice = 0;
for(var i=0;i<7;i++){
if(i==_day){
break;
}
else{
_lattice++;
_allDate.push(0);
}
}
for(var i=1;i<=_allDay;i++){
_allDate.push(i);
}
//剩余格子
_lattice = 7 - (_lattice + _allDay)%7;
if(_lattice == 7){
_lattice = 0;
}
for(var i=0;i<_lattice;i++){
_allDate.push(0);
}
console.log({y,m,d});
//当前日期高亮显示
var _date = new Date();
var _y = _date.getFullYear();
var _m = _date.getMonth()+1;
var _d = _date.getDate();
console.log({_y,_m,_d});
var _div = _el.querySelector(".Z_date div");
var sel = '<div style = "width:100%"><input onchange="changeY(event)" style = "width:80px;text-align: center;" type="text" value="'+ y +'">年<input onchange="changeM(event)" style = "width:80px;text-align: center;" type="text" value="'+ m +'">月</div>';
//创建日期格子
var _head = '<div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>';
var _body = '';
console.log({_allDate,d});
for(var i=0;i<_allDate.length;i++){
if(_allDate[i] == 0){
_body += '<div></div>';
}
else if(_y == Number(y) && _m == Number(m) && _d == Number(_allDate[i])){
_body += '<div class="_nowdate" onclick=selDate(event) >' + _allDate[i] + '</div>';
}
else if(Number(_allDate[i])== Number(d)){
_body += '<div class="_date" onclick=selDate(event) style="background: #00BDFF;color: #fff;">' + _allDate[i] + '</div>';
}
else{
_body += '<div class="_date" onclick=selDate(event)>' + _allDate[i] + '</div>';
}
}
_div.innerHTML = sel + _head + _body;
}
function selDate(e){
d = e.target.innerText;
var _allDate = _el.querySelectorAll("._date");
for(var i=0;i<_allDate.length;i++){
_allDate[i].style.background = '';
_allDate[i].style.color = '#000000';
}
e.target.style.backgroundColor = "#00BDFF";
e.target.style.color = '#fff';
m = Number(m);
d = Number(d);
if(m < 10){
m = "0" + m;
}
if(d < 10){
d = "0" + d;
}
y = String(y);
//判断显示类型
if(_type == 1){
_el.querySelector(".Z_ipt").value = y + '年' + m + "月" + d + "日";
}
else if(_type == 2){
_el.querySelector(".Z_ipt").value = y + '-' + m + "-" + d;
}
else if(_type == 3){
_el.querySelector(".Z_ipt").value = y + '/' + m + "/" + d;
}
else if(_type == 4){
_el.querySelector(".Z_ipt").value = y + m + d;
}
var _div = _el.querySelector(".Z_date div");
_div.style.display = 'none';
}
function Z_showDiv(e){
event.stopPropagation();
var _div = _el.querySelector(".Z_date div");
if( _div.style.display == 'none'){
_div.style.display = 'block';
}
else{
_div.style.display = 'none';
}
}
function noBubbling(e){
event.stopPropagation();
}
function changeM(e){
if(Number(e.target.value)>12 || Number(e.target.value) < 1){
e.target.value = m;
}
else{
m = e.target.value;
if(Number(m) < 10){
m = "0" + Number(m);
e.target.value = m;
}
m = Number(m);
d = Number(d);
if(m < 10){
m = "0" + m;
}
if(d < 10){
d = "0" + d;
}
y = String(y);
//判断显示类型
if(_type == 1){
_el.querySelector(".Z_ipt").value = y + '年' + m + "月" + d + "日";
}
else if(_type == 2){
_el.querySelector(".Z_ipt").value = y + '-' + m + "-" + d;
}
else if(_type == 3){
_el.querySelector(".Z_ipt").value = y + '/' + m + "/" + d;
}
else if(_type == 4){
_el.querySelector(".Z_ipt").value = y + m + d;
}
Z_thisMonth();
}
}
function changeY(e){
if(Number(e.target.value)>2999 || Number(e.target.value) < 1970){
e.target.value = y;
}
else{
y = e.target.value;
m = Number(m);
d = Number(d);
if(m < 10){
m = "0" + m;
}
if(d < 10){
d = "0" + d;
}
y = String(y);
//判断显示类型
if(_type == 1){
_el.querySelector(".Z_ipt").value = y + '年' + m + "月" + d + "日";
}
else if(_type == 2){
_el.querySelector(".Z_ipt").value = y + '-' + m + "-" + d;
}
else if(_type == 3){
_el.querySelector(".Z_ipt").value = y + '/' + m + "/" + d;
}
else if(_type == 4){
_el.querySelector(".Z_ipt").value = y + m + d;
}
Z_thisMonth();
}
}
modules.exports = {
Z_date
}