jQuery UI 日期选择器(Datepicker)只显示月份和年份

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

结果如下:

转载于:https://my.oschina.net/u/2494575/blog/1928730

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值