头像

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

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

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

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

查看演示 下载资源: 30 下载资源 下载积分: 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楼
    03-13 09:00
    Ja***es
    绝对的好东西,正需要这个呢!
  • 头像 21楼
    01-17 09:56
    Al***an
    正好需要这个,及时雨
  • 头像 20楼
    01-16 09:36
    胡***胡
    很不错,现在比较流行带标记的日期插件!~
  • 头像 19楼
    01-12 16:01
    &***?
    这个很好 , 下载下来搞搞
  • 头像 18楼
    01-08 17:41
    as***da
    插件挺好的,就是不会调用
  • 头像 17楼
    01-08 09:53
    -***-
    日期插件不错的 自己改一下就可以装逼了
  • 头像 16楼
    01-05 18:11
    SH***RO
    下载试试,希望好用
  • 头像 15楼
    01-05 10:02
    潇***筱
    很赞,效果实用
  • 头像 14楼
    01-04 09:17
    翻***堡
    界面漂亮,功能实用!
  • 头像 13楼
    01-03 23:07
    我***蒙
    界面漂亮,功能实用!
1 2