JQuery datepicker 使用方法

最新推荐文章于 2024-10-11 11:28:48 发布

Good末末

最新推荐文章于 2024-10-11 11:28:48 发布

阅读量552

点赞数

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，

我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

官方地址：http://docs.jquery.com/UI/Datepicker，

官方示例： http://jqueryui.com/demos/datepicker/。

一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/

DatePicker基本使用方法：

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script> 
$(document).ready(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body style="font-size:62.5%;"> 

<div type="text" id="datepicker"></div> 

</body> 
</html>

使用例子

<script> 
		$(document).ready(function() { 
			$("#sch_start_date").datepicker({
				dateFormat: 'yy-mm-dd',
		    	prevText: '이전 달',
			    nextText: '다음 달',
			    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			   dayNames: ['일','월','화','수','목','금','토'],
			    dayNamesShort: ['일','월','화','수','목','금','토'],
			    dayNamesMin: ['일','월','화','수','목','금','토'],
			    showMonthAfterYear: true,
			   // yearSuffix: '년', 
			    //changeMonth: true,
		        //changeYear: true,
		        showOn: "button",
		        
		        buttonImageOnly: true,
		        setDate:""
			}); 
		}); 
		</script>