Juqery datepicker 只显示年和月不显示日和只选择年份的下拉列表 -

qq543123909

浏览: 25861 次

最近访客更多访客>>

binbnsh

hanwei1

lijunxian0114

hanhaijin_007

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Juqery datepicker 只显示年和月不显示日和只选择年份的下拉列表

博客分类：

Jquery

javascript

1.只选择年份的下拉列表框 .

2.基于Jquery Ui datepicker 日期控件只显示年和月不显示日.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<link href="../css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="../js/jquery-1.8.3.js"></script>
<script src="../js/jquery-ui-1.9.2.custom.js"></script>

</head>
<script language="javascript">

//year
 $(function() {
	$("#year").attr("readonly", "true");
	var tempYear = new Date().getUTCFullYear();
	var obj = document.getElementById('year');
	 for (var i=tempYear-10;i<=tempYear;i++){
			 if(i>1900){
				 obj.options.add(new Option(i,i));
			 }				
		 }
		 for (var i=tempYear+1;i<=tempYear+10;i++){
			 if(i<9999){
				 obj.options.add(new Option(i,i));
			 }				
		 }
		 obj.options[10].selected=1	 ;
		 $("#year").change(function(){
			 tempYear=parseInt($("#year").val());
			 obj.options.length=0;
			 for (var i=tempYear-10;i<=tempYear;i++){
				 if(i>1900){
					 obj.options.add(new Option(i,i));
				 }				
			 }
			 for (var i=tempYear+1;i<=tempYear+10;i++){
				 if(i<9999){
					 obj.options.add(new Option(i,i));
				 }				
			 }
			 obj.options[10].selected=1	;
		 });		  
});

// monthYear
$(function() {
	$("#monthYear").attr("readonly", "true");
	var month ;
	var year ;
	$('#monthYear').datepicker({
		 changeMonth : true,
		 changeYear : true,
		 dateFormat : 'mm/yy',
                 showButtonPanel: true,
                 onClose: function(dateText, inst) {   
			month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
			year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();		      	 
         }  
     
     	});
	//“Done”按钮的click事件
	$(".ui-datepicker-close").live("click", function ()
	 {
		 $('#monthYear').datepicker("setDate", new Date(year, month, 1)); 
	 });
         
         //点击互动的清除输入框
	 $("#monthYear").toggle(function() {
			$(this).val("");
		}, function() {
			$(this).val("");
	});
});

</script>


<!-- 隐藏控件的天数选择的样式 -->
<style type="text/css">
	.ui-datepicker-calendar {
	   display: none;
	}
</style>
<body>
<br />
 Year : <select id="year"></select>

<br/>
<br/>

Month Year : <input id="monthYear" />

</body>
 
</html>

分享到：