<!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>