移动端日期选择插件Mdate.js

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

 146068  433  查看评论 (170)
分享到微信朋友圈
X
移动端日期选择插件Mdate.js ie兼容9

Mdate.js 

是一款依托于iScroll.js的日期选择小型插件,可滑动选择年、月、日,只适用于移动端。

操作简易,只需要在页面中引入iScroll.js和Mdate.js即可。

使用说明

  1. 代码:new Mdate("dateSelectorOne");

  2. "dateSelectorOne"为你要显示选择后的日期的input,必填项;

  3. Mdate的默认开始日期为:2000年1月1日,可自定义

  4. Mdate的默认结束日期为:今天,可自定义

  5. Mdate的默认日期格式为:xxxx年xx月xx日,可自定义

自定义项

new Mdate("dateShowBtn", {
    //"dateShowBtn"为你点击触发Mdate的id,必填项
    acceptId: "dateSelectorTwo",
    //此项为你要显示选择后的日期的input,不填写默认为上一行的"dateShowBtn"
    beginYear: "2002",
    //此项为Mdate的初始年份,不填写默认为2000
    beginMonth: "10",
    //此项为Mdate的初始月份,不填写默认为1
    beginDay: "24",
    //此项为Mdate的初始日期,不填写默认为1
    endYear: "2017",
    //此项为Mdate的结束年份,不填写默认为当年
    endMonth: "1",
    //此项为Mdate的结束月份,不填写默认为当月
    endDay: "1",
    //此项为Mdate的结束日期,不填写默认为当天
    format: "-"
    //此项为Mdate需要显示的格式,可填写"/"或"-"或".",不填写默认为年月日
})
相关插件-日期和时间

移动端日期选择插件mtimer

移动端日期选择插件
  日期和时间
 81595  383

优雅的日期选择插件daterangepicker

jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择
  日期和时间
 84674  374

jQuery移动端日期选择插件jquery-date

此插件依赖jQuery,且是为移动端而写,也支持pc端的使用,但因为操作不便和样式问题,所以不建议。
  日期和时间
 29938  307

jquery仿腾讯QQ空间时光轴静态页面

仿腾讯QQ空间时光轴静态页面
  日期和时间
 29106  370

讨论这个项目(170)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    爱小虾的烟斗 0
    2023/5/6 11:12:28
    很好的一个日期选择控件,但是bug太多,足见开发这个控件的开发者不是一个逻辑严谨的人,大家拿来用的时候记得自己多测试一下,然后自己进行代码大改造,不然会有很多等级高的bug,最终会被终端用户喷死的 回复
    tanxiaolei 0
    2022/8/22 17:37:46
    月份滑动的时候,几率性的不准确,比如滑动到五月,添加到input里面是8月,发现原因是onScrollEnd 里面获取的this.y不准确,加个定时器500毫秒后再获取就准确了,就是滑动还没结束时事件就触发了,但是加定时器,感觉不靠谱,有人遇到这个问题吗?有好的解决办法吗?
        爱小虾的烟斗1
        2023/5/6 11:14:13

        yearTag等变量不要依赖onScrollEnd中的取值,改成在sureBtn.onclick中实时获取

        try {
            indexY = Math.ceil((yearScroll.y || 0) / 40 * -1 + 1);
            yearTag = yearUl.getElementsByTagName("li")[indexY].getAttribute("data-year");
        } catch (err) {
            yearTag = that.beginYear
        }
        try {
            indexM = Math.ceil((monthScroll.y || 0) / 40 * -1 + 1);
            monthTag = monthUl.getElementsByTagName("li")[indexM].getAttribute("data-month")
        } catch (err) {
            monthTag = 1
        }
        try {
            indexD = Math.ceil((dayScroll.y || 0) / 40 * -1 + 1);
            dayTag = dayUl.getElementsByTagName("li")[indexD].getAttribute("data-day")
        } catch (err) {
            dayTag = 1
        }
    回复
    GailJY 0
    2022/5/16 15:58:05
    请问怎么设置月份为英文?
        koalafiend0
        2023/6/17 10:30:53
        你自己用原生js没法修改么
    回复
    朱刚 0
    2022/5/7 13:49:43
    可以设置只选择年月吗? 回复
    烈日 0
    2021/8/29 17:46:58
    没有默认当时时间的选项,如果我在开始时间写当前时间,今天之前的日期就不能选。
        爱小虾的烟斗1
        2023/5/6 11:15:22
        input控件的data-year、data-month、data-day 属性对应的就是默认时间,可以自己设置
    回复
    Fighte 0
    2021/6/7 20:44:16
    在手机上有时候点击确定或取消按钮不生效是啥原因
        tanxiaolei0
        2022/8/22 17:40:41
        是点不动吗?我遇到过,是在滚动结束后getAttribute报错了,用try..catch包起来就好了
    回复
    寒冰若水 0
    2021/3/23 16:09:35
    源代码有一句写错了
        寒冰若水1
        2021/3/23 16:11:04

        createDateYMD事件

        if (type == "month") {
            unitName = "月";
            dataStyle = "data-month";
            beginNum = that.beginMonth;
            endNum = 12;
        
            if (yearTag != that.beginYear) {
                beginNum = 1
            }
            if (yearTag == dateopts.endYear) {
                endNum = that.endMonth
            } //此处应该是that.endYear
        }
        Dream0
        2022/8/15 9:47:03
        谢谢,很有帮助👍
    回复
    Some Time 0
    2020/9/9 12:00:53
    里面可以添加至今选项吗 回复
    (⊙_⊙) 0
    2020/9/4 16:22:06
    请问显示格式怎么只设置年月 回复
    tanxiaolei 0
    2020/6/17 16:14:40
    苹果6s掉不起来怎么解决 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复