jq版仿照elementUI日期选择器插件

最新推荐文章于 2024-06-06 15:48:05 发布

zeng092210

最新推荐文章于 2024-06-06 15:48:05 发布

阅读量1.2k

点赞数 3

分类专栏： jquery 文章标签： jq日期选择器 jq版elementUI日期选择器

本文链接：https://blog.csdn.net/zeng092210/article/details/99552251

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

zeng092210

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
jq版仿照elementUI日期选择器插件

jq版的仿照elementUI日期选择器插件样式效果代码案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫

专栏目录