H5-农阳历日期互转并对应

文章主要实现农历、阳历日期选择器 &选中日期同时获取它对应的农/阳历日期&农历、阳历对应日期切换

在代码中主要引用了iosselect.js插件，主要思路是监听iosselect.js插件中的scrollEnd事件，拿到选中元素，设置全局变量，从而实现农历和阳历切换。主要实现代码如下：

<script type="text/javascript">
			var showDateDom = $('.showDate');
			var selectDateDom = $('.selectDate');
			var calendarConverter = new Calendar();
			
			// 初始化时间
			showDateDom.attr('data-year', 1985);
			showDateDom.attr('data-month', 7);
			showDateDom.attr('data-date', 1);
			showDateDom.attr('data-time', "时间未知");
			
			//年、月、日、生辰
			var yearData = function(callback) {
				callback(selectDateType == 1 ? calendarConverter.initNormalCalendar() : calendarConverter.initLunarCalendar());
			}
			var monthData = function(year, callback) {
				callback(selectDateType == 1 ? calendarConverter.getMonths(year) : calendarConverter.getLunarMonths(year));
			};
			var dateData = function(year, month, callback) {
				callback(selectDateType == 1 ? calendarConverter.getDayCount(month) : calendarConverter.getLunarDayCount(year,month))
			};
			var timeData = calendarConverter.getTime();
			
			// 请选择出生日期
			selectDateDom.bind('click', function() {
				initCalendar();
			})
			
			//创建日期表 
			function initCalendar() {
				// 若是农历则转化成阳历
				if (bigNum.indexOf(numFlag.substr(0, 1)) >= 0) {
					var toSolarObj = Lunar.toSolar(showDateDom.attr('data-year'), showDateDom.attr('data-month'), showDateDom.attr(
						'data-date'))
					var oneLevelId = toSolarObj[0];
					var twoLevelId = toSolarObj[1];
					var threeLevelId = toSolarObj[2];
					var fourLevelId = showDateDom.attr('data-time');
					// 更新此时状态
					showDateDom.attr('data-year', toSolarObj[0]);
					showDateDom.attr('data-month', toSolarObj[1]);
					showDateDom.attr('data-date', toSolarObj[2]);
					numFlag = toSolarObj[1] + "月";
				} else {
					// 若是阳历则不转化
					var oneLevelId = showDateDom.attr('data-year');
					var twoLevelId = showDateDom.attr('data-month');
					var threeLevelId = showDateDom.attr('data-date');
					var fourLevelId = showDateDom.attr('data-time');
				}
				createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, "active");
			}
			// 农历阳历切换
			function changeEvent(obj, num) {
				
				if (selectDateType == num) return;
				
				selectDateType = num;
				
				// 不能同时存在两个iosselect组件
				$('.olay').remove();
				
				if (selectDateType == 1) {
					
					initCalendar();
					
					$("." + obj.className).eq(num - 1).addClass("actice").siblings().removeClass("active");
				} else {
					// 若是阳历则转化成农历
					if (bigNum.indexOf(numFlag.substr(0, 1)) < 0) {
						var toLunarObj = Lunar.toLunar(showDateDom.attr('data-year'), showDateDom.attr('data-month'), showDateDom.attr(
							'data-date'))
						var oneLevelId = toLunarObj[0];
						var twoLevelId = toLunarObj[1];
						var threeLevelId = toLunarObj[2];
						var fourLevelId = showDateDom.attr('data-time');
						showDateDom.attr('data-year', toLunarObj[0]);
						showDateDom.attr('data-month', toLunarObj[1]);
						showDateDom.attr('data-date', toLunarObj[2])
						numFlag = toLunarObj[5].substr(-2, 2);
					} else {
						// 若是农历则不转化
						var oneLevelId = showDateDom.attr('data-year');
						var twoLevelId = showDateDom.attr('data-month');
						var threeLevelId = showDateDom.attr('data-date');
						var fourLevelId = showDateDom.attr('data-time');
					}
					// 切换成农历时,需要重新创建组件
					createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, "active");
					$("." + obj.className).eq(num - 1).addClass("active").siblings().removeClass("active");
				}
			}
			function returnEvent() {
				selectDateType = 1;
				initCalendar();
				$(".sure-wrapper").hide();
			}

			function sureEvent() {
				selectDateType = 1;
				$(".sure-wrapper").hide();
			}
			function createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, activeClassName) {
				var flag = selectDateType === 1;
				var title = '<div><span class="' + (flag ? activeClassName : "") +
					' calendar" onclick="changeEvent(this,1)">公历</span><span class="calendar ' + (!flag ? activeClassName : "") +
					'" onclick="changeEvent(this,2)">农历</span></div>';
				// 创建组件
				var iosSelect = new IosSelect(4,
					[yearData, monthData, dateData, timeData], {
						title: title,
						headerHeight: 64,
						itemHeight: 50,
						itemShowCount: 5,
						oneLevelId: oneLevelId,
						twoLevelId: twoLevelId,
						threeLevelId: threeLevelId,
						fourLevelId: fourLevelId,
						callback: function(selectOneObj, selectTwoObj, selectThreeObj, selectFourObj) {
							showDateDom.attr('data-year', selectOneObj.id);
							showDateDom.attr('data-month', selectTwoObj.id);
							showDateDom.attr('data-date', selectThreeObj.id);
							showDateDom.attr('data-time', selectFourObj.id);
							$(".sure-wrapper").show();
							if (selectDateType == 1) {
								var toLunarObj = Lunar.toLunar(selectOneObj.id, selectTwoObj.id, selectThreeObj.id);
								$(".solar-time").html(selectOneObj.value + selectTwoObj.value + selectThreeObj.value + ' ' + selectFourObj.name);
								$(".lunar-time").html(toLunarObj[0] + '年' + toLunarObj[5] + toLunarObj[6] + ' ' + selectFourObj.name);
							} else {
								var toSolarObj = Lunar.toSolar(selectOneObj.id, selectTwoObj.id, selectThreeObj.id)
								$(".lunar-time").html(selectOneObj.value + selectTwoObj.value + selectThreeObj.value + ' ' + selectFourObj.name);
								$(".solar-time").html(toSolarObj[0] + "年" + toSolarObj[1] + "月" + toSolarObj[2] + "日" + ' ' + selectFourObj.name);
							}
							showDateDom.html(selectOneObj.value + selectTwoObj.value + selectThreeObj.value + ' ' + selectFourObj.name);
						}
					});
			}
		</script>
           

demo下载地址：https://download.csdn.net/download/qq_37149397/10916127

希望大佬多多批评指教，万分感谢！

借鉴地址：https://blog.csdn.net/u013125372/article/details/78711992

https://www.cnblogs.com/mx3000/archive/2016/10/09/5943062.html