jq仿苹果的时间/日期选择效果

最新推荐文章于 2018-05-02 10:44:02 发布

原创最新推荐文章于 2018-05-02 10:44:02 发布 · 800 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何使用jq仿造苹果的时间/日期选择效果，包括html文件设置、插件引用和调用方法。提供了插件链接以及调用日期、时间和日期时间的示例代码，并鼓励读者扩展功能。此外，作者分享了个人博客和一个vue2.0组件库的github链接，供读者参考和交流。

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

1.html文件，index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./pickDater.js"></script>
    <style>
        body{position: absolute;width: 100%;height: 100%}
        ul{list-style: none;margin: 0}
    </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">

</body>
</html>

　　查看效果时候把浏览器调成手机模式

2.插件链接地址：http://files.cnblogs.com/files/jiebba/pickDater.js ,

　　引用插件

3.调用插件

　　1.调用日期

 var opt={
        startY:1990,   //开始时间
        endY:2050,      //结束事件
        mPickerType:1,  
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);

　　2.调用时间

var opt={
        startY:1990,   //开始时间
        endY:2050,      //结束事件
        mPickerType:2,
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);

　　3.调用日期和时间

   var opt={
        startY:1990,   //开始时间
        endY:2050,      //结束事件
        mPickerType:3,
        separator:'/'  //日期分割符
    }
     $('#pickDater').mPickDater(opt);