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

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仿苹果的时间/日期选择效果的更多相关文章

利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理前面的话关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
asp.net中的时间日期选择控件
asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒阅读(22922) 评论(6) 编辑收藏在系统中经常需要进行时间日期选择(比如查询时间范 ...
【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。
自动提交的属性: AutoPostBack="True" 1.RadioButtonList 单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...
Bootstrap datetimepicker “dp.change” 时间/日期选择事件
$('#').datetimepicker({ todayHighlight: true, format: "YYYY-MM-DD<!-- ...
第二好用的时间日期选择插件（jscal）
这个是第二好用的了,支持鼠标滚动选择时间.功能很强大,文档:http://www.dynarch.com/jscal/ 效果图: <!DOCTYPE html PUBLIC ...
最简单应用的时间日期选择插件---My97DatePicker
最简单的应用:http://www.my97.net/dp/demo/resource/2.1.asp
设计和编写一个异步通用Picker选择器，用于时间日期、城市、商品分类的选择
目录一.功能规划二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市四. ...
Android项目实战（二十九）：酒店预定日期选择
先看需求效果图: 几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果&qu ...

随机推荐

石墨烯（转自wiki）
石墨烯(Graphene)是一种由碳原子以sp2杂化轨道组成六角型呈蜂巢晶格的平面薄膜,只有一个碳原子厚度的二维材料[1].石墨烯一直被认为是假设性的结构,无法单独稳定存在[1],直至2004年,英国 ...
Axis通过wsdd部署Web Service
axis网上的教程很多,不过搜来搜去,总是只有那么几篇.仔细看了一下那几篇文章,都感觉到不是自己想要的,所以自己整理了一篇分享一下. 本文介绍axis应用的一个小例子,没有麻烦的命令行操作,只需照下面 ...
为什么，博主我要写下这一系列windows实用网络？
发现,随着自身一路过来所学,无论在大数据领域.还是linux or windows里,菜鸟的我慢慢在长大.把自己比作一个园,面积虽在增加,涉及面增多,但圆外的东西,还是那么多. 现在,正值在校读研 ...
NHibernate学习笔记(3)-实体反射到数据库
一.开发环境 NHiberate版本:4.0.4 开发工具:VS2013 数据库:SQLServer2012 二.开发流程 1.编写领域类与映射文件 namespace Domain { public ...
C语言学习(2)-GTK布局
首先了解下gtk中函数的定义格式: 记住下面几个格式看,下面的代码声明变量:GtkAbc*abc=gtk_abc_new()声明控件; 赋值:gtk_abc_set_label(controlNam ...
C:\Windows\System32\drivers\etc\hosts文件显示
attrib -s -h C:\Windows\System32\drivers\etc\hosts
2199. [HZOI 2016] 活动投票
★★ 输入文件:hztp.in 输出文件:hztp.out 简单对比时间限制:0.5 s 内存限制:2 MB [题目描述] 衡中活动很多,人也很多,一次活动有n个学生参与投票,现已知 ...
（转）淘淘商城系列——Redis五种数据类型介绍
http://blog.csdn.net/yerenyuan_pku/article/details/72855562 Redis支持五种数据类型:string(字符串),hash(哈希),list( ...
用 webpack 实现持久化缓存
什么是持久化缓存? 原文链接https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/ 缓存(cache)一直是前端性能优 ...
docker常用命令理解
docker help Commands: attach Attach local standard input, output, and error streams to a running con ...