JQuery datepicker 使用方法

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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章