头像

jQuery手机端美团酒店预订日期选择插件【原创

来源:http://www.sucaihuo.com/js/3356 素材火管理员 2018-01-02 16:43浏览(241) 收藏

jQuery手机端美团酒店预订日期选择插件,界面美观功能实用的一款酒店入住日期和离店日期范围选择代码。
jQuery手机端美团酒店预订日期选择插件
分类:日期时间 > 日期控件 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 8 下载资源 下载积分: 30 积分

js代码

<script type="text/javascript" src="js/date.js"></script>
	<script>
		$(function(){
			$('#firstSelect').on('click',function () {
				$('.mask_calendar').show();
			});
			$('.mask_calendar').on('click',function (e) {
				if(e.target.className == "mask_calendar"){
					$('.calendar').slideUp(200);
	                $('.mask_calendar').fadeOut(200);
				}
			})
			$('#firstSelect').calendarSwitch({
				selectors : {
					sections : ".calendar"
				},
                index : 4,      //展示的月份个数
                animateFunction : "slideToggle",        //动画效果
                controlDay:true,//知否控制在daysnumber天之内,这个数值的设置前提是总显示天数大于90天
                daysnumber : "90",     //控制天数
                comeColor : "#2EB6A8",       //入住颜色
                outColor : "#2EB6A8",      //离店颜色
                comeoutColor : "#E0F4F2",        //入住和离店之间的颜色
                callback :function(){//回调函数
                	$('.mask_calendar').fadeOut(200);
                	var startDate = $('#startDate').val();  //入住的天数
	                var endDate = $('#endDate').val();      //离店的天数
	                var NumDate = $('.NumDate').text();    //共多少晚
	                console.log(startDate);
	                console.log(endDate);
	                console.log(NumDate);
	                //下面做ajax请求
	                //show_loading();
	                /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
	                    if(data.result==1){
	                        //成功
	                    } else {
	                        //失败
	                    }
	                });*/
                }  ,   
                comfireBtn:'.comfire'//确定按钮的class或者id
            });
			var b=new Date();
            var ye=b.getFullYear();
            var mo=b.getMonth()+1;
            mo = mo<10?"0"+mo:mo;
            var da=b.getDate();
            da = da<10?"0"+da:da;
            $('#startDate').val(ye+'-'+mo+'-'+da);
            b=new Date(b.getTime()+24*3600*1000);
            var ye=b.getFullYear();
            var mo=b.getMonth()+1;
            mo = mo<10?"0"+mo:mo;
            var da=b.getDate();
            da = da<10?"0"+da:da;
            $('#endDate').val(ye+'-'+mo+'-'+da);
        });
	</script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/3356.html
评论23
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 22楼
    17小时前 09:36
    胡胡
    很不错,现在比较流行带标记的日期插件!~
  • 头像 21楼
    01-12 16:01
    &开到荼靡?
    这个很好 , 下载下来搞搞
  • 头像 20楼
    01-11 14:54
    谁的青春
    谢谢分享,很不错的
  • 头像 19楼
    01-08 17:41
    asda
    插件挺好的,就是不会调用
  • 头像 18楼
    01-08 09:53
    -
    日期插件不错的 自己改一下就可以装逼了
  • 头像 17楼
    01-06 09:07
    lisun1989
    谢谢分享,开发移动端正好用到
  • 头像 16楼
    01-05 18:11
    SHERO
    下载试试,希望好用
  • 头像 15楼
    01-05 10:02
    潇晓筱
    很赞,效果实用
  • 头像 14楼
    01-04 09:17
    翻滚吧,汉堡
    界面漂亮,功能实用!
  • 头像 13楼
    01-03 23:07
    我是大蒙
    界面漂亮,功能实用!
1 2