当前位置:首页 > 开发 > 行业应用 > 正文

JQ插件:日期时间选择器date picker

发表于: 2014-08-27   作者:gundumw100   来源:转载   浏览次数:
摘要: 这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。下图是在android中的显示效果:再看一下用法首先导入JQ和datepicker插件: --> --> 如果你想支持time的选择,可以把上面注释掉的代码打开。我这里只要显示date所以注释掉了。然后在html中加入一个inputtext控件,比如: 然后写JS:
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。
下图是在android中的显示效果:

JQ插件:日期时间选择器date picker_第1张图片

再看一下用法
首先导入JQ和date picker插件:
<link rel="stylesheet" type="text/css" href="css/picker/default.css" />
<link rel="stylesheet" type="text/css" href="css/picker/default.date.css" />
<!--
<link rel="stylesheet" type="text/css" href="css/picker/default.time.css" />
-->

<script type="text/javascript" src="js/picker/picker.js"></script>
<script type="text/javascript" src="js/picker/picker.date.js"></script>
<!-- 
<script type="text/javascript" src="js/picker/picker.time.js"></script>
 -->


如果你想支持time的选择,可以把上面注释掉的代码打开。我这里只要显示date所以注释掉了。

然后在html中加入一个input text控件,比如:

<input type="text" style="padding:16px" id="birthday" placeholder="Birthday"/>		 


然后写JS:
$('#change_birthday_page #birthday').pickadate({
	selectMonths: true,
	selectYears: 45,
	format: 'yyyy-mm-dd',
	formatSubmit: 'yyyy-mm-dd',
	min: new Date(1970,1,1),
	max: new Date(),
        today: '',
	clear: '',
	close: 'Close'
});

这里我只是根据需要填入birthday,min和max表示日期的跨度;selectYears也可以填true和数字,如果是数字表示一共下拉显示多少个年份。

PS:
在手机中选择年份和月份的时候,只显示半个字。需要修改default.date.css,在该CSS中查询picker__select--year,将其中的padding: .5em;改成padding: .25em;即可。

详细的用法见: http://amsul.ca/pickadate.js/

JQ插件:日期时间选择器date picker

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
在线演示 本地下载 今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选
日期:2012-4-16 来源:GBin1.com 在线演示 本地下载 今天分享一个独立的日期选择插件Kalendae ,Ka
官方下载页面:http://jqueryui.com/themeroller/#ffDefault=Verdana%2CArial%2Csans-serif&fwDefau
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
Pickers There are three picker files: picker.js The core file (required before any other pick
Pickers There are three picker files: picker.js The core file (required before any other pick
Pickers There are three picker files: picker.js The core file (required before any other pick
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号