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

H5-农阳历日期互转并对应相关推荐

微信小程序农阳历日历选择器农阳历日期互转
文章主要实现微信小程序中农历.阳历日期选择器 &选中日期同时获取它对应的农/阳历日期因项目需求所以我在demo中实现选中日期并获取相应的农/阳历日期,实现的主要代码在selectdate.j ...
微信小程序农历阳历日期选择器选中日期同时获取对应农/阳历日期这个demo问题的修改
修改以下三个文件完成BUG的修复. selectdata.js文件中将农历转阳历的代码修改成: 以下是原selectdata.js中的代码搜索:calendarConverter.lunar2sol ...
ABAP 阳历日期与农历日期互转
ABAP 阳历日期与农历日期互转背景项目简介类工具方法简介农历日期转公历日期公历日期转农历日期测试Demo 公历转农历农历转公历项目Github地址代码背景 SAP HCM需要一个 ...
php 获取当月的阴历值，PHP计算节日、节气、农阳历互换的代码
1. php 获取当月的阴历值 <?phpfunction lunarcalendar($month, $year) {global $lnlunarcalendar; //农历每月的天数.每个 ...
公元元年之后的天数与日期之间的相互转换阳历日期转农历
前几天,有个同事问:知道现在距离公元元年1月1日的天数,如何计算日期?此前对闰年的概念也不是很清晰,在网上查了下闰年规则,整理出一个日期转换类,贴出来和大家分享,不足之处还请多多指教! 先说下闰年规则 ...
datetime unix php,PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】...
本文实例讲述了PHP基于DateTime类解决Unix时间戳与日期互转问题.分享给大家供大家参考,具体如下: 这个问题主要在32位的系统下出现,64位的不存在这样的问题.php 5.2+提供了Date ...
java 公历农历_java已知阳历日期求对应阴历日期源代码
import java.text.*; import java.util.*; class ChineseCalendarGB { private int gregorianYear; private ...
根据阳历日期返回星座
def constellation(month, day):"""根据阳历日期判断属于哪个星座"""if (month == 3 and 2 ...
solarlunar库，阴历，阳历日期及转换库
阴历日期,阳历日期,阴历阳历转换库. 没时间写中文了,直接复制库文件里面的,见量.... 1. solar calendar interface: date range: any date... ...

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

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

H5-农阳历日期互转并对应相关推荐

最新文章

热门文章