使用jqueryUI来制作一个日期选择器

公司的项目要用到时间选择器的一个插件,百度了很久,没有找到合适的,自己就看了下jqueryUI,自己整合了一个比较好的日期选择器,以便后面遇到同样的问题能够解决。

下面就贴出部分使用的代码,比较简单,但是很实用!!!

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery UI 日期选择器(Datepicker) - 默认功能</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/jquery-1.9.1.js"></script>
		<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
		<!-引入jqueryUI的相关文件-->
		<style>
			#draggable {
				width: 150px;
				height: 150px;
				padding: 0.5px;
				border: 1px solid #F00
			}
		</style>
		<script>
			$(function() {
				$("#datepicker").datepicker({
					showOtherMonths: true,
					selectOtherMonths: true,
					showButtonPanel: true,
					/*显示今天的日期的显示,以及关闭时间选择器*/
					changeMonth: true,
					/*显示选择其他月份*/
					changeYear: true,
					/*显示选择其他年份*/
					dateFormat: "yy - mm - dd" /*设置日期的显示格式*/ ,
					showWeek: true,/*显示一年中的第几周*/
					firstDay: 1
				})
			});
		</script>
	</head>
	<body>
		<p>日期:
			<input type="text" id="datepicker">
		</p>
	</body>

</html>

关于JqueryUI的datepicker选择器的其他部分属性可以通过下面的链接查看:

jQuery UI API - 日期选择器部件

				
时间: 2024-08-03 15:58:36

使用jqueryUI来制作一个日期选择器的相关文章

点击cell弹出一个日期选择器

- (void)setUpGroup2 { ILGroupItem *group = [[ILGroupItem alloc] init]; // 结束时间 ILSettingItem *endTime = [ILSettingItem itemWithImage:nil title:@"结束时间"]; endTime.subTitle = @"23:59"; // __unsafe_unretained __weak // __weak会把指针自动清空 p = n

日期选择器:jquery datepicker的使用

helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui 在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式.范围等.我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关查询的.我们很早之前就应用datepicker到很多项目中,今天整理成文与大家分享. 查看演示 下载源码 准备工作 首先

轻量级移动端日期选择器

在移动端进行日期选择想必困扰过不少小伙伴,在PC端我们比较丰富的选择,如jQueryUI的datepicker,但这些插件都比较臃肿,而 且还要依赖一个同样臃肿的库.或许PC上可以忍受比较大的文件,网速相对快嘛.然而在移动端也面临同样的问题,想用一个日期选择器还得依赖一个庞大的UI 库,如mobiscroll.但移动端的网速慢啊,而且要耗流量,用这么一个大家伙就显得无法忍受. 于是,我决定造轮子了.造一个轻量级的.适合在移动端使用的日期选择器.而且只依赖Zepto.(Zepto本身体积小,而且在

ios入门笔记(使用日期选择器)

1.创建项目 创建初始场景,和日期选择场景(可以将其背景色设置为Scroll View Texted Background Color),选择一个日期选择器至该视图 2.创建切换 按住CONTROL从初始视图拉向日期设置视图,(注意与前一章的区别,这里因为是两个控制器相连,所以要手工触发切换因此将该切换命名以便代码实现) 3.实现逻辑 1.在实现中除了让两个控制器知道彼此的方法属性外,还要提供一个属性(让日期选择器能够访问初始控制器,他将通过该属性访问初始控制器,因为在IPAD中要禁止用户同时显

Mobiscroll手机触屏日期选择器

   最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhone. iPad.Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字就可以选择日期.Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式,经过测试可以完美使用在iOS4.Android 2.2. Android 2.3

jQuery UI 实例 - 日期选择器(Datepicker)

默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

制作一个简洁的jquery插件

原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect 英文原文链接:http://www.queness.co

时间,日期选择器

TimePicker(时间选择器) 方法 描述 Integer getCurrentHour () 返回当前设置的小时 Integer getCurrentMinute() 返回当前设置的分钟 boolean is24HourView() 判断是否是24小时制 void setCurrentHour(Integer currentHour) 设置当前的小时数 void setCurrentMinute(Integer currentMinute) 设置当前的分钟 void setEnabled(

JavaScript:日期选择器组件的使用

前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的验证其日期正确性.此时可以使用日期选择器组件来帮助我们完整. 用法: 使用日期在选择其组件其实很简单,我们只需要在*.html文件里面引入日期选择器的*.js文件,并在input输入框中设置'onclick'事件即可. 演示: 现在我使用两种日期选择器组件进行演示,: 第一个是:My97DatePi