仿mobiscroll时间插件

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

 10631  33  查看评论 (52)
仿mobiscroll时间插件 ie兼容10

更新时间:2017/8/2 上午9:12:28

更新说明:修改一些错误的备注


更新时间:2017/7/29 上午11:37:08

更新说明:修改部分bug,主要是时间显示添加了一个方法来判断了。  

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中放入正确的时间值便可。

如果发现问题欢迎反馈

相关插件-日期和时间

时间插件ROME

时间插件ROME无依赖性,选择用户界面,可定制日期&时间的选择器
  日期和时间
 17007  19

jQuery日历插件Calendar.js修改版

jQuery日历插件Calendar修改版,选择日期切换效果不错。
  日期和时间
 18215  51

win8风格日历

win8风格datetimepicker日期时间选择控件代码
  日期和时间
 13656  11

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

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

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

    偶尔、?相识、 0
    2017/9/18 15:15:21
    经测试,在安卓手机上存在 BUG ,点击选择日期,滑动,然后取消,会卡住页面, 回复
    瓶子 0
    2017/9/15 13:55:30
    我在这里推荐你们使用mobiscroll 真心很棒的插件 ,只是他需要版权 ,不过嘛 ,国内用 你懂的。  回复
    唐志峰 1
    2017/9/15 11:17:25

    点开是时候,你绑定了两个全局事件:mousemove和mouseup。关闭的时候应该取消这两个事件的绑定,不然会全局污染。(这样就不影响全局的其他拖动、移动事件了。)

    //关闭事件
    sjObj.opt.timeElm.find(".df-no").on("click", function() {
        $(this).parent().parent().parent().remove();
        sjObj.opt.onfun(sjObj);
        $("html").removeClass("ov_hi");
        //应该新增的代码
        $(document).unbind("mousemove");
        $(document).unbind("mouseup");
    })
        瓶子0
        2017/9/15 13:28:23

        哇。 谢谢提醒

    回复
    ZMZ 0
    2017/9/11 19:29:12
    提问一下,怎么能显示上午、下午呢?
        瓶子0
        2017/9/15 13:48:32

        抱歉,还没做这个功能 推荐你用mobiscroll 里面有和我上面一样的主题功能更强

    回复
    hixiyu 0
    2017/9/8 11:38:23

    为什么默认不是当前时间

        瓶子0
        2017/9/15 13:45:50

        代码贴上来我看看,

    回复
    宠辱不惊 0
    2017/9/7 12:27:46

    加上秒之后,分钟和秒会错乱失效

        瓶子0
        2017/9/15 13:41:01

        偷偷告诉你 ,其实我自己都没用过这个秒的功能 :)

    回复
    混小子 0
    2017/9/2 18:10:03

    oppr9sk不能用

    确认和取消需要点击两次,点击第一次之后第二次的时间可以岔开,解决

        瓶子0
        2017/9/15 13:42:51

        可能是没有使用tap 事件有关系。,

    回复
    Vistar_tf 0
    2017/9/1 16:40:56

    您好,我用angularJS绑定Input控件,但是获取不到值,请问您在插件里面对所选的值设置了readonly吗,在线等急

        Vistar_tf0
        2017/9/1 16:44:00

        ng-model无法获取值,提示undefined

        瓶子0
        2017/9/15 13:39:59

        兄弟还在吗? 最近在改公司官网 ,没有来这里看,,你这个可能是jquery的val()有问题。。我发现我在

        //将时间放入dom中
        fillData:function(){

        这个方法中使用的val()放入时间 ,dom中的value 并没有改变。而jquery却可以获取到

    回复
    我丶心里 0
    2017/8/27 18:07:19
    老铁,能用另外一个按钮触发么?
        我丶心里0
        2017/8/27 18:09:44

        我想用一个点击一个图标按钮,触发日历插件,然后在一个input框中显示正确的值

        我丶心里0
        2017/8/27 18:35:32

        已自我实现

        $("#btn-calendar").calendar({
            Format:"yyyy-mm",//显示日期格式//yyyy表示年份 ,mm月份
               startYear: 1970, //开始年份1970
               y: + 999, //当前年份+999
               Day: false, //是否显示日
               Hour: false, //是否显示小时
               Minute: false, //是否显分钟
               okfun: function(sjObj) {
               	//确认时间时候执行事件
            $('#current_month').val(sjObj.opt.yyyy + '-' + sjObj.opt.mm);
               }
           });
        瓶子0
        2017/8/28 13:14:24

        可以的。自己动手丰衣足食

    回复
    0
    2017/8/23 10:57:20

    您好,我想问问可以显示星期几吗,还有就是只显示7天的时间。

        混小子0
        2017/8/24 10:27:33

        我想限制显示时间怎么弄,最多只能显示当前时间

    回复
取消回复