实用插件（六）手机日历插件—

本文链接：https://blog.csdn.net/qq_39198420/article/details/77769684

2、使用方法：

    <!-- 日历1个css文件-->
    <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />
    <!-- 日历1个js文件-->
    <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>

3、demo：

<!DOCTYPE html >
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>报修</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/mend-detail-finished.css" rel="stylesheet">
    <!-- 日历1个css文件-->
    <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />

    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
    <script src="../js/jQuery-1.9.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!-- 日历1个js文件-->
    <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //初始化LCalendar插件
        $(function () {
           //实例化一个LCalendar对象
            var calendar = new LCalendar();
            calendar.init({
                'trigger': '#start_date', //标签id
                'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
                'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
            });

            //再实例化一个LCalendar对象
            var calendar = new LCalendar();
            calendar.init({
                'trigger': '#end_date', //标签id
                'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
                'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
            });
        })
    </script>
    <style>
        td{height: 45px;}
        tr>td:first-child{border: 0;}
    </style>
</head>
<body style="height: 100%">
<header>
    <p>
        <a class="back" href="javascript:;"></a>
        <span>搜索</span>
    </p>
</header>
<table class="my-table">
    <tr>
        <td width="30%">开始日期</td>
        <td width="70%"><input type="text" id="start_date" class="date-right" readonly/></td>
    </tr>
    <tr>
        <td width="30%">开始日期</td>
        <td width="70%"><input type="text" id="end_date" class="date-right" readonly/></td>
    </tr>
    <tr>
        <td width="30%">报修类别</td>
        <td width="70%" class="img-right top" style="background-position: 95% center;position: relative;">
            <span>总务后勤报修</span>
            <ul class="select">
                <li class="option">电教设备报修</li>
                <li class="option">总务后台报修</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td width="30%">处理状态</td>
        <td width="70%">
            <span class="state-type active">待分派<i class="icon">√</i></span>
            <span class="state-type">待维修<i class="icon">√</i></span>
            <span class="state-type">已完成<i class="icon">√</i></span>
        </td>
    </tr>
    <tr>
        <td width="30%">维修人员</td>
        <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
            <span>李波</span>
            <a href="tel:123456" >
                <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
            </a>
        </td>
    </tr>
    <tr>
        <td width="30%">维修人员</td>
        <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
            <span>李波</span>
            <a href="tel:123456" >
                <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
            </a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button class="btn-red" style="margin-top: 20px;margin-left: 30%;width: 70%;">开始搜索</button>
        </td>
    </tr>
</table>
<script >
    //功能：设置第一个input值为30天前的日期，第二个input值为今天日期，
    function getLastMonthYestdy(date){
        var date = new Date(); //        1    2    3    4    5    6    7    8    9   10    11   12月
        var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);
        var strYear = date.getFullYear();
        var strDay = date.getDate();
        var strMonth = date.getMonth()+1;
        if(strMonth<10)//给个位数的月、日补零
        {
            strMonth="0"+strMonth;
        }
        if(strDay<10)
        {
            strDay="0"+strDay;
        }
        now = strYear+"-"+strMonth+"-"+strDay;
        if(strYear%4 == 0 && strYear%100 != 0){//一、解决闰年平年的二月份天数   //平年28天、闰年29天//能被4整除且不能被100整除的为闰年
            daysInMonth[2] = 29;
        }
        if(strMonth - 1 == 0) //二、解决跨年问题
        {
            strYear -= 1;
            strMonth = 12;
        }
        else
        {
            strMonth -= 1;
        }
//        strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth];
        strDay = Math.min(strDay,daysInMonth[strMonth]);//三、前一个月日期不一定和今天同一号，例如3.31的前一个月日期是2.28；9.30前一个月日期是8.30
        if(strMonth<10)//给个位数的月、日补零
        {
            strMonth="0"+strMonth;
        }
        if(strDay<10)
        {
            strDay="0"+strDay;
        }
        datastr = strYear+"-"+strMonth+"-"+strDay;
        return datastr,now;
    }
    getLastMonthYestdy();
    console.log(datastr);//必须确保日期格式为：YYYY-MM-DD
    $("#start_date").val(datastr);//30天前的日期
    $("#end_date").val(now);//今天日期

</script>

<script >
    //显示
    $(".img-right.top").click(function (e) {
        e.stopPropagation();
        $(".select").slideToggle();
    });
    //隐藏
    $(document).click(function () {
        $(".select").slideUp();
    });
    $(".option").click(function (e) {
        //1、隐藏
        e.stopPropagation();
        $(this).parent().slideUp();
        //2、赋值
        var txt = $(this).text();
        $(".img-right.top span").text(txt);
    } )
</script>
<script >
    //处理状态切换： 选中/未选中
    $(".state-type").click(function () {
        $(this).toggleClass("active");
    })
</script>
</body>

</html>

4、效果图：

这里写图片描述