简单日历自己做~jquery

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_37392864/article/details/77856125

//显示年份
$year为 传过来的html标签,Year为指定的年份

function showYear($year, Year){
    var dateNow = new Date();
    var yearNow = dateNow.getFullYear();
    //显示现在年份
    var yearStart = yearNow - 120;
    //只制作120年内的
    for (var i = yearNow; i >= yearStart; i--) {
        var option = $("<option>").text(i).val(i);
        $year.append(option);
    }
    $("#year option[value = " + Year + "]").attr('selected', true);
    //显示指定年份
}

//显示月份

function showMonth($month, Month){
    $month.empty();
    //方便刷新
    for (var i = 1; i <= 12; i++) {
        var option = $("<option>").text(i).val(i);
        $month.append(option);
    }
    $("#month option[value = " + Month+ "]").attr('selected', true);
}

//显示日期

function showDay($day, year, month, Day){
    $day.empty();
    //date 的月份下标从0开始,日期从1开始,0表示上个月的最后一天
    var date = new Date(year, month,0);
    days = date.getDate();
    for (var i = 1; i <= days; i++) {
        var option = $("<option>").text(i).val(i);
        $day.append(option);
    }
  $("#day option[value = " + Day + "]").attr('selected', true);
}
//显示年月日
function showBirth(yearId, monthId, dayId){
    var birth=data;//为后台接收数据,可省略
    var $year = $("#" + yearId);
    var $month = $("#" + monthId);
    var $day = $("#" + dayId);
    var dateNow = new Date();
    var year = dateNow.getFullYear();
    var month = dateNow.getMonth();
    var day=dateNow.getDate();
    //用户原数据
    var userYear="";
    var uesrMonth="";
    var uesrDay="";
    //用户生日不为空时
    if(birth!=null){
        var aa = birth.split("-");
        var userYear = aa[0];
        var uesrMonth = aa[1];
        var uesrDay = aa[2];
        uesrMonth = parseInt(uesrMonth);
        uesrDay = parseInt(uesrDay);
    }
    //用户生日为空时为现在日期
    else{
        userYear=year;
        uesrMonth=month+1;
        uesrDay=day;
    }
    showYear($year, userYear);
    showMonth($month, uesrMonth);
    showDay($day, userYear, uesrMonth, uesrDay);
    $year.change(function(){
        year = $year.find("option:selected").text();
        showMonth($month, 1);
        showDay($day, year, month, 1);
    });
    $month.change(function(){
        month = $month.find("option:selected").text();
        showDay($day, year, month, 1);
    });
}

由 showBirth()去掉用年以及月的函数,完成日历,我的代码主要用于显示用户的生日,简单用标签去完成
简单样式:
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页