编程 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权威指南学习笔记之null和undefined

Sep 25 Javascript

onkeydown事件解决按回车键直接提交数据的需求

Apr 11 Javascript

JavaScript字符串对象charAt方法入门实例（用于取得指定位置的字符）

Oct 17 Javascript

javascript通过获取html标签属性class实现多选项卡的方法

Jul 27 Javascript

js实现各种复制到剪贴板的方法(分享)

Oct 27 Javascript

Angular4实现图片上传预览路径不安全的问题解决

Dec 25 Javascript

JavaScript中 ES6变量的结构赋值

Jul 10 Javascript

vue自定义指令用法经典实例小结

Mar 16 Javascript

layui下拉列表select实现可输入查找的方法

Sep 28 Javascript

vue+elementui 对话框取消表单验证重置示例

Oct 29 Javascript

解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

Nov 29 Javascript

Vue开发中常见的套路和技巧总结

Nov 24 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