首页
所有分类
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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vue首次渲染全过程
Apr 21 Vue.js
微信小程序 富文本转文本实例详解
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
分块(1) 装饰器(1) translation(2) 网页解析(1) 二维数组(2) decorator(1) 循环(3) bs4(1) 读取(1) 查找算法(1)
You might like
PHP中的array数组类型分析说明
2010/07/27 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
js获取单选按钮的数据
2006/11/27 Javascript
javascript编程起步（第七课）
2007/02/27 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JS严格模式知识点总结
2018/02/27 Javascript
微信小程序之自定义组件的实现代码（附源码）
2018/08/02 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python 调用Java实例详解
2017/06/02 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python持续监听文件变化代码实例
2020/07/22 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Zalando Lounge瑞士：时尚与生活方式购物俱乐部
2020/03/12 全球购物
策划主管的工作职责
2013/11/24 职场文书
初中校园广播稿
2014/02/02 职场文书
毕业生学校组织意见
2015/06/04 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
美元符号 $
2022/02/17 杂记