首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用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日历插件使用方法汇总

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

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

- Author -

家猫47

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
js获取checkbox值的方法
Jan 28 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
vue实现菜单切换功能
May 08 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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
调频(4) KDKA(1) ad hoc(1) SWL(1) 立体声(1) SW(1) 中波(3) GWEN(1) 调幅(1) FM(4)
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript面向对象程序设计（一）
2015/01/29 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
微信公众号  提示：Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Three.js基础学习教程
2017/11/16 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python @property使用方法解析
2019/09/17 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python 闭包，函数分隔作用域，nonlocal声明非局部变量操作示例
2019/10/14 Python
python的等深分箱实例
2019/11/22 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python实现拼图小游戏
2020/02/22 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
波兰补充商店：Muscle Power
2018/10/29 全球购物
印尼在线旅游门户网站：NusaTrip
2019/11/01 全球购物
预备党员群众意见
2015/06/01 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技