手势拖动选择日期

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

手势拖动选择日期 ie兼容11

更新时间: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插件是很不错的插件,可以实现更多的功能。

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

手写日期选择器

简单实用的js日期选择器
  日期和时间
 14411  17

基于amazeui全年日历

一款基于amazeui的全年日历,日历可以添加时间记录,中英文切换
  日期和时间
 14464  28

jquery 圆形进度式倒计时

jquery 圆形进度式倒计时
  日期和时间
 16082  43

倒计时

jquery倒计时
  日期和时间
 12178  27

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币

    诺、??? 0
    2018/7/16 15:01:10
    滑动时,滑动到中间的selectLine的元素没有激活状态吗?我想要给滑动到中间的元素文字改变颜色来突出一下
        黄河爱浪1
        2018/7/18 14:19:36
        mobileSelect插件还支持一个 transitionEnd 属性,传递后,这个函数接收两个参数,当前的位置和值,可以试一下,当前插件源码
    回复
    前行者 0
    2018/6/8 16:04:20
    为什么日期划不动 new MobileSelect这个未定义
        黄河爱浪0
        2018/6/13 17:28:34
        检查好自己的文件引用和自己的样式层级!几百人就你滑不动
    回复
    0
    2018/5/24 14:35:25
    怎么把获取到的年月日的格式改为2018-5-24,请问在插件的哪里可以修改
        黄河爱浪1
        2018/5/24 14:37:49
        回调函数返回的是一个对象,{year:年份,month:月份,day:日期},根据返回的结果自己拼凑所需要的格式。
        0
        2018/5/24 14:48:26
        已解决,谢谢
        0
        2018/5/28 10:15:24
        请问在哪里改,让最后的格式变为2018-05-01,就是单位数是添0
        黄河爱浪0
        2018/6/3 17:13:58
        得到年月日之后,判断是否大于10不就知道是否要添加一个0了么
    回复
    moon 0
    2018/5/18 17:01:39
    请问怎么设置。只显示年月 谢谢!!!!
        黄河爱浪0
        2018/5/18 17:08:16
        本插件提供的功能是最常用的【年-月-日】格式,您的需要是比较简单的,可以先添加我的QQ:1846492969,我可以给你写一个简单的!
    回复
    影子 0
    2018/5/7 21:34:21
    如果同时使用两个日期级联选择器 如何联动动态设置选中的日期 一个改变 另一个选中日期也接着改变
    发现
    一是 目标对象获取不到最多只能获取到最后一个
    二是 调用mobileSelect 的locatePosition() updateWheel() updateWheels() 方法出错
        影子0
        2018/5/7 21:35:38
        希望大佬帮忙解决一下
    回复
    我行我肃 0
    2018/4/2 23:52:41
    大佬,怎么设置成第一个是几月几日,第二个是小时,第三个是分钟? 回复
    浮夸了年华丶 0
    2018/3/15 10:18:00
    当前月份之前的月份不显示 怎么判断
        黄河爱浪0
        2018/3/15 10:20:04
        小砖头丨丨0
        2018/3/21 11:18:44
        大佬,有没有专门选择时间的插件
        黄河爱浪0
        2018/3/21 11:39:18
        您好,@小砖头,您的回复位置错误了,应该另起一楼!当前不就是插件么?如果未满足您的需求,可以通过邮箱与我联系,详细说明您的问题,谢谢!
    回复
    阿狸和橙子 0
    2018/3/8 12:06:41
    一个页面需有无数个时间选择,怎么处理
        黄河爱浪0
        2018/3/8 13:34:28
        创建多个 mobileSelect实例,也就是多复制粘贴几个,改变选择器既可。鉴于这种情况,我最近在编写插件,急需的话可以与我联系,下方有我的邮箱。或者等待我的下次更新,谢谢!
    回复
    Ang。叁?廿肆 0
    2018/3/8 9:44:36
    十分感谢楼主啊,分享的这个插件正好解决了我的燃眉之急!功能效果十分完美,界面设计也很高端大气。最重要的是,免费的,免费的,免费的!重要的事说三遍。好人一生平安,祝楼主2019新年快乐!
        Ang。叁?廿肆0
        2018/3/8 13:39:33
        另外麻烦乐于助人的楼主把源码发过来参考下!谢谢了
    回复
    郝冰 0
    2018/3/4 8:56:44
    如何设置打开后默认是今天的日期?
        黄河爱浪3
        2018/3/4 12:16:58

        非常感谢您的回复,本示例原意思是示例一下用mobileselect插件实现常用的功能。您的问题也确实非常有意义。如果默认选择当前日期,这还是由mobileselect插件本身提供的参数去完成的。

        -----------------------------------

        点击后默认选中当前日期,这还是由mobileselect插件提供的参数去完成的,在mobileselect中有一项position,position属性的作用请查看mobileselect插件的介绍,下面代码将示例您所需要的功能需求

         var nowdate = new date();
         var positionarr = [nowdate.getfullyear() - (nowdate.getfullyear() - 60), nowdate.getmonth(), nowdate.getdate() - 1]
         var selectdate = new mobileselect({
             trigger: '#selectdate',
             title: '手势拖动选择日期',
             wheels: createdatedata(nowdate.getfullyear() - 60, nowdate.getfullyear()),
             position: positionarr,
             callback: function(indexarr, data) {
                 console.log(data); /*返回选中的json数据*/
                 document.queryselector("#selectdate").innerhtml = data[0].value + data[1].value + data[2].value;
             }
         });

        将插件中position的[0,0,0]替换成按当前日期计算过后的位置数即可。上示例代码是年份区间是60年前至当前年份。有更多问题欢迎留言,mobileselect相关问题推荐去学习插件帮助文档。感谢您的回复,有更多的需求可以与我联系,我会在后续的版本更新中完善,谢谢!

    回复
取消回复