jq版的仿照elementUI日期选择器插件
样式效果
代码案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq版elementUI日期选择器</title>
<link rel="stylesheet" href="./calendar.css"> //css 内部样式可自己设置
<style>
.calendar{
width: 222px
}
</style>
</head>
<body>
<div>
<div class="calendar"> //样式可自己设置,calendar类名不可缺少
查询日期:<input type="text" class="selectTime" today readonly/> //today 默认显示当天,否则为空
</div>
<div class="calendarBox"></div> //calendarBox选择器插槽
</div>
<script src="./jquery.min.js"></script>
<script src="./calendar.js"></script> //js
<script>
function inputValChange(time){ //选择日期回调函数
console.log(time)
}
</script>
</body>
</html>
calendar.js
/**
* author:(zengytchn@126.com)
* 申明:仿照elementUI的日期选择器
* inputValChange(time) 更改时间回调函数
* today: 默认选中当日
* .calendar 外层显示,点击弹出日期选择器,样式自定义设置
* .calendarBox 选择器父元素
* .selectTime 时间赋值input
*
* html 例子:
<div>
<div class="calendar">
查询日期:<input type="text" class="selectTime" today readonly/>
</div>
<div class="calendarBox"></div>
</div>
*
*/
var keyYear = ''; // 年
var keyMonth = ''; // 月
var nowYear = ''; // 此刻 年
var nowMonth = ''; // 此刻 月
var dateD = ''; // 时间 国际化
$(document).ready(function(){
$('body').on('click','.calendar',function(){
$('.calendarModel').show()
})
// 获取现在年月
dateD = new Date();
nowYear = dateD.getYear() + 1900;
nowMonth = dateD.getMonth() + 1;
keyYear = nowYear;
keyMonth = nowMonth;
selectDateModel(keyYear,keyMonth)
$('.calendarModel').hide()
// 上一月
$('body').on('click','.upMonth',function(){
keyMonth--;
if(keyMonth <= 0){
keyMonth = 12;
keyYear--;
}
selectDateModel(keyYear,keyMonth)
})
// 下一月
$('body').on('click','.downMonth',function(){
keyMonth++;
if(keyMonth > 12){
keyMonth = 1;
keyYear++;
}
selectDateModel(keyYear,keyMonth)
})
// 上一年
$('body').on('click','.upYear',function(){
keyYear--;
selectDateModel(keyYear,keyMonth)
})
// 下一年
$('body').on('click','.downYear',function(){
keyYear++;
selectDateModel(keyYear,keyMonth)
})
// 月选择 - 上一年
$('body').on('click','.mDupYear',function(){
keyYear--;
affirmMonth(keyYear);
})
// 月选择 - 下一年
$('body').on('click','.mDdownYear',function(){
keyYear++;
affirmMonth(keyYear);
})
// 年选择 - 上一年
$('body').on('click','.yDupYear',function(){
keyYear = keyYear - 10;
selectYearModel(keyYear);
})
// 年选择 - 下一年
$('body').on('click','.yDdownYear',function(){
keyYear = keyYear + 10;
selectYearModel(keyYear);
})
})
// 渲染时间选择器首页
function selectDateModel(Year,Month){
var calendar1 = '';
calendar1 = '<div class="calendarModel" id="calendarModelID">'
+' <ul class="yearUl">'
+' <li class="upYear tc"><<</li>'
+' <li class="upMonth tc"><</li>'
+' <li class="showYM tc">'
+' </li>'
+' <li class="downMonth tc">></li>'
+' <li class="downYear tc">>></li>'
+' </ul>'
+' <ul class="weekUl">'
+' <li>日</li>'
+' <li>一</li>'
+' <li>二</li>'
+' <li>三</li>'
+' <li>四</li>'
+' <li>五</li>'
+' <li>六</li>'
+' </ul>'
+' <ul class="dateUl">'
+' </ul>'
+' <button class="fr closeRLBut" οnclick="closeRLButFun();">取 消</button>'
+' <button class="fr todayRLBut" οnclick="todayRLButFun();">今 天</button>'
+' </div>'
var dateList = [];
// 判断 月的1号周几
var dateStrw = Year+'/'+Month+'/1';
var myDate = new Date(Date.parse(dateStrw));
switch (myDate.getDay()) {
case 0:
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month)); x++){
dateList.push(x)
}
break;
case 1:
dateList.push(monthManyDate(Year,Month - 1))
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 1); x++){
dateList.push(x)
}
break;
case 2:
for(var s = 1;s >= 0; s--){
dateList.push(monthManyDate(Year,Month - 1) - s)
}
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 2); x++){
dateList.push(x)
}
break;
case 3:
for(var s = 2;s >= 0; s--){
dateList.push(monthManyDate(Year,Month - 1) - s)
}
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 3); x++){
dateList.push(x)
}
break;
case 4:
for(var s = 3;s >= 0; s--){
dateList.push(monthManyDate(Year,Month - 1) - s)
}
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 4); x++){
dateList.push(x)
}
break;
case 5:
for(var s = 4;s >= 0; s--){
dateList.push(monthManyDate(Year,Month - 1) - s)
}
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 5); x++){
dateList.push(x)
}
break;
case 6:
for(var s = 5;s >= 0; s--){
dateList.push(monthManyDate(Year,Month - 1) - s)
}
for(var w = 1;w <= monthManyDate(Year,Month);w++){
dateList.push(w)
}
for(var x = 1;x <= (42 - monthManyDate(Year,Month) - 6); x++){
dateList.push(x)
}
break;
default:
alert('日期计算错误!')
break;
}
var titleDate = '';
titleDate +='<div class="showYM-year fl" οnclick="affirmYear(\'' + Year + '\');">'+Year+'年</div>'
titleDate +='<div class="showYM-month fl" οnclick="affirmMonth(\'' + Year + '\');">'+Month+'月</div>'
var nowDatevray = '';
var DayFlag = false;
var dateColor = 0;
for(var d = 0; d < dateList.length; d++){
if(
new Date().getDate() == dateList[d]
&& new Date().getMonth() + 1 == Month
&& !DayFlag
&& d>=dateList.indexOf(1)
){
DayFlag = true;
nowDatevray += '<li class="dateDay" οnclick="acknowledgement(\'' + dateList[d] + '\',' +Year + ',' +Month + ');">'+ dateList[d] +'</li>'
dateColor = 1;
if(dateList[d] == monthManyDate(Year,Month)&&dateColor == 1){
dateColor = 2;
}
}else{
if(dateList[d] == 1 || dateColor == 1 || dateList[d] == monthManyDate(Year,Month)&&dateColor == 1){
if(dateList[d] == 1 && dateColor == 0){
dateColor = 1;
}
if(dateColor == 1){
nowDatevray += '<li class="thisMonth" οnclick="acknowledgement(\'' + dateList[d] + '\',' +Year + ',' +Month + ');">'+ dateList[d] +'</li>'
}else{
nowDatevray += '<li οnclick="acknowledgement(\'' + dateList[d] + '\',' +Year + ',' +Month + ');">'+ dateList[d] +'</li>'
}
if(dateList[d] == monthManyDate(Year,Month)){
dateColor = 2;
}
}else{
nowDatevray += '<li οnclick="acknowledgement(\'' + dateList[d] + '\',' +Year + ',' +Month + ');">'+ dateList[d] +'</li>'
}
}
}
$('.dateUl').empty();
$('.showYM').empty();
$('.calendarBox').html(calendar1)
$('.calendarModel').show()
$('.showYM').append(titleDate)
$('.dateUl').append(nowDatevray)
}
// 判断月共几天
function monthManyDate(year,month){
return new Date(year, month, 0).getDate()
}
// 选择月 渲染
function selectMonthModel(YearVal) {
var monthOut = '';
monthOut = '<div class="monthModel">'
+' <ul class="mDyearUl">'
+' <li class="mDupYear tc fl"><<</li>'
+' <li class="mDshowYM tc fl">'+YearVal+'年</li>'
+' <li class="mDdownYear tc fl">>></li>'
+' </ul>'
+' <ul class="mDmothUl">'
+' <li οnclick="ensureMonth(\''+1+'\')">一月</li>'
+' <li οnclick="ensureMonth(\''+2+'\')">二月</li>'
+' <li οnclick="ensureMonth(\''+3+'\')">三月</li>'
+' <li οnclick="ensureMonth(\''+4+'\')">四月</li>'
+' <li οnclick="ensureMonth(\''+5+'\')">五月</li>'
+' <li οnclick="ensureMonth(\''+6+'\')">六月</li>'
+' <li οnclick="ensureMonth(\''+7+'\')">七月</li>'
+' <li οnclick="ensureMonth(\''+8+'\')">八月</li>'
+' <li οnclick="ensureMonth(\''+9+'\')">九月</li>'
+' <li οnclick="ensureMonth(\''+10+'\')">十月</li>'
+' <li οnclick="ensureMonth(\''+11+'\')">十一月</li>'
+' <li οnclick="ensureMonth(\''+12+'\')">十二月</li>'
+' </ul>'
+'</div>'
$('.calendarBox').html(monthOut)
$('.monthModel').show()
}
function selectYearModel(YearVal) {
var yearOut = '';
yearOut = '<div class="yearModel">'
+' <ul class="yDyearUl">'
+' <li class="yDupYear tc fl"><<</li>'
+' <li class="yDshowYM tc fl">'+(Number(YearVal) - 9)+'年 - '+YearVal+'年</li>'
+' <li class="yDdownYear tc fl">>></li>'
+' </ul>'
+' <ul class="yDmothUl">'
+' </ul>'
+' </div>'
var yDhtml = '';
for (let p = 9; p >= 0; p--) {
yDhtml += '<li οnclick="ensureYear(\''+Number(YearVal - p)+'\')">'+ Number(YearVal - p) +'</li>'
}
$('.calendarBox').html(yearOut)
$('.yDmothUl').append(yDhtml)
$('.yearModel').show()
}
// 选中关闭日期选择器
function acknowledgement(dateV,yearV,monthV){
console.log(dateV,yearV,monthV)
var yn = String(yearV);
var my = monthV>9? String(monthV):'0'+String(monthV);
var dt = Number(dateV)>9? dateV:'0'+dateV;
var timeValue = yn +'-'+ my +'-'+dt;
$('.selectTime').val(timeValue)
$('.calendarModel').hide();
inputValChange(timeValue); // 选择的事件 - 触发事件
}
// 选择月份 - 界面
function affirmMonth(val) {
selectMonthModel(val)
}
// 选择年份 - 界面
function affirmYear(val){
selectYearModel(val)
}
// 月份 - 确定
function ensureMonth(val){
keyMonth = val;
selectDateModel(keyYear,keyMonth)
}
// 年份 - 确定
function ensureYear(val){
keyYear = val;
selectMonthModel(val)
}
// 点击 取消 关闭
function closeRLButFun(){
$('.calendarModel').hide();
}
// 选择今天
function todayRLButFun(){
acknowledgement(new Date().getDate(),nowYear,nowMonth)
}
calendar.css
/**
author:(zengytchn@126.com)
.calendarBox 日历显示的位置设置,父级设置position: relative;
*/
.calendarBox{
position: absolute;
top: 46px;
left: 10px;
z-index: 999999;
}
.selectTime{
padding: 0px 10px;
width: 121px;
text-align: center;
border: 0px;
outline: none;
}
.tc{text-align: center}
.tl{text-align: left}
.tr{text-align: right}
.fr{float: right}
.fl{float: left}
.calendar{
border: 1px solid #666;
border-radius: 5px;
padding: 7px;
}
.btuDetails{
margin-right: 20px;
color:#fff;
border-radius: 1px;
padding: 9px 13px;
background-color: #1890FF
}
.closeHandle{
color:#fff;
border-radius: 1px;
padding: 4px 13px;
background-color: #1890FF
}
.glyphicon-calendar{color:#6B6F79;}
.calendarIcon{height: 16px;line-height: 19px;}
/* 日历 */
.calendarModel{
height: 340px;
width: 324px;
padding: 10px;
box-sizing: border-box;
background-color: #fff;
box-shadow:0px 5px 22px 2px rgba(0,0,0,0.07);
display: none;
font-size: 13px;
border-radius: 2px;
}
.calendarModel li{
float: left;
}
ul,li{list-style: none;padding: 0;margin: 0;}
.fr{float: right;}
.fl{float: left;}
.tc{text-align: center;}
.yearUl{
width: 100%;
height: 12%;
}
.yearUl li{
height: 100%;
line-height: 38.39px;
}
.upYear{
width:12.5%;
}
.upMonth{
width:12.5%;
}
.showYM{
width: 50%;
font-weight: bold;
}
.showYM:hover{
color: #54667a;
}
.showYM-year{
width: 55%;
text-align: right;
}
.showYM-month{
width: 41%;
text-align: left;
padding-left: 5px;
}
.downMonth{
width: 12.5%;
}
.downYear{
width: 12.5%;
}
.weekUl{
width: 100%;
height: 13%;
border-bottom:1px solid #f5efef;
}
.weekUl li{
width: 14.28%;
height: 100%;
line-height: 41.59px;
text-align: center;
}
.dateUl{
width: 100%;
height: 68%;
border-bottom:1px solid #f5efef;
}
.thisMonth{
color: #606266 !important;
}
.dateDay{
color: #409eff !important;
font-weight: bold;
}
.dateUl li{
width: 14.28%;
height: 16.66%;
line-height: 37.31px;
text-align: center;
color: #c0c4cc;
}
.dateUl li:hover,.upYear:hover,
.upMonth:hover,.downMonth:hover,
.downYear:hover,.showYM-year:hover,
.showYM-month:hover{
color: #409eff !important;
cursor: pointer !important;
}
.closeRLBut,.todayRLBut{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 5px 10px;
font-size: 12px;
margin-left: 10px;
border-radius: 3px;
margin-top: 3px;
}
.closeRLBut:hover,.todayRLBut:hover{
color: #409eff;
}
.monthModel{
height: 340px;
width: 324px;
padding: 10px;
box-sizing: border-box;
background-color: #fff;
box-shadow:0px 5px 22px 2px rgba(0,0,0,0.07);
display: none;
font-size: 12px;
}
.mDyearUl{
width: 100%;
height: 20%;
border-bottom:1px solid #f5efef;
line-height: 64px;
}
.mDupYear{
width:12.5%;
}
.mDdownYear{
width:12.5%;
}
.mDshowYM{
width: 75%;
font-weight: bold;
}
.mDmothUl{
width: 100%;
height: 80%;
}
.mDmothUl li{
width: 25%;
height: 33.33%;
float: left;
text-align: center;
line-height: 90.66px;
}
.mDyearUl li:hover,.mDmothUl li:hover{
color: #409eff;
cursor: pointer;
}
.yearModel{
height: 340px;
width: 324px;
padding: 10px;
box-sizing: border-box;
background-color: #fff;
box-shadow:0px 5px 22px 2px rgba(0,0,0,0.07);
display: none;
font-size: 12px;
}
.yDyearUl{
width: 100%;
height: 20%;
border-bottom:1px solid #f5efef;
line-height: 64px;
}
.yDupYear{
width:12.5%;
}
.yDdownYear{
width:12.5%;
}
.yDshowYM{
width: 75%;
font-weight: bold;
}
.yDmothUl{
width: 100%;
height: 80%;
}
.yDmothUl li{
width: 25%;
height: 33.33%;
float: left;
text-align: center;
line-height: 90.66px;
}
.yDyearUl li:hover,.yDmothUl li:hover{
color: #409eff;
cursor: pointer;
}
demo
链接:https://pan.baidu.com/s/1dFi4Wq2c08bm7X0MQVhzqA
提取码:87wa