移动端html5 时间选择控件(类似ios滚轮方式)

2019独角兽企业重金招聘Python工程师标准>>>

mobiscroll：

js和css文件下载地址：

https://pan.baidu.com/s/1eSx8NXC

 示例代码

<script type="text/javascript">
$(function(){
	$('.topicDateTime').mobiscroll().datetime({
        theme: "android-holo-light",     // Specify theme like: theme: 'ios' or omit setting to use default 
        mode: "scroller",       // Specify scroller mode like: mode: 'mixed' or omit setting to use default 
        display: "bottom", // Specify display mode like: display: 'bottom' or omit setting to use default 
        lang: "zh",       // Specify language like: lang: 'pl' or omit setting to use default
        minDate: new Date(),  // More info about minDate: http://docs.mobiscroll.com/2-16-1/datetime#!opt-minDate
        maxDate: new Date(new Date().setMonth(new Date().getMonth() + 6)),   // More info about maxDate: http://docs.mobiscroll.com/2-16-1/datetime#!opt-maxDate
        dateFormat:"yy-mm-dd",
        timeFormat:"HH:ii",
        stepMinute: 1  // More info about stepMinute: http://docs.mobiscroll.com/2-16-1/datetime#!opt-stepMinute
    });
})
</script>

tinyScroll.js:

github地址：https://github.com/602884291/tinyscroll.js

代码示例：

var ts;
if (!ts) {
    // init `ts`
    ts = new TinyScroll({
        wrapper: '#container',
        needLabel: true,
        range: ['2010/03/09 12:30:00', '2015/01/01 23:00:00'],
        time: true,
        initDate: '2011/07/20 18:30:00',
        cancelValue: '取消',
        okValue: '确定',
        okCallback: function(date) {
            alert(date);
        }
    });
} else {
    // if the `ts` is defined
    ts.showScroller();
}

 

转载于:https://my.oschina.net/u/1024107/blog/748144