选择生日,弹出框pc插件可直接输入,可上下移动,成功有回调

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

 22742  242  查看评论 (0)
分享到微信朋友圈
X
选择生日,弹出框pc插件可直接输入,可上下移动,成功有回调 ie兼容8

更新时间:2017/2/9 上午10:23:56

更新说明:

//版本2 解决了,如果本身input里面有值的情况,值变成默认值的情况

解决了ie低版本兼容问题

//下版本会加鼠标滚轮滚动修改值,有时间会加上。提前预告1下...

1.此插件必须要有个div的父级元素,方便生成的插件好定位

<div class="div_input" style="position: relative;">
<input type="text" name="" id="dataInput" value="" />
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #289c97}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #4f5d66}
    span.s1 {color: #4f5d66}
    span.s2 {color: #2b7ec3}
    span.s3 {color: #d74200}
    span.s4 {color: #48565d}
    span.s5 {color: #4a8a01}
    span.s6 {color: #d16400}
    span.Apple-tab-span {white-space:pre}
</div>

2.傻瓜调用方式

$(function() {
	$("#dataInput").off("timeData").on("timeData",
	function(event) {
		alert("回调函数"); //回调函数这里是我给用户留的个万一关闭之后需要跟进的业务逻辑,比如说angular指令调用ui插件之后,必须需要回调函数,从新挂在到$scope上等                 
	}).dataYear({
		dataTop: 33 //此参数是弹出插件距离input的定位距离
		p.p1 {
			margin: 0.0px 0.0px 0.0px 0.0px;
			font: 12.0px Monaco;
			color: #4f5d66
		}
		span.s1 {
			color: #ad42ef
		}
	}) p.p1 {
		margin: 0.0px 0.0px 0.0px 0.0px;
		font: 12.0px Monaco;
		color: #4663cc
	}
	p.p2 {
		margin: 0.0px 0.0px 0.0px 0.0px;
		font: 12.0px Monaco;
		color: #289c97
	}
	p.p3 {
		margin: 0.0px 0.0px 0.0px 0.0px;
		font: 12.0px Monaco;
		color: #060606
	}
	span.s1 {
		color: #060606
	}
	span.s2 {
		color: #4663cc
	}
	span.s3 {
		color: #b58a00
	}
	span.s4 {
		color: #289c97
	}
	span.Apple - tab - span {
		white - space: pre
	}
})

原创作品,如果转载请注明出处[email protected]

相关插件-日期和时间

jquery ui酒店预订日历选择器控件代码

jquery ui酒店预订日历选择器控件代码
  日期和时间
 51918  364

移动端日期选择插件mtimer

移动端日期选择插件
  日期和时间
 71849  322

一个简单的jQuery日历插件Calendar.js

Calendar.js一个简单的日历插件;体积很小,使用方便,便于我们使用到不同场景,只需修改css就可适用moblie、pc
  日期和时间
 70158  248

timeago.js自动将时间戳转换为更易读的时间轴

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴,而且使用timeago.js无需刷新页面即自动更新页面时间的显示。
  日期和时间
 24990  283

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复