移动端仿iOS日期时间选择控件datePicker-原创

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

 10906  64  查看评论 (39)
移动端仿iOS日期时间选择控件datePicker-原创 ie兼容10

datePicker

使用方法

页面引入datePicker.js

<script src="js/datePicker.js"></script>

调用方法及参数设置

var calendar = new datePicker();
calendar.init({
	'trigger': '#demo1', /*按钮选择器,用于触发弹出插件*/
	'type': 'date',/*模式:date日期;datetime日期时间;time时间;ym年月;*/
	'minDate':'1900-1-1',/*最小日期*/
	'maxDate':'2100-12-31',/*最大日期*/
	'onSubmit':function(){/*确认时触发事件*/
		var theSelectData=calendar.value;
	},
	'onClose':function(){/*取消时触发事件*/
	}
});
相关插件-日期和时间

jQuery日期时间选择插件jHsDate

一个简单的jQuery日期时间选择插件
  日期和时间
 5274  18

Canvas时钟插件clock-canvas.js

使用html5中Canvas技术,绘制钟表表盘,表面大小支持自适应。
  日期和时间
 4242  26

jQuery时间插件timedropper

timedropper是一个jQuery时间选择插件。管理时间输入字段的标准形式。专注于输入打开一个小的互动时间选择。
  日期和时间
 8823  55

简单的倒计时

这是一个实用的倒计时插件,希望大家喜欢。
  日期和时间
 4997  12

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

    笑容vs 0
    2017/7/21 9:58:34

    为什么在手机上测试的时候先弹出输入法,不是应该直接弹日期的吗

    回复
    Jone-Chen 0
    2017/7/14 10:31:24

    有bug,一个页面只能一个地方可以适用 ,多个地方怎么用呢

    回复
    黑胡椒 0
    2017/7/4 16:27:09

    跟微信小程序很像,感觉很不错

    回复
    卜大叔 0
    2017/6/29 16:43:02
    页面有多个地方需要调用,怎么破
        一根面,加碗蛋。5
        2017/7/18 15:24:46

        可以多new几个对象。像这样就行了(已实测):

        var calendar = new datePicker();
        calendar.init({
        'trigger': '#time_select1', /*按钮选择器,用于触发弹出插件*/
        'type': 'date',/*模式:date日期;datetime日期时间;time时间;ym年月;*/
        'minDate':'1900-1-1',/*最小日期*/
        'maxDate':'2100-12-31',/*最大日期*/
        'onSubmit':function(){/*确认时触发事件*/
           var theSelectData=calendar.value;
               console.log(theSelectData)
               return
           },
           'onClose':function(){/*取消时触发事件*/
            console.log('取消')
            return
           }
        });
        var calendar2 = new datePicker();
        calendar2.init({
        'trigger': '#time_select2', /*按钮选择器,用于触发弹出插件*/
        'type': 'date',/*模式:date日期;datetime日期时间;time时间;ym年月;*/
        'minDate':'1900-1-1',/*最小日期*/
        'maxDate':'2100-12-31',/*最大日期*/
        'onSubmit':function(){/*确认时触发事件*/
           var theSelectData=calendar.value;
               console.log(theSelectData)
               return
           },
           'onClose':function(){/*取消时触发事件*/
            console.log('取消')
            return
           }
        });
        一根面,加碗蛋。0
        2017/7/18 15:46:12

        选择后的值是new对象的value属性,上面的calendar2的值要改为calendar2.value;

    回复
    Choose 0
    2017/6/28 17:42:56

    挺好的,之前我碰到一个有BUG,自己修改了半天

    回复
    蝈蝈1573 0
    2017/6/26 11:44:49

    没有选择时间的表出来,只有一个取消和一个确定,还不能点击

    回复
    淡然 0
    2017/6/24 11:34:35
    jingyuanhe 0
    2017/6/23 13:55:15

    小米5c年滑动可以,月日的滑动不了

        精神小伙0
        2017/6/24 10:22:38

        你们怎么获取的value值

        精神小伙0
        2017/6/24 14:17:18

        知道了

    回复
    陈莎莎 0
    2017/6/16 12:51:58

    楼主,请问我type选择=datatime,怎?设置maxtime的时间为当前时间,案例里只能限制年月日,时分限制不了

    var calendar = new datePicker();
        calendar.init({
            'trigger': '#demo1', /*按钮选择器,用于触发弹出插件*/
            'type': 'datetime',/*模式:date日期;datetime日期时间;time时间;ym年月;*/
            'minDate':'1900-1-1',/*最小日期*/
            'maxDate':new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),/*最大日期*/
            'onSubmit':function(){/*确认时触发事件*/
                var theSelectData=calendar.value;
            },
            'onClose':function(){/*取消时触发事件*/
            }
        });

    在后面加了new Date().getHours()+new Date().getSeconds()这串也不行,而且还点击不出来时间选择表了

    回复
    犯二青年的Le趣 0
    2017/6/15 11:45:41

    楼主你真的测过?这个在网页里面显示的日期根本就不对

    回复
取消回复