jquery-ui 插件学习--日期控件datepicker

原创 2012年03月29日 16:01:04
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Format date</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {

		$( "#datepicker" ).datepicker();
		
		$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');


	});
	</script>
</head>
<body>
 
<div class="demo">
 
<p>Date: <input type="text" id="datepicker" size="30"/></p>
 
<p>Format options:<br />
	<select id="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
		<option value="d M, y">Short - d M, y</option>
		<option value="d MM, y">Medium - d MM, y</option>
		<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
		<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
	</select>
</p>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>jquery-ui默认的日期格式一般不是我们要的,要展现正确的格式,这个插件才有实际用途。这个例子使用下拉框的值区设定日期控件的值,我们在实际中使用可以把这个参数写死。<br>
	$(function() {

		$( "#datepicker" ).datepicker();
		
		$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');


	}); </p>这样的格式显示为:2012-03-16
</div><!-- End demo-description -->
 
</body>
</html>


 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Icon trigger</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {

		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');

	});
	</script>
</head>
<body>
 
<div class="demo">
 
<p>Date: <input type="text" id="datepicker"></p>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>这个样子是我们比较喜欢和常用的,点击右边的按钮弹出控件。</p>
	$(function() {

		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');

	});
</div><!-- End demo-description -->
 
</body>
</html>


 

 

 

jQuery ui中日期控件datepicker的使用整理

一、控件的引入该控件依赖于jQuery,故需要先引入jQuery。

My97DatePicker日期控件插件

  • 2017年09月22日 17:31
  • 29KB
  • 下载

Jquery(进阶一) 日期控件My97DatePicker的基本用法

My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。  1、下载My97DatePicker组件包  下载地址:http://download.csdn.net/det...

jquery datepicker-强大的日期控件

在web开发中,总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性。除此之外,让用户输入日期也是...

jquery datepicker日期控件

对于jquery datepicker时间控件,算是一个很好用的控件,能实现我们想要的效果,近期做了一个只能在指定日期选择,并且还能根据不同的值改变样式,需求是这样的,对于某个表来说来说,如果哪天有记...

jquery datepicker-强大的日期控件

jquery datepicker-强大的日期控件 admin 五月 25, 2013 Jquery  1 条评论         在web开发中,总会遇到需要用户输入日期的情...

基于jquery和boot strap 的日期控件 datepicker 实例

基于jquery和boot strap 的日期控件 datepicker 实例

jquery日期控件(datepicker)

  • 2010年07月12日 10:27
  • 100KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-ui 插件学习--日期控件datepicker
举报原因:
原因补充:

(最多只允许输入30个字)