jquery datepicker 效果

最新推荐文章于 2025-06-16 13:27:24 发布

原创最新推荐文章于 2025-06-16 13:27:24 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用jQuery UI实现的日期选择器实例。通过配置各项参数，如改变月份和年份选项、设置显示按钮及图标、限制可选日期范围等，使用户能够直观地选择指定范围内的日期，并以“年-月-日”的格式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery datepicker效果

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>日期选择</title>  
  
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>  
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>  
<link type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet" />  
  
<!-- date picker 本地化 -->  
<script type='text/javascript' src='js/ui.datepicker-zh-CN.js'></script>  
<!--<link type="text/css" href="css/pack_datepicker.css" rel="stylesheet" /> -->
  
  
<script type="text/javascript">  
$(function(){  

    $("#sponsorDate").datepicker({  
        changeMonth: true,
		changeYear: true,  
        showOn: 'button',   
        buttonImage: 'images/calendar.gif',   
        buttonImageOnly: true,  
         minDate: '-2y', 
		 maxDate: '+2y'  
    });  
    $('#sponsorDate').datepicker('option', {dateFormat: "yy-mm-dd" });  //格式化显示时间  
	$('#sponsorDate').datepicker('setDate', new Date());//设置显示当前时间
	/*$("#sub").click(function(){
						alert($("#sponsorDate").val());
							})*/
	
	
	
	
	
      
});  
</script>  
  
</head>  
  
<body>  
 <input name="sponsorDate" type="text" id="sponsorDate" value="<% = SponsorDate %>" size="50" maxlength="50" >  
 <input type="button" id="sub" value="提交">
 </body>  
</html>