<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="booking-page" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Guestroom</h1>
</div>
<div role="main" class="ui-content">
<div id="checkInDate">
<h1>Arrival</h1>
<span></span>
<div class="roller"><div class="daynum"></div></div>
</div>
<br>
<br>
<div id="checkOutDate">
<h1>Departure</h1>
<span></span>
<div class="roller"><div class="daynum"></div></div>
</div>
</div>
</div>
<div id="datepicker-page" data-role="page" data-dialog="true" data-close-btn="none" data-theme="a">
<div data-role="header" data-position="fixed">
<h1 id="whichDate"></h1>
</div>
<div role="main" class="ui-content">
<div id="datepicker" ondragstart="return false;"></div>
<button class="ui-btn" onclick="$.mobile.back();">Cancel</button>
</div>
</div>
</body>
</html>
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
Date.prototype.toMidnight = function (){
this.setHours(0);
this.setMinutes(0);
this.setSeconds(0);
this.setMilliseconds(0);
return this;
};
var today = new Date(Date.now()).toMidnight(),
cases = {
"checkInDate": today,
"checkOutDate": today
},
whichDate,
swipeDay = false;
function showDate(which, swipe) {
var value = cases[which],
dayNo = value.getDate(),
dayOfWeek = daysOfWeek[value.getDay()],
monthName = monthNames[value.getMonth()],
dayMonth = dayOfWeek + "<br>" + monthName,
dayText = (dayNo.toString().length == 1) ? "0" + dayNo : dayNo;
var roller = $("#" + which).find(".roller"),
daynum = $("#" + which).find(".daynum");
switch(swipe) {
case 0:
$(daynum).html(dayText);
$("#" + which).find("span").html(dayMonth);
break;
case -1:
$(daynum).animate({
marginLeft: "-100%"
},{
duration: "fast",
complete: function () {
$(daynum).html(dayText)
.css("margin-left", "100%")
.animate({
marginLeft: "0"
},{
duration: "fast",
complete: function () {
$("#" + which).find("span").html(dayMonth);
}
});
}
});
break;
case +1:
$(daynum).animate({
marginLeft: "100%"
},{
duration: "fast",
complete: function () {
$(daynum).html(dayText)
.css("margin-left", "-100%")
.animate({
marginLeft: "0"
},{
duration: "fast",
complete: function () {
$("#" + which).find("span").html(dayMonth);
}
});
}
});
break;
}
}
function enableDate(date) {
var minDate;
switch (whichDate) {
case "checkInDate":
minDate = today;
break;
case "checkOutDate":
minDate = cases["checkInDate"];
break;
}
return [date >= minDate, "", ""];
}
function plausibleCheckOut() {
var checkInDate = cases["checkInDate"];
var checkOutDate = cases["checkOutDate"];
if (checkOutDate < checkInDate) {
cases["checkOutDate"] = checkInDate;
showDate("checkOutDate", 0);
}
}
function changeDay(which, days){
swipeDay = true;
var minDate;
var newDate = new Date(cases[which]);
newDate.setDate(newDate.getDate() + days);
switch (which) {
case "checkInDate":
minDate = today;
if(newDate >= minDate) {
cases[which] = newDate;
showDate(which, days);
plausibleCheckOut();
}
break;
case "checkOutDate":
minDate = cases["checkInDate"];
if(newDate >= minDate) {
cases[which] = newDate;
showDate(which, days);
}
break;
}
}
$(document).on("pagecreate", "#booking-page", function() {
showDate("checkInDate", 0);
showDate("checkOutDate", 0);
$("#checkInDate").attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
$("#checkOutDate").attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
$("#checkInDate .roller").on("swipeleft", function(){changeDay("checkInDate", -1);});
$("#checkInDate .roller").on("swiperight", function(){changeDay("checkInDate", +1);});
$("#checkOutDate .roller").on("swipeleft", function(){changeDay("checkOutDate", -1);});
$("#checkOutDate .roller").on("swiperight", function(){changeDay("checkOutDate", +1);});
$("#checkInDate").on("vmouseup", function() {
if(!swipeDay){
whichDate = "checkInDate";
$(":mobile-pagecontainer").pagecontainer("change", "#datepicker-page");
}
swipeDay = false;
});
$("#checkOutDate").on("vclick", function() {
if(!swipeDay){
whichDate = "checkOutDate";
$(":mobile-pagecontainer").pagecontainer("change", "#datepicker-page");
}
swipeDay = false;
});
});
$(document).on("pagecreate", "#datepicker-page", function() {
$("#datepicker").datepicker({
showButtonPanel: true,
beforeShowDay: enableDate,
onSelect: function(dateText, inst) {
cases[whichDate] = $(this).datepicker("getDate");
$.mobile.back();
}
}).datepicker("setDate", today);
$(".ui-datepicker").attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
$("#datepicker").on("swipeleft", function(){
$("#datepicker table").first().animate({
marginLeft: "-100%"
},{
duration: "fast",
complete: function () {
$.datepicker._adjustDate("#datepicker", +1, "M" );
}
});
});
$("#datepicker").on("swiperight", function(){
$("#datepicker table").first().animate({
marginLeft: "100%"
},{
duration: "fast",
complete: function () {
$.datepicker._adjustDate("#datepicker", -1, "M" );
}
});
});
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var prevPage = ui.prevPage.prop("id");
if (typeof ui.toPage == "object") {
if (pageId == "datepicker-page" && prevPage == "booking-page") {
var title;
switch (whichDate) {
case "checkInDate":
title = "Check-in";
break;
case "checkOutDate":
title = "Check-out";
break;
}
$("#whichDate").html(title);
$("#datepicker").datepicker("setDate", cases[whichDate]);
}
if (pageId == "booking-page" && prevPage == "datepicker-page") {
showDate(whichDate, 0);
plausibleCheckOut();
}
}
});
/*
* jQuery Mobile: jQuery UI Datepicker Monkey Patch
* http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html
*/
(function() {
// use a jQuery Mobile icon on trigger button
$.datepicker._triggerClass += " ui-btn ui-btn-right ui-icon-carat-d ui-btn-icon-notext ui-corner-all";
// replace jQuery UI CSS classes with jQuery Mobile CSS classes in the generated HTML
$.datepicker._generateHTML_old = $.datepicker._generateHTML;
$.datepicker._generateHTML = function(inst) {
return $("<div></div>").html(this._generateHTML_old(inst))
.find(".ui-datepicker-header").removeClass("ui-widget-header ui-helper-clearfix").addClass("ui-bar-inherit").end()
.find(".ui-datepicker-prev").addClass("ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext").end()
.find(".ui-datepicker-next").addClass("ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext").end()
.find(".ui-icon.ui-icon-circle-triangle-e, .ui-icon.ui-icon-circle-triangle-w").replaceWith(function() {
return this.childNodes;
}).end()
.find("span.ui-state-default").removeClass("ui-state-default").addClass("ui-btn").end()
.find("a.ui-state-default.ui-state-active").removeClass("ui-state-default ui-state-highlight ui-priority-secondary ui-state-active").addClass("ui-btn ui-btn-active").end()
.find("a.ui-state-default").removeClass("ui-state-default ui-state-highlight ui-priority-secondary").addClass("ui-btn").end()
.find(".ui-datepicker-buttonpane").removeClass("ui-widget-content").end()
.find(".ui-datepicker-current").removeClass("ui-state-default ui-priority-secondary").addClass("ui-btn ui-btn-inline ui-mini").end()
.find(".ui-datepicker-close").removeClass("ui-state-default ui-priority-primary").addClass("ui-btn ui-btn-inline ui-mini").end()
.html();
};
// replace jQuery UI CSS classes with jQuery Mobile CSS classes on the datepicker div, unbind mouseover and mouseout events on the datepicker div
$.datepicker._newInst_old = $.datepicker._newInst;
$.datepicker._newInst = function(target, inline) {
var inst = this._newInst_old(target, inline);
if (inst.dpDiv.hasClass("ui-widget")) {
inst.dpDiv.removeClass("ui-widget ui-widget-content ui-helper-clearfix").addClass(inline ? "ui-content" : "ui-content ui-overlay-shadow ui-body-a").unbind("mouseover mouseout");
}
return inst;
};
})();
#checkInDate,
#checkOutDate {
background: #fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 0%, 0)), color-stop(100%, hsla(0, 0%, 0%, 0.1)));
background: -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.1) 100%);
background: -o-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.1) 100%);
background: -ms-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.1) 100%);
background: linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.1) 100%);
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 3em;
font-weight: bold;
line-height: 1;
padding: 0;
width: 320px;
max-width: 320px;
}
.daynum {
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}
.roller {
display: inline-block;
overflow: hidden;
margin-left: 0.25em;
margin-right: 0.25em;
margin-bottom: 0.25em;
width: 4.5em;
text-align: center;
border-top: #777 1px solid;
border-right: #ccc 1px solid;
border-bottom: #ccc 1px solid;
border-left: #777 1px solid;
background: #c1c1c1;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MxYzFjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjMWMxYzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #c1c1c1 0%, #eeeeee 33%, #eeeeee 67%, #c1c1c1 100%);
background: -webkit-linear-gradient(left, #c1c1c1 0%,#eeeeee 33%,#eeeeee 67%,#c1c1c1 100%);
background: linear-gradient(to right, #c1c1c1 0%,#eeeeee 33%,#eeeeee 67%,#c1c1c1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#c1c1c1',GradientType=1 );
}
#checkInDate span,
#checkOutDate span {
display: block;
float:left;
font-size: 0.5em;
font-weight: normal;
width: 2.5em;
padding-left: 0.5em;
padding-bottom: 0.5em;
}
#checkInDate h1,
#checkOutDate h1 {
display: block;
border-bottom-style: groove;
font-size: 0.4em;
font-weight: normal;
padding: 0 0 0.25em 0;
text-align: center;
margin: 0.5em 0 0.5em 0
}
table {
width: 100%;
}
td span, td a.ui-btn {
width: 92% !important;
}
td {
text-align: center !important;
}
/*
* jQuery Mobile: jQuery UI Datepicker Monkey Patch
* http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html
*/
.ui-datepicker {
display: none;
}
/* set height and left/right margin to accomodate prev/next icons */
.ui-datepicker-header {
position: relative;
padding: 0.3125em 2.0625em;
line-height: 1.75em;
text-align: center;
}
.ui-datepicker-header .ui-btn {
margin: -1px 0 0 0;
}
/* fixed width layout for calendar; cells are fixed width */
.ui-datepicker-calendar {
border-collapse: collapse;
line-height: 2;
}
.ui-datepicker-calendar .ui-btn {
margin: 0;
padding: 0;
width: 2em;
line-height: inherit;
}
.ui-datepicker-today .ui-btn {
text-decoration: underline !important;
}
.ui-datepicker-days-cell-over .ui-btn {
border-color: inherit !important;
}
.ui-datepicker-buttonpane .ui-btn {
float: left;
margin: 0.5em 0 0;
padding: 0.5em 1em;
}
.ui-datepicker-buttonpane .ui-btn:last-child {
float: right;
}
/* class that can be added to datepicker <input> element's wrapper; makes room for trigger button */
.dp-input-button-wrap {
position: relative;
padding-right: 2.5em;
}
.dp-input-button-wrap .ui-btn {
top: 0.1875em;
margin: 0;
}