jQuery手机端酒店预订日期选择

来源：互联网 2023-03-16 23:54:58 版权归原作者所有，如有侵权，请联系我们

jQuery手机端酒店预订日期选择

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery手机端酒店预订日期选择

书写hmtl代码。

div id="checkinout">

div id="firstSelect" style="width:100%;">

div class="Date_lr" style="float:left;">

P>入住/

input id="startDate" type="text" value=""style="" readonly>

/div>

div class="Date_lr" style="float:right;">

离店/

input id="endDate" type="text" value="" style="" readonly>

/div>

span class="span21">共span class="NumDate">1/span>晚/span>

/div>

div class="mask_calendar">

div class="calendar">/div>

/div>

jQuery手机端酒店预订日期选择

2相关内容未经授权抓取自百度经验

书写css代码。 style> .Date_lr {

width:50%;

text-align:center;

}

.span21 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 14px; color: #666; border: 1px solid #e5e5e5; padding: 2px 8px; line-height: 20px; border-radius: .2rem;

background-color: #fff; }

#checkinout { height: 50px; line-height: 50px; position: relative; margin: 10px; padding: 2px 0; display: -webkit-box; display: flex; border: 1px solid #e5e5e5; border-radius: .02rem;

background-color: #fff; }

#firstSelect p { line-height: 25px; color: #999; font-size: 12px; }

#startDate { border: 0; position: absolute; left: 0; margin: 0 auto; width: 50%; font-size: 16px; color: #05c0ad; text-align: center; }

#endDate { border: 0; position: absolute; right: 0; margin: auto 0; width: 50%; font-size: 16px; color: #05c0ad; text-align: center; }

.mask_calendar { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); display: none; z-index: 9999; }

.calendar { height: 400px; position: fixed; bottom: 0; left: 0; }

.animated { animation-duration: 1s; animation-fill-mode: both; }

@keyframes slideInDown { from {

transform: translate3d(0, -100%, 0);

visibility: visible;

}

to { transform: translate3d(0, 0, 0); }

}

.slideInDown { animation-name: slideInDown; }

/style>

jQuery手机端酒店预订日期选择

书写并添加js代码。

script src="js/jquery.min.js">/script>

script 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);

} ,

comfireBtn:'.comfire'//确定按钮的class或者id

});

var b=new Date();

var ye=b.getFullYear();

var mo=b.getMonth() 1;

mo = mo10?"0" mo:mo;

var da=b.getDate();

da = da10?"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 = mo10?"0" mo:mo;

var da=b.getDate();

da = da10?"0" da:da;

$('#endDate').val(ye '-' mo '-' da);

});

/script>

jQuery手机端酒店预订日期选择

代码整体结构。

jQuery手机端酒店预订日期选择

查看效果。

jQuery手机端酒店预订日期选择

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：jquery跳转页面的方法下一篇：jQuery汽车品牌按字母分类锚点导航

jQuery手机端酒店预订日期选择

工具/原料

方法/步骤

热门文章

标签列表