js 移动端日期选择底部弹出插件

最新推荐文章于 2024-04-12 11:04:42 发布

小菜花29

最新推荐文章于 2024-04-12 11:04:42 发布

阅读量2.8k

点赞数 4

文章标签： javascript html5 移动开发

本文链接：https://blog.csdn.net/jinse29/article/details/121352333

版权

本文介绍了如何在不使用任何框架的情况下，利用H5原生技术结合Mdate.js插件实现移动端日期选择功能。通过简单的HTML和JavaScript代码示例，展示了设置开始和结束年份、日期格式等参数的方法，并提供了下载链接及解决样式问题的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放一张效果图,没用使用框架,H5原生实现

插件是我在网上找的,叫Mdate.js

这是下载地址https://download.csdn.net/download/jinse29/43001045

使用非常简单,看下面代码


<input type="text" id="dateSelectorStart" placeholder="选择日期">

<script src="../lib/Mdate/iScroll.js"></script>
<script src="../lib/Mdate/Mdate.js"></script>

<script>
    new Mdate("dateSelectorStart",{ // input id
        acceptId: "dateSelectorTwo",
        beginYear: "2000", // 起始年份
        beginMonth: "1", // 起始月份
        beginDay: "1", // 起始日
        endYear: "2099", // 结束年份
        endMonth: "1", // 结束月份
        endDay: "1", // 结束日
        format: "-" // 日期格式
    });
</script>

ps: 加入引入报错,样式出不来,可能是路径不对,打开Mdate.js,搜索needcss,根据自己的项目实际情况修改路径,如下图所示~