利用jmSlip写一个移动端顶部日历选择组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用jmSlip写一个移动端顶部日历选择组件相关的知识,希望对你有一定的参考价值。

可滚动选日期,并限制哪些日期可选和不可选。

 

主要用来根据后台返回生成一个日期选择器。

 

具体实现可关注jmslip: https://github.com/jiamao/jmSlip

 

示例:http://slip.jm47.com/demo/calendar/index.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>日历</title>
<style>
body,html{
    font-family: Helvetica;
    font-weight: 100;
}
.justify {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.cell-box {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.date-wrap {
    padding: 17px 0 18px;
    overflow: hidden;
}
.date-wrap .hd {
    padding: 0 15px;
    font-size: 12px;
    color: #888;
}
.date-wrap .bd {
    padding-top: 13px;
}
.date-wrap .hd .week {
    font-size: 20px;
    line-height: 26px;
}
.date-wrap .btn-chief-hollow {
    min-width: 49px;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    border: 1px solid #417ddf;
    border-radius: 3px;
    color: #417ddf;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}
.date-wrap .date-list {
    list-style: none;
    display: -webkit-box;
    white-space: nowrap;
    height: 52px;
    font-size: 0;
    margin: 0;
    padding: 0;
}
.date-wrap .date-list li {
    -webkit-box-flex: 1;
    text-align: center;
    display: inline-block;
    text-align: center;
    width: 50px;
    height: 52px;
    font-size: 0;
}
.date-wrap .date-list li .week {
    margin: 0;
    padding: 0;
    padding-bottom: 7px;
    font-size: 12px;
    color: #b2b2b2;
    line-height: 15px;
}
.date-wrap .date-list li .date {
    margin: 0;
    padding: 0;
    position: relative;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    font-size: 14px;
    color: #d3d3d3;
    line-height: 30px;
}
.date-wrap .date-list li.in-case .date {
    color: #000;
}
.date-wrap .date-list li.cur .date {
    background-color: #2f78ec;
    color: #fff;
}
</style>
<script src="http://mat1.gtimg.com/www/mobi/js/zepto.min.js"></script>
<script src="../../src/jmSlip.js"></script>
</head>
<body>
<div class="cell-box">  
    <div class="date-wrap js-calendar">
        <div class="hd justify">
            <div class="lt">
                <p class="js-date">十月 2016</p>
                <p class="week js-week">星期一</p>
            </div>
            <div class="rt">
                <a class="btn-chief-hollow js-tap-on js-today" href="javascript:;">今日</a>
            </div>
        </div>
        <div class="bd">
            <div class="date-list-wrap js-calendar-days-container">
            <!-- 控制li
                 1.当日,加"cur" 
                 2.有事件,加"in-case" -->
                <ul class="date-list js-calendar-days">                    
                    <li class="js-item in-case js-has-data" data-day="20161011"> 
                        <p class="week"></p>                        
                         <p class="date">11</p>                     
                    </li>
                    <li class="js-item" data-day="20161012"> 
                        <p class="week"></p>                        
                         <p class="date">12</p>                     
                    </li>
                    <li class="js-item in-case js-has-data" data-day="20161013"> 
                        <p class="week"></p>                        
                         <p class="date">13</p>                     
                    </li>
                    <li class="js-item in-case js-has-data" data-day="20161014"> 
                        <p class="week"></p>                        
                         <p class="date">14</p>                     
                    </li>
                    <li class="js-item" data-day="20161015"> 
                        <p class="week"></p>                        
                         <p class="date">15</p>                     
                    </li>
                    <li class="js-item" data-day="20161016"> 
                        <p class="week"></p>                        
                         <p class="date">16</p>                     
                    </li>
                    <li class="js-item in-case js-has-data" data-day="20161017"> 
                        <p class="week"></p>                        
                         <p class="date">17</p>                     
                    </li>
                    <li class="js-item" data-day="20161018"> 
                        <p class="week"></p>                        
                         <p class="date">18</p>                     
                    </li>
                    <li class="js-item in-case js-has-data" data-day="20161019"> 
                        <p class="week"></p>                        
                         <p class="date">今日</p>                     
                    </li>
                    <li class="js-itema" data-day="20161020"> 
                        <p class="week"></p>                        
                         <p class="date">20</p>                     
                    </li>
                    <li class="js-item" data-day="20161021"> 
                        <p class="week"></p>                        
                         <p class="date">21</p>                     
                    </li>
                    <li class="js-item in-case js-has-data" data-day="20161022"> 
                        <p class="week"></p>                        
                         <p class="date">22</p>                     
                    </li>
                    <li class="js-item" data-day="20161023"> 
                        <p class="week"></p>                        
                         <p class="date">23</p>                     
                    </li>
                     <li class="js-item in-case js-has-data" data-day="20161024"> 
                        <p class="week"></p>                        
                         <p class="date">24</p>                     
                    </li>
                     <li class="js-item in-case js-has-data" data-day="20161025"> 
                        <p class="week"></p>                        
                         <p class="date">25</p>                     
                    </li>
                     <li class="js-item in-case js-has-data" data-day="20161026"> 
                        <p class="week"></p>                        
                         <p class="date">26</p>                     
                    </li>
                     <li class="js-item in-case js-has-data" data-day="20161027"> 
                        <p class="week"></p>                        
                         <p class="date">27</p>                     
                    </li>
                </ul>
            </div>           
        </div>
    </div>
</div>
<br />
<br />
<div class="js-content"></div>
<script>
    var slipCalendar = new jmSlip($(.js-calendar-days-container),item,{
        mousewheel:true,//支持滚轮
        direction: x, 
        page: $(.js-calendar-days li[data-day="20161019"]).index(),//默认选中20161019这天,当它为今天
        duration: 800,
        itemOffWidth: 0, //每个项的偏移量纠正
        //当滑动时自动选择回调,自定义控制是否可选
        selectHandler: function(curIndex, newIndex) {
            //获取自动选择的那一天,如果不是可选的,则选择它最近的一天
            var item = $(.js-calendar-days li).eq(newIndex);
            if(!item.hasClass(js-has-data)) {
                //如果是往后拉,则优先向后搜询可用的日期
                //只往前后同时搜4天,超过,则按用户拉的方向一直向下搜
                var der = curIndex > newIndex?-1:1;
                for(var i=1;i<5;i++) {
                    var index = newIndex+(i*der);
                    item = $(.js-calendar-days li).eq(index);
                    if(item.hasClass(js-has-data) && index != curIndex) return index;
                    index = newIndex-(i*der);
                    item = $(.js-calendar-days li).eq(index);
                    if(item.hasClass(js-has-data) && index != curIndex) return index;
                }
                //依然没有找到,则一直往前找
                //最长找三个月
                for(;i<93;i++) {
                    var index = newIndex+(i*der);
                    item = $(.js-calendar-days li).eq(index);
                    if(item.hasClass(js-has-data) && index != curIndex) return index;
                }
                
                //找不到可用的日期,则返回
                return false;
            }
        },
        onPageStart: function(index){
            //获取自动选择的那一天,如果不是可选的,则选择它最近的一天
            var item = $(.js-calendar-days li).eq(index);
            if(!item.hasClass(js-has-data)) return false;
        },
        onTouchMove: function(evt, offset) {
            
        },
        onPageEnd: function(oldPage,newPage) {                    
            //定位于选择的那一天
            var item = $(.js-calendar-days li).eq(newPage);
            if(item.hasClass(cur)) return;//如果它是已经被选中的,则直接返回,不需要再触发查询数据
            $(.js-calendar-days).find(li.cur).removeClass(cur);
            item.addClass(cur);
            
            //刷新其数据
            $(.js-content).html(item.attr(data-day));
        }
    });

    //选中某个日期,则拉取它的数据
    //只能选择有数据的项
    $(.js-calendar-days).on(click, .js-has-data, function(){
        if(!slipCalendar || $(this).hasClass(cur)) return;
        //定位于选择的那一天
        slipCalendar.go($(this).index());            
    });

    $(.js-today).click(function(){
        slipCalendar.go($(.js-calendar-days li[data-day="20161019"]).index());
    });
</script>
</body>
</html>

 

以上是关于利用jmSlip写一个移动端顶部日历选择组件的主要内容,如果未能解决你的问题,请参考以下文章

记录-Vue移动端日历设计与实现

移动端日历选择控件(支持Zepto和JQuery)

vue 手机端日历组件

vue日历(农历)组件

如何造一个『为移动端而生』的日历

重写移动端滚动条[iScroll.js核心代码]