日历组件

日期选择常规使用方法

	<div id="dlg_printDeliveryPlan" class="easyui-dialog" title="打印发货计划" 
        data-options="iconCls:'icon-save',closed:false,resizable:true"
        style="width:300px;height:450px;padding:10px">
        <div id="calendar1" class="easyui-calendar" style="width:250px;height:250px;"></div>
  </div>
  
  // 下面是JS 代码
  	<script>
		$(function(){
			// 在页面打开时执行
			$('#calendar1').calendar({
				onSelect: function(date){
					// alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
					let year = date.getFullYear();
					let month = fillExplicitLength2(date.getMonth()+1);
					let day = fillExplicitLength2(date.getDate());
					console.log(year + "-" + month + "-" + day)
				}
			});
      
      function fillExplicitLength2(param) {
    if( !param ) return "01";
    let str = param.toString();
    // 在字符串前面填充0直到长度达到2
    return str.padStart(2,"0");
		}
     </script>

月份选择器

html 中放置 easyui 的 datebox 控件，设置ID = date，在对应的 js 代码中页面启动的函数中贴入下面的代码

// 获取当前选中月份：$("#date").datebox("getValue");
$('#date').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; // 月份
						$('#date').datebox('hidePanel')// 隐藏日期对象
						.datebox('setValue', year + '-' + month); // 设置日期的值
					});
				}, 0);
		},
		parser : function(s) {// 配置parser，返回选择的日期
			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) {
			if (d.getMonth() == 0) {
				return d.getFullYear()-1 + '-' + 12;
			} else {
				return d.getFullYear() + '-' + d.getMonth();
			}
		}// 配置formatter，只返回年月
	});
	var p = $('#date').datebox('panel'), // 日期选择对象
	tds = false, // 日期选择对象中月份
	span = p.find('span.calendar-text'); // 显示月份层的触发控件