仿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表示当前对象
})
相关插件-日期和时间

JQuery日期选择插件

支持中文,可以选择日期,不能选时间,有demo
  日期和时间
 10839  25
  日期和时间
 11508  98

简单的倒计时插件

简单的倒计时插件
  日期和时间
 8569  31

Jquery滑动日期输入控件

Jquery滑动日期输入控件,手机使用效果最佳
  日期和时间
 11526  67

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

    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

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

    回复
取消回复