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

相關標籤/搜索