仿mobiscroll时间插件

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

仿mobiscroll时间插件 ie兼容10

更新时间:2017-4-26 11:14:25

更新说明:修复不显示input中对应时间错误。

sjObj.defaults = {
    type: "time",
    Format: "yyyy-mm-dd", //显示时间格式//yyyy表示年份 ,mm月份 ,dd天数  支持三种格式 dd-mm-yyyy ,mm-dd-yyyy yyyy-mm-dd
    Order: 'yymmdd',
    width: 60, //默认宽度
    height: 32, //默认数值高度
    Year: true, //是否显示年//
    Month: true, //是否显示月//
    Day: true, //是否显示日//
    Hour: true, //是否显示小时
    Minute: true, //是否显示分钟
    Seconds: false, //是否显示秒
    yyyy: "0000", //当前显示年
    mm: "00", //当前显示月
    dd: "00", //当前显示日
    h: "00", //当前显示小时
    m: "00", //当前显示分
    s: "00", //当前显示秒
    yearText: "年", //顶部时间 年单位 文字
    monthText: "月", //顶部时间 月单位 文字
    dayText: '日', //顶部时间 日单位 文字
    hourText: '时', //顶部时间 时单位 文字
    minuteText: '分', //顶部时间 分单位 文字
    secondsText: '秒', //顶部时间 秒单位 文字
    okText: "确认", //按钮确认键文字
    cancelText: "取消", //按钮取消键文字
    showNowTime: true, //是否默认显示当前时间
    alwaysShow: false, //是否默认直接显示插件
    timeElm: null, // 需要在哪个元素中展示元素需要定位  可使用字符串的形式("$(sjObj).prev()" sjObj表示当前时间对象
    onfun: function() { //取消改变时间时候执行事件
    },
    okfun: function() { //确认时间时候执行事件

    },
}

目前我测试 是没有问题的 ,只要你不乱来 在 input中放入正确的时间值便可。

如果发现问题欢迎反馈


代码的备注还是挺全的 基础好的应该都能看懂

$("#input2").shijian({
    showNowTime: false,
    Year: false, //是否显示年//
    Month: false, //是否显示月//
    Day: false, //是否显示日//
    h: "00", //自定义起始小时
    m: "01", //自定义起始分钟
    alwaysShow: true,
    timeElm: $(".time-box"), //sjObj表示当前对象
})
相关插件-日期和时间

选择日期

一个选择下拉日期的代码
  日期和时间
 22649  79

mobiscroll_手机上下滚动选择日期时间

可以上下滚动选择年月日时分秒
  日期和时间
 25926  181

基于jQuery的双日历插件pickerDateRange(改)

基于jQuery的双日历插件pickerDateRange修改版
  日期和时间
 4324  19

jQuery手机端酒店日历插件

一款简单的手机端日历插件,可以选择入住和离店日期,控制选择天数
  日期和时间
 1581  10

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

    冥契步 0
    2017/7/14 12:17:11

    发现两个问题.

    1,设置hour;false;minute:false;后,第一次点是当前时间,之后再点就变成另外的时间了

    2,显示的年份只能是当前年份之前的或者之后的,不能共存

        瓶子0
        2017/7/21 14:32:26

        谢谢反馈。有空我改改

    回复
    习惯不了的总是自己 0
    2017/7/4 16:19:27

    提问设置了startYear和endYear就什么都不显示了这是为什么啊

        瓶子0
        2017/7/21 14:34:07
        最近没空改啊 。抱歉 ,捂脸
    回复
    肱あ、 0
    2017/6/7 10:24:08

    sjObj.defaults 这一块只是说明? 没看到有调用

        肱あ、0
        2017/6/7 10:24:56

        bug大概在哪一部分?

        肱あ、0
        2017/6/7 10:42:59

        小时 分钟 就算关闭了 还是会显示00;00

        瓶子0
        2017/6/8 17:57:08

        那是默认属性。。

        这里把两个对象合并了

    回复
    未成年~ 0
    2017/6/5 9:42:56

    我想问下 插件粘贴过去乱码 还报错怎么办

        瓶子0
        2017/6/6 10:39:47

        编码格式的问题吧。。  你粘贴过去的话最好整个一起。

    回复
    旺旺123 0
    2017/6/2 14:31:20
    同时设置两个控件,怎么让后面的时间必须大于前面那个
        瓶子0
        2017/6/3 14:44:06

        你这个是要日期选择, 类似酒店入住那种对吧,目前插件还不适合你说的这个功能,如果你就是想用上的话 ,那就只能分开设置 , 分别在 okfun中做判断,  

        瓶子0
        2017/6/3 14:45:25

        主要是我没时间改插件了 (其实是我懒 ~~~///(^v^)\\\~~~)。现在这里这个版本,还有bug的

    回复
    lxhtml 0
    2017/5/25 10:52:00

    想请问一个问题 ,怎么修改它  过期的时间不能选择,我在滑动的时候,进行判断,小于当前时间的时候就让translate等于当前的时间,写了,但是没反应。。。

        lxhtml0
        2017/5/25 11:10:47
        var daobj = new Date();
        if (sjObj.opt.yyyy == daobj.getFullYear()) {
            if (sjObj.opt.mm < daobj.getMonth() + 1) {
                sjObj.opt.timeElm.find("[data-class='mm'] .df-li").each(function() {
                    if (parseInt($(this).attr("data-val")) == parseInt(sjObj.opt.mm)) {
                        var pY = -($(this).index() - 2) * sjObj.opt.height;
                        $(this).parent().css({
                            "transform": "translate(0," + pY + "px)"
                        });
                        return false
                    }
                })
            }
        lxhtml0
        2017/5/25 11:54:52

        我现在只能是 通过 getFinal()函数里面的 webkitTransitionEnd 事件控制如果小于当前时间则恢复到当前时间  感觉有点BUG,操作快,一样可以选择 过期的时间。。。

        lxhtml0
        2017/5/25 12:11:24

        就这么先用着吧。。。

        瓶子3
        2017/5/26 9:26:51
        var moveEnd = function(e) {
                stop(e);
                if (e.originalEvent.touches) {
                    EE = e.originalEvent.changedTouches[0]
                } else {
                    EE = e;
                }
                //alert("松开鼠标")
                eX = EE.pageX;
                eY = EE.pageY;
                maxY = sjObj.opt.height * 2;
                minY = -(emlLang - 3) * sjObj.opt.height;

        这里 maxY 和minY .. 如果你要限制过期时间可以这里设置最小Y,获取(最大过期时间的下标+2)*2,  还可以通过这个判断是否要执行getFinal

        瓶子0
        2017/5/26 9:32:38

        我有修改一个版本,但最近没时间修改了。 项目上用了多少我就做多少,,过节有空我再把这个功能也加上吧

        lxhtml0
        2017/5/28 17:42:02

        嗯。。。我用的方式和你的不同。。。我的比较笨一点。。。

        setDateTime:function (obj,position,fun,mtf) {//判断过期时间
        var daobj = new Date();
        if (sjObj.opt.yyyy == daobj.getFullYear() && mtf == true) {
            if (sjObj.opt.mm < daobj.getMonth() + 1) {
                sjObj.opt.mm = daobj.getMonth() + 1;
                sjObj.opt.timeElm.find("[data-class='mm'] .df-li").each(function() {
                    if (parseInt($(this).attr("data-val")) == daobj.getMonth() + 1) {
                        var pY = -($(this).index() - 2) * sjObj.opt.height;
                        $(this).parent().css({
                            "transform": "translate(0," + pY + "px)"
                        });
                        return false
                    }
                })
            }
        lxhtml0
        2017/5/28 17:44:18

        现在是改成了是 选择之后 进行判断,如果是过期的时间,就回滚到当前时间,快速点击也是直接显示当前时间,我也是因为比较赶时间。。。没有太仔细去研究你的代码・・・・・・・

    回复
    瓶子 0
    2017/4/28 10:00:40

    这个留言可以粘贴代码的 ,如果有错误的话,可以把调用插件时的代码一天贴上来就好了

    回复
    假哭假笑假心碎 0
    2017/4/27 15:42:31

    okfun和onfun不起作用呢?

        瓶子0
        2017/4/28 9:59:43
        $("#input1").shijian({
        	onfun:function(){
        		alert("取消了")
        	}
        })

        你是这样写的吗?

    回复
    蚊子不可恶 0
    2017/4/25 16:59:54
    手机弹不出来,也不能输入,输入又会变回自己设置的默认值
        瓶子0
        2017/4/26 9:40:31

        能下看下你调用插件时怎么写的吗?

    回复
取消回复