手势拖动选择日期

所属分类:输入-日期和时间,拖和放

 40251  347  查看评论 (72)
分享到微信朋友圈
X
手势拖动选择日期 ie兼容11

更新时间:2019-12-03 00:52:30

更新说明:修复年月版选择后不更新页面的问题,未设置 html 值。


更新时间:2019-09-25 22:47:01

更新说明:更新 mobileSelect.js 版本,支持更多新增API;去除选择后模认替换选择元素 HTML 值的问题,把选择权交给开发者自己;返回 mobileSelect 实例,更方便的直接使用 mobileSelect 轮子的API;


更新时间:2019/3/20 上午11:31:54

更新说明:修复默认选中上期时,日期列选择异常问题!


更新时间:2018/7/31 上午10:39:39

更新说明:新增选择日期(年月版)

$.selectDateSimple();

使用方式与 $.selectDate() 一致

select[]的长度为2,例:select[2016,6]


更新时间:2018/3/11 下午11:54:46

更新说明:为更好的使用该日期选择器插件,进一步完善了该插件

使用方式:

1、引用文件:

<script type="text/javascript" src="selectDate.js"></script>

2、方法调用:

$.selectDate("#select_1", {
    start: 1994,
    end: 2018,
    select: [2012, 5, 6],
    title: '这个选择器很秀'
}, function(data) {
    console.log(data);
});

3、参数详解:

("选择器", {
        start(开始年份),
        end(结束年份),
        select[](默认选择的年月日),
        title(展开时选择器时的标题)
    }, function() {}??
回调函数)

4、回调函数详解:

year-年份

month-月份

day-日期


该手势拖动选择日期功能是通过mobile插件完成的,mobile的wheels由createdatedata函数完成。只需要将您所需要的年份区间传递给createdatedata函数即可。
createdatedata函数接收两个参数,start:开始年份,end:结束年份。就可以轻松实现日期选择功能了。
mobile插件是很不错的插件,可以实现更多的功能。

相关插件-日期和时间,拖和放

jQuery时间轴插件Timelinr 2.0

jQuery Timelinr 在此插件上新增了一个单页面水平和垂直同时共存
  日期和时间
 29862  342

翻牌时钟效果三种效果

翻牌时钟效果三种效果
  日期和时间
 49730  452

jQuery双日历选择

jQuery实现双日历选择插件double-date.js
  日期和时间
 41485  342

jQuery带时间可拖动式时间轴(原创)

jQuery带时间可拖动式时间轴,代码注释全。
  日期和时间
 29677  227

讨论这个项目(72)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    专业写bug 0
    2020/6/15 14:16:52
    大佬,这个在安卓非常卡!!!
        黄河爱浪0
        2020/6/15 14:19:05
        没法优化,这个与设备配置和浏览器内核有关。要流畅是不可能的,最多就是能用。地基建设决定了楼层的高度,所以不是原生渲染也不可能有流畅的体验。关闭页面上的其它自执行动画,应该会改善一些体验吧。
    回复
    Become_Ape 0
    2019/10/12 11:43:57
    作者 这个有放git吗,我在你的代码之上加了个年月日星期版本
        黄河爱浪0
        2019/10/12 11:47:32
        没有哦,这只是使用了别人的轮子封装了数据而已。放 git 不太合适。又不是什么个人全部原创和大项目
    回复
    沙鸥 0
    2019/9/23 10:09:18
    我表述的不到位,我想要的格式是yyyy,能只选择年份,其他月,日不显示
        黄河爱浪1
        2019/9/23 10:11:16
        该插件是通过mobileSelect.js 插件实现的滑动效果,你可以百度这个插件,根据这个插件的文档写出自己所需要的数据格式。
    回复
    沙鸥 0
    2019/9/23 10:06:37
    怎么只选择年份了?
        黄河爱浪0
        2019/9/23 10:09:13

        mobileSelect.js 插件文档地址:

        https://github.com/onlyhom/mobileSelect.js

        可使用该插件封装自己需要的选择器

    回复
    null 0
    2019/9/9 11:28:53
    ios点击了没反应 请问大佬怎么解决(事件有触发 Android可以)
        黄河爱浪0
        2019/9/9 11:32:42
        请先确认自己的布局能兼容苹果手机,当前demo在苹果手机是不会有该问题的,我自己的项目中也没有该问题。
        null0
        2019/9/9 11:42:19
        布局问题么 我在selectDate.js下逐步打印执行结果 发现createDateData函数没有被执行 (ios不懂啊 大佬略知的话帮我解惑一下)
    回复
    YulJS 0
    2019/8/6 20:13:02
    大佬,你这个最后插入日期的那个方法在哪里呀我找不到,我在那个div中设置了id后他直接插入到div里了,导致div中的其他标签都没了
        YulJS0
        2019/8/6 20:16:05
        写得很好,而且能加注释就更好了..我看不懂也不太好修改...
        黄河爱浪1
        2019/8/6 20:20:00
        这是mobileSelect插件的默认绑定好的事件,你可以设置一个透明的div,然后把事件绑定在这个div上,我现在封装的插件有提供callback函数。然后自己再拼接你要的数据结果,设置到你需要设置的元素中。下方的评论中有我的联系方式,有需要的话添加我的QQ吧
        YulJS0
        2019/8/6 20:56:39
        哇,回复的好快!!!感谢!感谢!
    回复
    反杀闰土的猹 0
    2019/8/2 16:52:24
    大佬,这个可以设置时间吗?怎么设置啊?可以提供一个demo吗
        黄河爱浪0
        2019/8/2 16:54:40
        请将你的问题详细描述,认真体验一下demo,有一项设置是设置默认选择那一项可以设置默认选中的日期

        有其它需求可以添加我的QQ,在下方的评论中有我的QQ号码
        反杀闰土的猹0
        2019/8/2 16:58:40
        设置时分秒那种格式,这个可以吗?比如:23时 15分 35秒,如果可以,能提供一个demo吗?谢谢
    回复
    白以 0
    2019/5/24 17:14:15
    下载了好几个都不能用
        黄河爱浪1
        2019/5/24 22:08:54
        您好,本插件是绝对可以使用的,当前下载次数已达4000余次,所有插件都是管理人员审核过的,不存在不可用的说法。请确认自己的代码事件触发、元素层级、插件依赖等问题谢谢。如果有需要技术支持,请联系我的QQ:1846492969,谢谢!
    回复
    |.逍遥ギ¤沉默∮ 0
    2018/12/29 15:05:00
    用了这个被大佬批了一顿!说用户体验差!
        黄河爱浪0
        2018/12/29 15:07:51
        很想知道你所说的大佬能写出什么花来
    回复
    ```染指流年 0
    2018/12/3 17:01:05
    我就是要一打开就是当天的时间日期。大佬,这个怎么搞。
        黄河爱浪0
        2018/12/29 15:06:04
        认真体验一下 mode好吗,默认不就是默认选中当天日期么
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复