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);

　　

代码仅供参考，具体功能可以自己扩展。

个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/　

http://www.cnblogs.com/jiebba    我的博客，来看吧！

github:  https://github.com/longfei59418888/vui   （很不错的vue2.0组件库，记得给一个 start,以后有一起讨论，各种好组件）

jq仿苹果的时间/日期选择效果的更多相关文章

  1. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  2. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  3. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  4. 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。

    自动提交的属性: AutoPostBack="True" 1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...

  5. Bootstrap datetimepicker “dp.change” 时间/日期 选择事件

    $('#<!--{$inputId}-->').datetimepicker({ todayHighlight: true, format: "YYYY-MM-DD<!-- ...

  6. 第二好用的时间日期选择插件（jscal）

    这个是第二好用的了,支持鼠标滚动选择时间.功能很强大,文档:http://www.dynarch.com/jscal/ 效果图: <!DOCTYPE html PUBLIC            ...

  7. 最简单应用的时间日期选择插件---My97DatePicker

    最简单的应用:http://www.my97.net/dp/demo/resource/2.1.asp

  8. 设计和编写一个异步通用Picker选择器，用于时间日期、城市、商品分类的选择

    目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四. ...

  9. Android项目实战（二十九）：酒店预定日期选择

    先看需求效果图: 几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果&qu ...

随机推荐

  1. 牛客练习赛17-A-长方体

    题目描述 给出共享长方体一个顶点的三个面的面积,求它十二条边的边长和. 输入描述: 一行三个整数a, b, c表示面积(1 <= a, b, c <= 10000). 输出描述: 一行一个 ...

  2. 【转】数据倾斜是多么痛？spark作业/面试/调优必备秘籍

    原博文出自于: http://sanwen.net/a/gqkotbo.html 感谢! 来源:数盟 调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题——数据倾斜,此时Spark作业的性 ...

  3. git初使用的心得

    转到Java方向后,版本控制工具也开始以git为主了.由于之前不怎么使用bash,所以目前还是以ui工具,比如sourcetree为主导,但一些简单的操作命令,已经能够快速地使用.sourcetree ...

  4. python--12、索引知识

    MySQL索引及优化 影响性能的因素 需求:一个论坛帖子总量的统计,附加要求:实时更新.从功能上来看非常容易实现,执行一条 SELECT COUNT(*) from 表名 的 Query 就可以得到结 ...

  5. Python学习日记之中文支持

    解决中文输出错误 在开头添加 # -*- coding: utf-8 -*- 即可

  6. HTML5——移动端的点击、拖拽

    移动端浏览器不支持mouse事件 https://www.cnblogs.com/joyco773/p/6519668.html https://www.cnblogs.com/yjhua/p/525 ...

  7. springMVC接收get请求传递多个参数

    @RequestMapping(value = "/sendSignal/{state}/{limberId}/{account}", method = RequestMethod ...

  8. java如何区分同时继承的父类和实现的接口中相同的方法

    基类代码: public class Father { public Father() { System.out.println("基类构造函数{"); show(); Syste ...

  9. linux网络编程——域名转换 gethostbyname与gethostbyaddr

    域名转换 #include <netdb.h> struct hostent *gethostbyname(const char *name); 参数: name: 执行主机名的指针 返回 ...

  10. UVA - 10603 Fill（BFS求最小值问题）

    题目: 给出三个杯子(没有刻度线)的容量,起初之后第三个杯子是满的,其他的两个杯子是空的,容量分别是a.b.c.问最少需要倒多少升水才能让某一个杯子中的水有d升?如果不能恰好做到d升,就让某一个杯子里 ...