easyui datetimebox 如何只顯示 月份,不顯示具體的資料

洪小燈發表於2016-04-22

最近的一個專案使用到easyui 中datetimebox 控制元件,但是隻要顯示月份資料,不需要顯示具體的日期資料

這個功能需要程式碼實現

<input id="db"/>
	<script>
		$(function () {
			$('#db').datebox({
				onShowPanel: function () {//顯示日趨選擇物件後再觸發彈出月份層的事件,初始化時沒有生成月份層
					span.trigger('click'); //觸發click事件彈出月份層
					if (!tds) setTimeout(function () {//延時觸發獲取月份物件,因為上面的事件觸發和物件生成有時間間隔
						tds = p.find('div.calendar-menu-month-inner td');
						tds.click(function (e) {
							e.stopPropagation(); //禁止冒泡執行easyui給月份繫結的事件
							var year = /\d{4}/.exec(span.html())[0]//得到年份
									, month = parseInt($(this).attr('abbr'), 10); //月份,這裡不需要+1
							$('#db').datebox('hidePanel')//隱藏日期物件
									.datebox('setValue', year + '-' + month); //設定日期的值
						});
					}, 0)
				},
				parser: function (s) {
					if (!s) return new Date();
					var arr = s.split('-');
					return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
				},
				formatter: function (d) { return d.getFullYear() + '-' + (d.getMonth()+1);/*getMonth返回的是0開始的,忘記了。。已修正*/ }
			});
			var p = $('#db').datebox('panel'), //日期選擇物件
					tds = false, //日期選擇物件中月份
					span = p.find('span.calendar-text'); //顯示月份層的觸發控制元件
		});
	</script>

將上段程式碼拷貝到頁面中就可以實現這種功能了

相關文章