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>
?