vue项目接口域名动态的获取方法
208
2023-07-02
用jmSlip编写移动端顶部日历选择控件
本文为大家分享了jmSlip移动端日历选择组件,可滚动选日期,并限制哪些日期可选和不可选。
主要用来根据后台返回生成一个日期选择器。
具体实现可关注jmslip: https://github.com/jiamao/jmSlip
示例:http://slip.jm47.com/demo/calendar/index.html
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;
}
十月 2016
星期一
二
11
三
12
四
13
五
14
六
15
<p class="week">日
16
一
17
二
18
三
今日
四
20
五
21
六
22
日
23
一
24
二
25
三
26
四
27
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;
}
//找不到可用的日XXCSL期,则返回
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());
});
精彩专题分享:javascript日历插件使用方法汇总
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~