jQuery UI 日期选择器（Datepicker）只显示月份和年份

时间 2019-12-05

标签 jquery 日期选择器 datepicker 显示月份年份栏目 JQuery 繁體版

原文原文链接

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 只显示月份年份菜单</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
		showButtonPanel: true,
		beforeShow: function(dateText, inst){
			 $("#ui-datepicker-div").addClass('month');
		},
		onClose: function(dateText, inst) {
			var month = $("#ui-datepicker-div .ui-datepicker-month option:selected").val();//获得选中的月份值
			var year = $("#ui-datepicker-div .ui-datepicker-year option:selected").val();//获得选中的年份值
			if ((parseInt(month)+1)  < 10) {
				var months = '0'+ (parseInt(month)+1);
			} else {
				months = (parseInt(month))+1;
			}
			$('#datepicker').val(year+months);//给input赋值，其中要对月值加1才是实际的月份
		}
    });
  });
  </script>
  <style>
	  .month table {
	  	display: none;
	  }	
  </style>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

结果以下：css