<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1023063_7fxauzqx2h8.css">
    <link rel="stylesheet" href="css/rolldate.css">

    <link rel="stylesheet" type="text/css" href="css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/calendar_base.css">
    <link rel="stylesheet" type="text/css" href="css/showcase.css">
    <script src="js/base.js" type="text/javascript"></script>
    <title>日期设置</title>
    <style>
        body,html{
            background: #fff;
        }

        .datelist{
            display:flex;
            justify-content: space-between;
            align-items: center;
            height:0.8rem;
            line-height: 0.8rem;
            margin:0;
            padding: 0;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
        }
        .datelist li{
            width:1.62rem;
            text-decoration: none;
            list-style: none;
            color:#333333;
            font-size: 0.3rem;
            /*border-right:1px solid #f5f5f5;*/
            text-align: center;
            height:0.8rem;
            position: relative;

        }
        .datelist li:after{
            display:block;
            content:'';
            width:1px;
            height:0.5rem;
            background: #f5f5f5;
            position: absolute;
            top:0.19rem;
            right:0;
        }
        .datelist li:last-child:after{
            display:block;
            content:'';
            width:1px;
            height:0.5rem;
            background: #fff;
            position: absolute;
            top:0.19rem;
            right:0;
        }
        .datelist li.active{
            color:#2C82E6;
        }
        .repeathead{
            display:flex;
            justify-content: space-between;
            align-items: center;

            width:6.86rem;
            padding: 0 0.29rem;
            height:1rem;
            background:rgba(255,255,255,1);
            box-shadow:0px 1px 5px 0px rgba(89,89,89,0.1);
            border-radius:0.1rem;
            margin: 0.33rem auto 0;
            box-sizing: border-box;

        }
        .icon-youjiantou{
           color:#666666;
            font-size: 0.5rem;
        }
        .repeattype{
            color:#333333;
            font-size: 0.3rem;
        }
        .daytype{
            display:flex;
            align-items: center;
        }
        .dayname,.selectrepeatname{
            color:#333333;
            font-size: 0.3rem;
        }
        .repeatcontent{
            width:6.86rem;
            margin: 0 auto;

        }
        .repeatlist{
            padding-left: 0;
            margin: 0;
        }
        .repeatlist li{
            height:1rem;
            line-height: 1rem;
            /*width:6.86rem;*/
            list-style: none;
            text-align: center;
            font-size: 0.3rem;
            color:#333;
            border-bottom: 1px solid #f5f5f5;
        }
        .repeatlist li.repeatactive{
            color:#2C82E6;
            font-size: 0.48rem;
            background:#FAFAFA;
        }

        .repeatweek{
            width:6.86rem;
            margin: 0 auto;
        }
        .weeklist{
            list-style: none;
            display:flex;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;

        }
        .weeklist li{
            width:1.2rem;
            height:0.38rem;
            background:rgba(44,130,230,0);
            border:1px solid rgba(106, 107, 120, 0.15);
            border-radius:0.17rem;
            color:#6A6B78;
            font-size: 0.24rem;
            margin-left: 0.4rem;
            text-align: center;
            line-height: 0.38rem;
            margin-top: 0.16rem;

        }
        .weeklist li.weekactive{
            background: #2C82E6;
            color:#fff;
        }
        .repeatmonth{
            width:6.86rem;
            margin: 0 auto;
        }
        .monthlist{
            display:flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        .monthlist li{
            list-style: none;
            color:#333333;
            font-size: 0.26rem;
            width:0.48rem;
            height:0.48rem;
            line-height: 0.48rem;
            border-radius: 50%;
            margin-left: 0.26rem;
            margin-top: 0.2rem;
            text-align: center;
        }
        .monthlist li.monthactive{
            background: #2C82E6;
            color:#fff;
        }
        .beginend{
            width:6.86rem;
            margin: 0.3rem auto;
            display:flex;
            align-items: center;

         }
        .andate{
            display:flex;
            color:#2C82E6;
            align-items: center;
        }
        .noxuan .xuan{
            font-size: 0.3rem;
        }
        .andatename{
            font-size:0.3rem ;
            margin-left: 0.21rem;
        }
        .forever{
            margin-left: 0.31rem;
        }
        .date{
            color: #333333;
            font-size: 0.3rem;
        }
        .em-red{
            color:#2C82E6
        }
        .em-calendar-content .em-calendar-item:nth-child(7n) .day, .em-calendar-content .em-calendar-item:nth-child(7n+1) .day {
            color: #333;
            font-size: 16px;
        }
        .em-journal-title {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
        }
        .em-per-block span{
            color:#333
        }
    </style>
</head>
<body>
<div class="datehead">
    <ul class="datelist">
        <li class="active" data-selectid="1">单日</li>
        <li data-selectid="2">多日</li>
        <li data-selectid="3">起止</li>
        <li data-selectid="4">重复</li>
    </ul>
</div>

<!--单日-->
<div class="dateitem singleday" >
    <div class="mui-content">
        <div class="em-journal-title">
            <!--<div class="em-per-block pre">-->
            <!--<span class="mui-icon mui-icon-arrowleft"></span>-->
            <!--<span>上一月</span>-->
            <!--</div>-->
            <div class="collect">
                <!--<img src="img/ghgfhs@2x.png" alt="">-->
            </div>
            <div class="em-per-block mid" >
                <span>2019-01-18</span>
            </div>
            <div>
                <!--<img src="" alt="">-->
            </div>
            <!--<div class="em-per-block next">-->
            <!--<span>下一月</span>-->
            <!--<span class="mui-icon mui-icon-arrowright"></span>-->
            <!--</div>-->
        </div>

        <!--日历容器-->
        <div id="calendar">
            <div class="em-calendar-container">
                <div class="em-week">
                    <span class="em-red">日</span>
                    <span>一</span>
                    <span>二</span>
                    <span>三</span>
                    <span>四</span>
                    <span>五</span>
                    <span class="em-red">六</span>
                </div>
                <div class="swiper-container swiper-container-horizontal">
                    <div class="swiper-wrapper"
                         style="transform: translate3d(-1423px, 0px, 0px); transition-duration: 0ms;">
                        <div class="swiper-slide swiper-slide-prev" style="width: 1423px;">
                            <div class="em-calendar-content">
                                <div class="em-calendar-wrapper">
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-25">
                                        <span class="day">25</span>
                                        <p class="lunar">十八</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-26">
                                        <span class="day">26</span>
                                        <p class="lunar">十九</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-27">
                                        <span class="day">27</span>
                                        <p class="lunar">廿</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-28">
                                        <span class="day">28</span>
                                        <p class="lunar">廿一</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-29">
                                        <span class="day">29</span>
                                        <p class="lunar">廿二</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2018-11-30">
                                        <span class="day">30</span>
                                        <p class="lunar">廿三</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-01">
                                        <span class="day">1</span>
                                        <p class="lunar">廿四</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-02">
                                        <span class="day">2</span>
                                        <p class="lunar">廿五</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-03">
                                        <span class="day">3</span>
                                        <p class="lunar">廿六</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-04">
                                        <span class="day">4</span>
                                        <p class="lunar">廿七</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-05">
                                        <span class="day">5</span>
                                        <p class="lunar">廿八</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-06">
                                        <span class="day">6</span>
                                        <p class="lunar">廿九</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-07">
                                        <span class="day">7</span>
                                        <p class="lunar">初一</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-08">
                                        <span class="day">8</span>
                                        <p class="lunar">初二</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-09">
                                        <span class="day">9</span>
                                        <p class="lunar">初三</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-10">
                                        <span class="day">10</span>
                                        <p class="lunar">初四</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-11">
                                        <span class="day">11</span>
                                        <p class="lunar">初五</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-12">
                                        <span class="day">12</span>
                                        <p class="lunar">初六</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-13">
                                        <span class="day">13</span>
                                        <p class="lunar">初七</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-14">
                                        <span class="day">14</span>
                                        <p class="lunar">初八</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-15">
                                        <span class="day">15</span>
                                        <p class="lunar">初九</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-16">
                                        <span class="day">16</span>
                                        <p class="lunar">初十</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-17">
                                        <span class="day">17</span>
                                        <p class="lunar">十一</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-18">
                                        <span class="day">18</span>
                                        <p class="lunar">十二</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-19">
                                        <span class="day">19</span>
                                        <p class="lunar">十三</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-20">
                                        <span class="day">20</span>
                                        <p class="lunar">十四</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-21">
                                        <span class="day">21</span>
                                        <p class="lunar">十五</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-22">
                                        <span class="day">22</span>
                                        <p class="lunar">十六</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-23">
                                        <span class="day">23</span>
                                        <p class="lunar">十七</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-24">
                                        <span class="day">24</span>
                                        <p class="lunar">十八</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-25">
                                        <span class="day">25</span>
                                        <p class="lunar">十九</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-26">
                                        <span class="day">26</span>
                                        <p class="lunar">廿</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-27">
                                        <span class="day">27</span>
                                        <p class="lunar">廿一</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-28">
                                        <span class="day">28</span>
                                        <p class="lunar">廿二</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-29">
                                        <span class="day">29</span>
                                        <p class="lunar">廿三</p>
                                    </div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-30">
                                        <span class="day">30</span>
                                        <p class="lunar">廿四</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2018-12-31">
                                        <span class="day">31</span>
                                        <p class="lunar">廿五</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-01-01">
                                        <span class="day">1</span>
                                        <p class="lunar">廿六</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-01-02">
                                        <span class="day">2</span>
                                        <p class="lunar">廿七</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-01-03">
                                        <span class="day">3</span>
                                        <p class="lunar">廿八</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-01-04">
                                        <span class="day">4</span>
                                        <p class="lunar">廿九</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-01-05">
                                        <span class="day">5</span>
                                        <p class="lunar">三十</p></div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-active" style="width: 1423px;">
                            <div class="em-calendar-content">
                                <div class="em-calendar-wrapper">
                                    <div class="em-calendar-item isforbid0 tipprev" date="2018-12-30"><span
                                            class="day">30</span>
                                        <p class="lunar">廿四</p></div>
                                    <div class="em-calendar-item isforbid0 tipprev" date="2018-12-31"><span
                                            class="day">31</span>
                                        <p class="lunar">廿五</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-01"><span class="day">1</span>
                                        <p class="lunar">廿六</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-02"><span class="day">2</span>
                                        <p class="lunar">廿七</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-03"><span class="day">3</span>
                                        <p class="lunar">廿八</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-04"><span class="day">4</span>
                                        <p class="lunar">廿九</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-05"><span class="day">5</span>
                                        <p class="lunar">三十</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-06"><span class="day">6</span>
                                        <p class="lunar">初一</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-07"><span class="day">7</span>
                                        <p class="lunar">初二</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-08"><span class="day">8</span>
                                        <p class="lunar">初三</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-09"><span class="day">9</span>
                                        <p class="lunar">初四</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-10"><span
                                            class="day">10</span>
                                        <p class="lunar">初五</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-11"><span
                                            class="day">11</span>
                                        <p class="lunar">初六</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-12"><span
                                            class="day">12</span>
                                        <p class="lunar">初七</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-13"><span
                                            class="day">13</span>
                                        <p class="lunar">初八</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-14"><span
                                            class="day">14</span>
                                        <p class="lunar">初九</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-15"><span
                                            class="day">15</span>
                                        <p class="lunar">初十</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-16"><span
                                            class="day">16</span>
                                        <p class="lunar">十一</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-17"><span
                                            class="day">17</span>
                                        <p class="lunar">十二</p></div>
                                    <div class="em-calendar-item em-calendar-active isforbid1" date="2019-01-18"><span
                                            class="day">18</span>
                                        <p class="lunar">今天</p>
                                    </div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-19"><span
                                            class="day">19</span>
                                        <p class="lunar">十四</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-20"><span
                                            class="day">20</span>
                                        <p class="lunar">十五</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-21"><span
                                            class="day">21</span>
                                        <p class="lunar">十六</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-22"><span
                                            class="day">22</span>
                                        <p class="lunar">十七</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-23"><span
                                            class="day">23</span>
                                        <p class="lunar">十八</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-24"><span
                                            class="day">24</span>
                                        <p class="lunar">十九</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-25"><span
                                            class="day">25</span>
                                        <p class="lunar">廿</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-26"><span
                                            class="day">26</span>
                                        <p class="lunar">廿一</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-27"><span
                                            class="day">27</span>
                                        <p class="lunar">廿二</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-28"><span
                                            class="day">28</span>
                                        <p class="lunar">廿三</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-29"><span
                                            class="day">29</span>
                                        <p class="lunar">廿四</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-30"><span
                                            class="day">30</span>
                                        <p class="lunar">廿五</p></div>
                                    <div class="em-calendar-item isforbid1 tip" date="2019-01-31"><span
                                            class="day">31</span>
                                        <p class="lunar">廿六</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-01"><span
                                            class="day">1</span>
                                        <p class="lunar">廿七</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-02"><span
                                            class="day">2</span>
                                        <p class="lunar">廿八</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-03"><span
                                            class="day">3</span>
                                        <p class="lunar">廿九</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-04"><span
                                            class="day">4</span>
                                        <p class="lunar">三十</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-05"><span
                                            class="day">5</span>
                                        <p class="lunar">初一</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-06"><span
                                            class="day">6</span>
                                        <p class="lunar">初二</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-07"><span
                                            class="day">7</span>
                                        <p class="lunar">初三</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-08"><span
                                            class="day">8</span>
                                        <p class="lunar">初四</p></div>
                                    <div class="em-calendar-item isforbid0 tipnext" date="2019-02-09"><span
                                            class="day">9</span>
                                        <p class="lunar">初五</p></div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-next" style="width: 1423px;">
                            <div class="em-calendar-content">
                                <div class="em-calendar-wrapper">
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2019-01-27"><span
                                            class="day">27</span>
                                        <p class="lunar">廿二</p></div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2019-01-28"><span
                                            class="day">28</span>
                                        <p class="lunar">廿三</p></div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2019-01-29"><span
                                            class="day">29</span>
                                        <p class="lunar">廿四</p></div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2019-01-30"><span
                                            class="day">30</span>
                                        <p class="lunar">廿五</p></div>
                                    <div class="em-calendar-item  isforbid0 tipprev" date="2019-01-31"><span
                                            class="day">31</span>
                                        <p class="lunar">廿六</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-01"><span
                                            class="day">1</span>
                                        <p class="lunar">廿七</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-02"><span
                                            class="day">2</span>
                                        <p class="lunar">廿八</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-03"><span
                                            class="day">3</span>
                                        <p class="lunar">廿九</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-04"><span
                                            class="day">4</span>
                                        <p class="lunar">三十</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-05"><span
                                            class="day">5</span>
                                        <p class="lunar">初一</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-06"><span
                                            class="day">6</span>
                                        <p class="lunar">初二</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-07"><span
                                            class="day">7</span>
                                        <p class="lunar">初三</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-08"><span
                                            class="day">8</span>
                                        <p class="lunar">初四</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-09"><span
                                            class="day">9</span>
                                        <p class="lunar">初五</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-10"><span
                                            class="day">10</span>
                                        <p class="lunar">初六</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-11"><span
                                            class="day">11</span>
                                        <p class="lunar">初七</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-12"><span
                                            class="day">12</span>
                                        <p class="lunar">初八</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-13"><span
                                            class="day">13</span>
                                        <p class="lunar">初九</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-14"><span
                                            class="day">14</span>
                                        <p class="lunar">初十</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-15"><span
                                            class="day">15</span>
                                        <p class="lunar">十一</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-16"><span
                                            class="day">16</span>
                                        <p class="lunar">十二</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-17"><span
                                            class="day">17</span>
                                        <p class="lunar">十三</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-18"><span
                                            class="day">18</span>
                                        <p class="lunar">十四</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-19"><span
                                            class="day">19</span>
                                        <p class="lunar">十五</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-20"><span
                                            class="day">20</span>
                                        <p class="lunar">十六</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-21"><span
                                            class="day">21</span>
                                        <p class="lunar">十七</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-22"><span
                                            class="day">22</span>
                                        <p class="lunar">十八</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-23"><span
                                            class="day">23</span>
                                        <p class="lunar">十九</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-24"><span
                                            class="day">24</span>
                                        <p class="lunar">廿</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-25"><span
                                            class="day">25</span>
                                        <p class="lunar">廿一</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-26"><span
                                            class="day">26</span>
                                        <p class="lunar">廿二</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-27"><span
                                            class="day">27</span>
                                        <p class="lunar">廿三</p></div>
                                    <div class="em-calendar-item  isforbid1 tip" date="2019-02-28"><span
                                            class="day">28</span>
                                        <p class="lunar">廿四</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-01"><span
                                            class="day">1</span>
                                        <p class="lunar">廿五</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-02"><span
                                            class="day">2</span>
                                        <p class="lunar">廿六</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-03"><span
                                            class="day">3</span>
                                        <p class="lunar">廿七</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-04"><span
                                            class="day">4</span>
                                        <p class="lunar">廿八</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-05"><span
                                            class="day">5</span>
                                        <p class="lunar">廿九</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-06"><span
                                            class="day">6</span>
                                        <p class="lunar">三十</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-07"><span
                                            class="day">7</span>
                                        <p class="lunar">初一</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-08"><span
                                            class="day">8</span>
                                        <p class="lunar">初二</p></div>
                                    <div class="em-calendar-item  isforbid0 tipnext" date="2019-03-09"><span
                                            class="day">9</span>
                                        <p class="lunar">初三</p></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--重复方式-->
<div class="dateitem repeatday" style="display:none">
    <div class="dateitemhdead">
        <div class="repeathead repeattypekind">
            <p class="repeattype">重复方式</p>
            <div class="daytype">
                <p class="selectrepeatname">天</p>
                <p class="iconfont icon-youjiantou"></p>
            </div>

        </div>
        <div class="repeattext" style="display:none">
            <div class="repeatcontent repeatkind" >
                <ul class="repeatlist">
                    <li class="repeatactive" data-dayid="1">天</li>
                    <li data-dayid="2">周</li>
                    <li data-dayid="3">月</li>
                    <li data-dayid="4">年</li>
                </ul>

            </div>


            <!--重复周-->
            <div class="repeatweek" style="display:none">
                <ul class="weeklist">
                    <li>周一</li>
                    <li>周二</li>
                    <li>周三</li>
                    <li>周四</li>
                    <li>周五</li>
                    <li>周六</li>
                    <li>周日</li>
                </ul>
            </div>

            <!--重复月-->
            <div class="repeatmonth" style="display:none">
                <ul class="monthlist">
                    <li>1</li>
                </ul>
            </div>
        </div>



        <div class="repeathead repeatforever">
            <p class="repeattype">截止</p>

            <div class="daytype">
                <div class="date" style="display:none"></div>
                <div class="dayname">永不结束</div>
                <div class="iconfont icon-youjiantou"></div>
            </div>

        </div>
        <div class="beginend" style="display:none">
            <div class="andate">
                <div class="iconfont icon-xiaoqing-tubiao-weixuanze noxuan" data-kindid="1" id="date5"></div>
                <div class="andatename">按日期</div>
                <!--<input readonly type="text" id="date5" placeholder="blue">-->
            </div>
            <div class="andate forever">
                <div class="iconfont  icon-danxuanxuanzhong noxuan"  data-kindid="2"></div>
                <div class="andatename">永不结束</div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/rolldate.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mustache.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/calendar_singledaybase.js" type="text/javascript" charset="utf-8"></script>
<script src="js/calendar_showcase.js" type="text/javascript" charset="utf-8"></script>
<script>

    new rolldate.Date({
        el:'#date5',
        format:'YYYY-MM-DD',
        beginYear:2000,
        endYear:2100,
        theme:'blue',
        confirmBefore:function(el,date){
            console.log(el)
            $("date5").html("")

            console.log(date)
            $(".date").html(date)
            // $("#")
        },
    })
    $(".datelist li").click(function(){
        var selectkindid=$(this).attr("data-selectid");
        if(selectkindid==1){

            window.location.href='setdate.html'
        }else if(selectkindid==2){

            window.location.href='manyday.html'
        }else if(selectkindid==3){

            window.location.href='beginend.html'
        }else if(selectkindid==4){
            window.location.href='repeatday.html'
        }
       $(this).addClass("active");
       $(this).siblings("li").removeClass("active")
    });
    //重复方式
    $(".repeattypekind").click(function(){
        $(".repeattext").show();
        $(".beginend").hide();
        $(".repeatcontent").show();

    })
    $(".repeatforever").click(function(){
        $(".repeattext").hide();
        $(".beginend").show()
    })

    //重复天数选择
    $(".repeatlist li").click(function(){
        var dayid=$(this).attr("data-dayid");
        console.log(dayid);
        if(dayid==1){
            $(".selectrepeatname").html("天");
            $(".repeatweek").css("display","none");
            $(".repeatmonth").css("display","none");
            $(this).parents(".repeatcontent").css("display",'none')
        }else if(dayid==2){
            $(".selectrepeatname").html("周");
            $(".repeatweek").css("display","block");
            $(".repeatmonth").css("display","none");
            $(this).parents(".repeatcontent").css("display",'none')
        }else if(dayid==3){
            $(".selectrepeatname").html("月");
            $(".repeatmonth").css("display","block");
            $(".repeatweek").css("display","none");
            $(this).parents(".repeatcontent").css("display",'none')
        }else if(dayid==4){
            $(".selectrepeatname").html("年");
            $(".repeatweek").css("display","none");
            $(".repeatmonth").css("display","none");
            $(this).parents(".repeatcontent").css("display",'none')
        }
        $(this).addClass("repeatactive");
        $(this).siblings("li").removeClass("repeatactive");
    })
    //每周选择
    $(".weeklist li").click(function(){

        if($(this).hasClass("weekactive")){
            $(this).removeClass("weekactive")
        }else{
            $(this).addClass("weekactive")
        }
    })

    //每月
    var html=''

    for(var i=0;i<=31;i++){
        html+='<li>'+i+'</li>'

    }
    $(".monthlist").append(html)

    $(".monthlist").on("click","li",function(){
        if($(this).hasClass("monthactive")){
            $(this).removeClass("monthactive")
        }else{
            $(this).addClass("monthactive")
        }

    })

    //选择按日期还是永不结束
    $(".noxuan").click(function(){
        var datakindid=$(this).attr("data-kindid")
        if(datakindid==1){
            $(".date").css("display","block");
            $(".dayname").css("display","none")
        }else if(datakindid==2){
            $(".date").css("display","none");
            $(".dayname").css("display","block")
        }


        $(this).addClass("icon-danxuanxuanzhong");
        $(this).removeClass("icon-xiaoqing-tubiao-weixuanze");
        $(this).parents(".andate").siblings(".andate").children(".iconfont").removeClass("icon-danxuanxuanzhong");
        $(this).parents(".andate").siblings(".andate").children(".iconfont").addClass("icon-xiaoqing-tubiao-weixuanze")

    })
</script>
</html>