Jquery ui插件快速补全 与Jquery ui插件 日期组件

1. Jquery ui插件中的自动补全组件的关键字是（autocomplete）.
2. 自动补全中的事件有哪些(change,close,focus,open,response,search,select)
3. 自动补全的属性有哪些（source,delay,minLength,disabled,position）
4. 自动补全的（source）属性是用来定义数据源的，对应的属性值格式为（数组）。
5. 自动补全的delay属性用来设置（延迟）出现的，默认值是（300）毫秒。
6. 自动补全的minLength属性用来设置提示出现的（长度），默认值是（1）。
7. 自动补全插件（需要)先引入jquery源文件
8. Jquery-ui日期组件的关键字是（datepicker）.
9. 日期组件的（changeMonth）属性，可以控制月份下拉框的是否可用。
10. 日期组件的（changeYear）属性，可以控制年份下拉框的是否可用。
11. 日期组件的（yearSuffix）属性，可以设置年份的后缀显示内容。
12. 日期组件的（monthNames）属性，可以设置月份不可变时显示样式值。
13. 日期组件的（monthNamesShort）属性，可以设置月份可变时显示样式值。
14. 日期组件的showMonthAfterYear属性是用来控制月份在年份后面显示，默认值为(false)
15. 如果设置日期组件的dateFormat属性值为“yy-mm-dd”,则2017年8月20显示样式为（2017-08-20）。
16. 在js中如何获取当前系统时间（new Date()）。
17. 在js中获取完整年份的方法是(getFullYear())。
18. 在js中获取月份的方法是(getMonth()+1)。
19. 在js中获取日期的方法是（getDate()）。

自动补全 :autocomplete

jQuery有很多很多的已经实现，很漂亮的插件，autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式。

主要参数/属性：
Source:数据源，类型为String、Array、Function，其中String为ajax请求的服务器端地址，返回Array/JSON格式，Array即为数组，静态定义到页面中的数据，
Function(request,response):通过request.term获得输入的值，response(Array)来呈现数据（JSONP是这种方式）；
minLength:当输入框内字符串长度达到minLength时，激活Autocomplete
autoFocus:当autocomplete选择菜单弹出时，自动选中第一个。
delay：即延迟多少毫秒autocomplete
disabled：是否禁用自动完成功能，默认false

jQuery ui提供的常用方法：
close():关闭智能提示框
destory():销毁智能提示框，将其所产生的元素完全删除，使其恢复至初始状态
disable():禁用自动完成功能
enable():开启自动完成功能

主要事件：
change(event,ul):当值改变时发生，ui.item为选中项
close(event,ui):当智能提示框关闭时发生
create(event,ui):当智能提示框创建时发生，可以在此事件中，对外观进行控制
focus(event,ui):当智能提示列表任意一项获得焦点时发生，ui.item为获得焦点的项
open(event,ui):当智能提示框打开或更新时发生
response(event,ui):在搜索完成之后智能提示框显示前发生，可以在此时间中对显示项进行处理
search(event,ui):在开始请求之前发生，可以在此事件中返回false来取消请求
select(event,ui):当智能提示框中任意一项被选中时发生，ui.item为选中项

案例

<link rel="stylesheet" href="js/jquery-ui.css" type="text/css"></link>
	<link rel="stylesheet" href="js/jquery-ui.theme.css" type="text/css"></link>
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>

$(document).ready(function(){
		$( "#autocomplete" ).autocomplete({
			//disable: true, //设为true自动提示就不显示了
			delay: 200, //延迟200毫秒出现
			minLength: 1, //出现提示的最小字符数
			source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], //数据源
			select: function(event){ //当选中某一个下拉条目时，触发执行该函数
				alert(event.target.value);
			},
			
		});
	});

<input id="autocomplete" type="text">

source:也可以是	ajax提交
	source: function(request, response){
			$.ajax({
				url: "TestAjax/ajax.do",
				success: function(data){
					response(eval("("+data+")"));
				}
				
			});
		}

也可以是:source: [{ label: "C# Language", value: "C#" },
		{ label: "C++ Language", value: "C++" },
		{ label: "Java Language", value: "Java" },
		{ label: "JavaScript Language", value: "JavaScript" }]

jQueryUI中Datepicker(日历)插件的介绍和使用
案例

$(function(){
  		$("#borndate").datepicker({
   		   /* 是否可以使用下拉列表更改月份 */
			changeMonth: true,
			/* 是否可以使用下拉列表更改年份 */
			changeYear: true,
			/*可以设置年份的后缀显示内容。*/
			 yearSuffix: '年',  
			 /** 是否把月放在年的后面  */ 
			 showMonthAfterYear:true,
			/** 日期控件的星期显示 */
			dayNamesMin: ['日','一', '二', '三', '四', '五', '六'],
			/** 日期控件的月份显示  可以设置月份可变时显示样式值 */
			monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			/** 点击某个日期，填充输入框的月份值 可以设置月份不可变时显示样式值 */
		 	monthNames: ['01','02','03','04','05','06','07','08','09','10','11','12'],
			/** 格式化日期内容 */
			dateFormat: "yy-MM-dd",
			/** 输入框后面是否显示日期控件的图标 */
			showOn: "button",
      		onSelect: function(selectedDate) {//选择日期后执行的操作 
       			 //alert(selectedDate); 
      			} 
  		})
  	});
	<input id="borndate" name="borndate" />

Datepicker插件：
属性
changeMonth,是否可以使用下拉列表更改月份
changeYear,是否可以使用下拉列表更改年份
yearSuffix,可以设置年份的后缀显示内容
showMonthAfterYear,是否把月放在年的后面
dayNamesMin,日期控件的星期显示
monthNamesShort,日期控件的月份显示 可以设置月份可变时显示样式值
monthNames,点击某个日期，填充输入框的月份值 可以设置月份不可变时显示样式值
dateFormat,格式化日期内容
showOn 输入框后面是否显示日期控件的图标
事件
beforeShow : 在日期控件显示面板之前，触发此事件，并返回当前