Question

html移动端横向日历插件

有类似这种样式的插件吗？？？求

Answer 1

在最近的H5开发工作中，遇到一个横向滑动选择日期的需求，年月修改方式不限，日期为滑动，横向标注星期，每次滑动一周，下面为大家介绍一下我的一个实现思路，有更好的方案欢迎留言。

初期效果

页面结构与动画分析

<div class="diy-calendar-weeks-wrapper">
<div class="diy-calendar-week diy-calendar-prev" data-year="" data-month="" style="transform: translate3d(-100%, 0%, 0px);">
</div>
<div class="diy-calendar-week diy-calendar-current" data-year="" data-month="" style="transform: translate3d(0%, 0%, 0px);">
</div>
<div class="diy-calendar-week diy-calendar-next" data-year="" data-month="" style="transform: translate3d(100%, 0%, 0px);">
</div>
</div>12345678

• 日期部分，采用了三个容器，利用transform布局于页面左中右侧；

• 判断页面滑动事件，滑动方向和距离满足条件之后，通过改变元素transform，配合transition实现动画效果；

• 即将被移出的diy-calendar-week  直接删除，在另一侧补充新的diy-calendar-week内容；

数据与日期生成

• 以当前时间为基准，判断当前是星期几，生成周的html，放进diy-calendar-current；

• 然后以当前周的第一天或最后一天的时间戳为基准，以7天为周期，计算prev和next的日期，生成html；

• 页面进行动画时，计算日期动态生成html；

• 年月改变时，以新的日期为基准，初始化日期。

追问

有直接的代码示例吗？

Answer 2

你好，请问你找到这种插件了吗？