用jmSlip编写移动端顶部日历选择控件


Posted in Javascript onOctober 24, 2016

本文为大家分享了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>

精彩专题分享:javascript日历插件使用方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
js 通用订单代码
Dec 23 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
js中的数组对象排序分析
Dec 11 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 #Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 #Javascript
JavaScript reduce和reduceRight详解
Oct 24 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
php重定向的三种方法分享
2012/02/22 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
微信小程序 网络通信实现详解
2019/07/23 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
幼儿园教师节演讲稿
2014/09/03 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
岳庙导游词
2015/02/04 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Python WSGI 规范简介
2021/04/11 Python