jquery仿百度万年历农历日期代码



220 878 293



特效描述:jquery仿百度 万年历农历日期,jquery万年历代码

代码结构

1. 引入CSS

<link href="css/wnl.css" rel="stylesheet" type="text/css" />

2. HTML代码

<!-- BEGIN #main -->
<div id="main">
<div id="so_top">
</div>
<ul id="m-result" class="result"><li id="first" class="res-list">
<div id="mohe-rili" class="g-mohe"  data-mohe-type="rili">
<div class="mh-rili-wap mh-rili-only " data-mgd='{"b":"rili-body"}'>
	<div class="mh-tips">
		<div class="mh-loading">
			<i class="mh-ico-loading"></i>正在为您努力加载中...
		</div>
		<div class="mh-err-tips">亲,出了点问题~ 您可<a href="#reload" class="mh-js-reload">重试</a></div>
	</div>
	<div class="mh-rili-widget">
<div class="mh-doc-bd mh-calendar">
	<div class="mh-hint-bar gclearfix">
		<div class="mh-control-bar">
			<div class="mh-control-module mh-year-control mh-year-bar">
				<a href="#prev-year" action="prev" class="mh-prev" data-md='{"p":"prev-year"}'></a>
				<div class="mh-control">
					<i class="mh-trigger"></i>
					<div class="mh-field mh-year" val=""></div>
				</div>
				<a href="#next-year" action="next" class="mh-next" data-md='{"p":"next-year"}'></a>
				<ul class="mh-list year-list" style="display:none;" data-md='{"p":"select-year"}'></ul>
			</div>
			<div class="mh-control-module mh-month-control mh-mouth-bar">
				<a href="#prev-month" action="prev" class="mh-prev" data-md='{"p":"prev-month"}'></a>
				<div class="mh-control">
					<i class="mh-trigger"></i>
					<div class="mh-field mh-month" val=""></div>
				</div>
				<a href="#next-month" action="next" class="mh-next" data-md='{"p":"next-month"}'></a>
				<ul class="mh-list month-list" style="display:none;" data-md='{"p":"select-month"}'></ul>
			</div>
			<div class="mh-control-module mh-holiday-control mh-holiday-bar">
				<div class="mh-control">
					<i class="mh-trigger"></i>
					<div class="mh-field mh-holiday"></div>
				</div>
				<ul class="mh-list" style="display:none;" data-md='{"p":"select-holiday"}'></ul>
			</div>
			<div class="mh-btn-today" data-md='{"p":"btn-today"}'>返回今天</div>
		</div>
		<div class="mh-time-panel">
			<dl class="gclearfix">
				<dt class="mh-time-monitor-title">北京时间:</dt>
				<dd class="mh-time-monitor"></dd>
			</dl>
		</div>
	</div>
	<div class="mh-cal-main">
		<div class="mh-col-1 mh-dates">
			<ul class="mh-dates-hd gclearfix">
				<li class="mh-days-title">一</li>
				<li class="mh-days-title">二</li>
				<li class="mh-days-title">三</li>
				<li class="mh-days-title">四</li>
				<li class="mh-days-title">五</li>
				<li class="mh-days-title mh-weekend">六</li>
				<li class="mh-days-title mh-last mh-weekend">日</li>
			</ul>
			<ol class="mh-dates-bd"></ol>
		</div>
		<div class="mh-col-2 mh-almanac">
			<div class="mh-almanac-base mh-almanac-main"></div>
			<div class="mh-almanac-extra gclearfix" style="display:none;">
				<div class="mh-suited">
					<h3 class="mh-st-label">宜</h3>
					<ul class="mh-st-items gclearfix"></ul>
				</div>
				<div class="mh-tapu">
					<h3 class="mh-st-label">忌</h3>
					<ul class="mh-st-items gclearfix"></ul>
				</div>
			</div>
		</div>
	</div>
</div>
<span id="mh-date-y" style="display:none;">2015</span>
<script>
/*
2015节假日清单,一年一改
*/
(function(){window.OB=window.OB||{},window.OB.RiLi=window.OB.RiLi||{},window.OB.RiLi.dateRest=["0101","0102","0103","0218","0219","0220","0221","0222","0223","0224","0404","0405","0406","0501","0502","0503","0620","0621","0622","0903","0904","0905","0926","0927","1001","1002","1003","1004","1005","1006","1007"],window.OB.RiLi.dateWork=["0104","0215","0228","0906","1010"],window.OB.RiLi.dateFestival=["20150101||元旦","20150219||春节","20150405||清明节","20150501||劳动节","20150620||端午节","20150903||抗战纪念日","20150927||中秋节","20151001||国庆节"],window.OB.RiLi.dateAllFestival=["正月初一|v,春节","正月十五|v,元宵节","二月初二|v,龙头节","五月初五|v,端午节","七月初七|v,七夕节","七月十五|v,中元节","八月十五|v,中秋节","九月初九|v,重阳节","十月初一|i,寒衣节","十月十五|i,下元节","腊月初八|i,腊八节","腊月廿三|i,祭灶节","0202|i,世界湿地日,1996","0214|v,西洋情人节","0308|i,国际妇女节,1975","0315|i,国际消费者权益日,1983","0422|i,世界地球日,1990","0501|v,国际劳动节,1889","0512|i,国际护士节,1912","0518|i,国际博物馆日,1977","0605|i,世界环境日,1972","0623|i,国际奥林匹克日,1948","0624|i,世界骨质疏松日,1997","1117|i,世界学生日,1942","1201|i,世界艾滋病日,1988","0101|v,元旦","0312|i,植树节,1979","0504|i,五四青年节,1939","0601|v,儿童节,1950","0701|v,建党节,1941","0801|v,建军节,1933","0903|v,抗战胜利纪念日","0910|v,教师节,1985","1001|v,国庆节,1949","1224|v,平安夜","1225|v,圣诞节","w:0520|v,母亲节,1913","w:0630|v,父亲节","w:1144|v,感恩节(美国)","w:1021|v,感恩节(加拿大)"];var e="https://s.ssl.qhimg.com/!97be6a4c/data/"/*本地老黄历库在lhl文件夹,此处是官网调用的*/;location.protocol=="https:"&&(e="https://s.ssl.qhimg.com/!97be6a4c/data/")/*本地老黄历库在lhl文件夹,此处是官网调用的*/,window.OB.RiLi.hlUrl={2008:e+"hl2008.js",2009:e+"hl2009.js",2010:e+"hl2010.js",2011:e+"hl2011.js",2012:e+"hl2012.js",2013:e+"hl2013.js",2014:e+"hl2014.js",2015:e+"hl2015.js",2016:e+"hl2016.js",2017:e+"hl2017.js",2018:e+"hl2018.js",2019:e+"hl2019.js",2020:e+"hl2020.js"},window.OB.RiLi.dateHuochepiao=["-20141201||20","20141201||30","20141202||36","20141203||42","20141204||48","20141205||54","+20141205||60","c20141221-20141228||red"],window.OB.RiLi.useLunarTicketDay={2015:{"0218":"除夕","0219":"初一","0220":"初二","0221":"初三","0222":"初四","0223":"初五","0224":"初六","0225":"初七"}}})()</script>
			</div>
</div>
<div class="mh-rili-foot">
	</div>
<select class="mh-holiday-data" style="display:none;">
	<option value="0" data-desc="" data-gl="">放假安排</option>
			<option value="抗战胜利纪念日" data-desc="9月3日至5日放假调休,共3天。9月6日(星期日)上班。" data-gl="">抗战胜利纪念日</option>
			<option value="国庆节" data-desc="10月1日至7日放假调休,共7天。10月10日(星期六)上班。" data-gl="">国庆节</option>
			<option value="中秋节" data-desc="9月27日放假。" data-gl="">中秋节</option>
			<option value="端午节" data-desc="6月20日放假,6月22日(星期一)补休。" data-gl="">端午节</option>
			<option value="劳动节" data-desc="5月1日放假,与周末连休。" data-gl="">劳动节</option>
			<option value="清明节" data-desc="4月5日放假,4月6日(星期一)补休。" data-gl="">清明节</option>
			<option value="春节" data-desc="2月18日至24日放假调休,共7天。2月15日(星期日)、2月28日(星期六)上班。" data-gl="">春节</option>
			<option value="元旦" data-desc="1月1日至3日放假调休,共3天。1月4日(星期日)上班。" data-gl="">元旦</option>
	</select>
      <!--value获取当前PHP服务器时间-->
<input type="hidden" id="mh-rili-params" value="action=query&year=2015&month=09&day=04" />
</div><script>_loader.use("jquery",function(){function l(){t.slideDown(),r.slideDown(),i=="1"&&$.ajax({url:v("https://open.onebox.haosou.com/dataApi"),dataType:"jsonp",data:{query:"日历",url:"日历",type:"rili",user_tpl:"ajax/rili/html",selectorPrefix:s,asynLoading:i,src:"onebox",tpl:"1"},timeout:5e3,success:function(t){t&&t.html?(e.find(".mh-rili-widget").html(t.html),n.hide().addClass("mh-err"),i="0"):d()},error:function(){d()}})}function c(t,n){t=t.replace("\u6e05\u660e","\u6e05\u660e\u8282").replace("\u56fd\u9645\u52b3\u52a8\u8282","\u52b3\u52a8\u8282");var r=new RegExp(u);f=f||e.find("#mh-date-y").html(),u&&n==f&&r.test(t)?a=!0:a=!1,o.val(t).trigger("change")}function h(){$.each(o.find("option"),function(e,t){var n=$(this);n.data("desc")&&n.val()&&(u+=n.val()+"|")}),u=u.substring(0,u.length-2)}function p(){n.hide()}function d(){n.addClass("mh-err")}function v(e){return location.protocol=="https:"?"https://open.onebox.haosou.com/api/proxy?__url__="+encodeURIComponent(e):e}jQuery.curCSS=jQuery.css;var e=$("#mohe-rili"),t=$(".mh-rili-wap",e),n=$(".mh-tips",e),r=$(".mh-rili-foot",e),i="0",s="#mohe-rili .mh-rili-widget",o=e.find(".mh-holiday-data"),u="",a=!1,f=e.find("#mh-date-y").html();h(),e.on("click",".mh-op a",function(e){e.preventDefault();var n=$(this).closest(".mh-op");n.hasClass("mh-op-less")?(t.slideUp(),r.slideUp()):l(),n.toggleClass("mh-op-less")}).on("click",".mh-js-reload",function(e){e.preventDefault(),l()}).on("change",".mh-holiday-data",function(){var e=$(this),t=e.val(),n=e.find("option:selected"),i=n.attr("data-desc")||"",s=n.attr("data-gl")||"";if(!a||t=="0"||i===""&&s==="")r.html("");else{var o='<div class="mh-rili-holiday">[holidayDetail][holidaySug]</div>';i&&(i="<p>"+i+"</p>"),s&&(s="<p><span>\u4f11\u5047\u653b\u7565\uff1a</span>"+s+"</p>"),o=o.replace("[holidayDetail]",i).replace("[holidaySug]",s),r.html(o)}}),window.OB=window.OB||{},window.OB.RiLi=window.OB.RiLi||{},window.OB.RiLi.rootSelector="#mohe-rili ",window.OB.RiLi.CallBack={afterInit:p,holiday:c}})</script>
	<script>
/**
 * 描述:本脚本是从360好搜扒下来的,别说我如何如何无耻,360扒的百度,百度扒的谷歌,就是这么屌!
    rili-widget 所包含的JS文件们
 * 共包含15个JS文件,由于彼此间存在依赖关系,它们的顺序必须依次是:
 *		1.jquery-ui-1.10.3.custom
 *		2.msg_config	// 配置事件消息
 *
 *		3.mediator	  //库,基于事件的异步编程
 *		4.calendar    //日历类
 *		5.lunar       //农历
 *
 *		6.cachesvc    //window. appdata依赖它
 *		7.appdata     //window. 时间矫正
 *		8.timesvc     //window.TimeSVC  时间同步服务
 *
 *		9.huochepiao    //购票(无用)
 *
 *		10.fakeSelect    //$-ui  年份月份下拉选择器
 *		11.speCalendar   //$-ui 日历单元格的特殊内容
 *		12.webCalendar   //$-ui 日历单元格
 *		13.dayDetail     //$-ui 日历右侧的详情(黄历 忌宜)
 *
 *		14.xianhao      //注册事件:日历上方的操作工具条:年月日节假日 返回今天
 *		15.dispatcher   //提取参数,初始化日历
 *
 * 最后拼接的顺序是 jquery-ui-1.10.3.custom,msg_config,mediator,calendar,lunar,cachesvc,appdata,timesvc,huochepiao,fakeSelect,speCalendar,webCalendar,dayDetail,xianhao,dispatcher
 *
 * edit by @gaosong 2015-08-31
 *
 * 代码从导航日历迁移过来,
 */
_loader.remove && _loader.remove("rili-widget");
_loader.add("rili-widget", "./js/wnl.js");//上述JS文件们已让我压缩成wnl.js
_loader.use("jquery, rili-widget", function(){
	var RiLi = window.OB.RiLi;
	var gMsg = RiLi.msg_config,
		dispatcher = RiLi.Dispatcher,
		mediator = RiLi.mediator;
	var root = window.OB.RiLi.rootSelector || '';
	// RiLi.AppData(namespace, signature, storeObj) 为了解决"In IE7, keys may not contain special chars"
	//'api.hao.360.cn:rili' 仅仅是个 namespace
	var timeData = new RiLi.AppData('api.hao.360.cn:rili'),
		gap = timeData.get('timeOffset'),
		dt = new Date(new Date() - (gap || 0));
	RiLi.action = "default";
	var $detail = $(root+'.mh-almanac .mh-almanac-main');
	$detail.dayDetail(dt);
	RiLi.today = dt;
	var $wbc = $(root+'.mh-calendar'); 
	mediator.subscribe(gMsg.type.actionfestival , function (d){
		var holi = RiLi.dateFestival,
			val = d.val ? decodeURIComponent(d.val) : "",
			holiHash = {},
			el,
			node = {};
		for (var i = 0 ; i < holi.length ; ++i){
			el = holi[i];
			el = $.trim(el).split("||");
			if (el.length == 2){
				node = {};
				node.year = el[0].substr(0 , 4);
				node.month = el[0].substr(4 , 2);
				node.day = el[0].substr(6 , 2);
				holiHash[el[1]] = node;
			}
		};
		RiLi.action = "festival";
		if (holiHash[val]){
			node.year = holiHash[val].year;
			node.month = holiHash[val].month;
			node.day = holiHash[val].day;
			RiLi.needDay = new Date(parseInt(node.year , 10) , parseInt(node.month ,10) - 1 , node.day);
			$wbc.webCalendar({
				time : new Date(parseInt(node.year , 10) , parseInt(node.month ,10) - 1 , node.day),
				onselect: function(d, l){
					$detail.dayDetail('init', d , l);
				}
			}); 
		}
		else{
			RiLi.action = "default";
		}
	});	
	mediator.subscribe(gMsg.type.actionquery , function (d){
		var strDate;
		if (!d.year || d.year > 2100 || d.year < 1901){
			RiLi.action = "default";
			return 0;
		}
		d.month = parseInt(d.month , 10);
		if (d.month &&  (d.month > 12 || d.month < 1)){
			RiLi.action = "default";
			return 0;
		}
		if (!d.month){
			d.month = 1 ;
		}
		d.day = parseInt(d.day , 10);
		if (!d.day){
			d.day = 1;
		} 
		RiLi.action = "query";    	
		RiLi.needDay = new Date(parseInt(d.year , 10) , parseInt(d.month ,10) - 1 , d.day);
		$wbc.webCalendar({
			time : new Date(parseInt(d.year , 10) , parseInt(d.month ,10) - 1 , d.day),
			onselect: function(d, l){
				$detail.dayDetail('init', d , l);
			}
		}); 
	});
	mediator.subscribe(gMsg.type.actiongoupiao, function (d){
		RiLi.action = "goupiao";
		$wbc.webCalendar({
			time : dt,
			onselect: function(d, l){
				$detail.dayDetail('init', d , l);
			}
		}); 
	});
	mediator.subscribe(gMsg.type.actiondefault , function (d){
		RiLi.needDay = dt;
		$wbc.webCalendar({
			time : dt,
			onselect: function(d, l){
				$detail.dayDetail('init', d , l);
			}
		}); 
	});    
	dispatcher.dispatch();
	mediator.subscribe(gMsg.type.dch , function (d){
		// if (RiLi.needDay){
		// 	$wbc.webCalendar("initTime" , RiLi.needDay);
		// }
		// else{
		// 	$wbc.webCalendar("initTime" , RiLi.today);
		// }
		$wbc.webCalendar("initTime" , RiLi.needDay||RiLi.today);
	});   
	mediator.publish(gMsg.type.dch ,  dt);
	var nowDate = (new Date()).getTime() ;
	/* 时间矫正 */
	RiLi.TimeSVC.getTime(function(d){
		var trueTime = d.getTime();
		var timeData = new RiLi.AppData('api.hao.360.cn:rili') , isFirst = true;
		if(Math.abs(nowDate - trueTime) > 300000){
			timeData.set('timeOffset', nowDate - trueTime);
		}
		else {
			timeData.remove('timeOffset');
		}
		if (typeof gap == undefined || !isFirst){
			RiLi.today = d;
			mediator.publish(gMsg.type.dch , d);
		}
		isFirst = false;
	});
	//日历初始完后的回调
	if(typeof RiLi.CallBack.afterInit === "function"){
		RiLi.CallBack.afterInit();
	}
});
</script>
    </li></ul></div><!-- END #main -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字提示框 日历选择器 文字切换 下拉框 列表切换 按钮控制 滚动切换 滑动选项卡切换 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 切换按钮 日历日期时间 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到