<html>
<head></head>
<body>
<div class="main">
<div class="container">
<form id="loginform">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">event</i>
</span>
<input class="form-control" type="text" id="releasdate" name="releasdate" autocomplete="off">
</div>
</div>
<button type="button" class="btn dvalidate">Validieren</button>
</form>
</div>
<div id="footer">
<div class="footer-main">
<a target="_blank" href="https://www.hepster.com"><img src="https://www.hepster.com/download/images/codedbyhepster.svg"></a>
</div>
</div>
</div>
</body>
</html>
/*for the pen*/
html, body{
background-color:#ddd;
width:100%;
height:100%;
overflow-x:hidden;
position:relative;
margin:0;
padding:0;
}
body *{
font-size:16px;
font-family:"Roboto";
}
body{
transition:0.4s background ease-out;
}
body.valid{
background:#47cf73;
}
body.invalid{
background:#ff3c41;
}
h2{
font-weight: 300;
font-size: 30px;
margin: 20px 0 0 0;
border-bottom: 1px solid #ccc;
padding: 20px;
color: #0095de;
background: #ffffff;
}
p{
padding:10px 20px;
}
.main{
width:100%;
display:block;
overflow:hidden;
}
.container{
width:500px;
margin:100px auto;
background:#ffffff;
box-shadow:0 12px 22px -12px rgba(0,0,0,0.15);
border-radius:5px;
}
#footer{
background:#fff;
position:absolute;
bottom:0px;
width:100%;
bottom:0;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);
padding:6px 0 0 0;
}
#footer .footer-main{
width:300px;
margin:0 auto;
text-align:center;
}
#footer .footer-main a{
display:inline-block;
width:200px;
}
#footer .footer-main a img{
width:200px;
display:block;
}
/*the form*/
form{
padding:20px 0;
}
.form-group{
padding: 0;
}
.form-group:first-child{
margin-bottom:0;
}
.btn-primary{
cursor:pointer;
}
.margin-top-20{
margin-top:20px;
}
input#releasdate{
padding-right:100px;
}
.btn.dvalidate{
position: absolute;
top: 22px;
z-index: 100;
right: 17px;
}
$(document).ready(function(){
$('#releasdate').datepicker({
autoclose:true,
language:"de-DE",
format:"dd.mm.yyyy"
}).on("changeDate", function(e) {
$(".dvalidate").click();
});
$('#releasdate').datepicker("setDate",new Date());
$(".dvalidate").click(function(e){
var releasedate = $('#releasdate').datepicker("getDate");
releasedate.setHours(0,0,1);
var now = new Date();
now.setHours(0,0,0);
console.log(now);
console.log(releasedate);
if(now > releasedate){
$(".input-group-addon i").text("event_busy");
$("body").addClass("invalid").removeClass("valid");
console.log("not valid");
}else{
$(".input-group-addon i").text("event_available");
$("body").addClass("valid").removeClass("invalid");
console.log("valid");
}
});
setTimeout(function(){
$(".dvalidate").click();
},200);
});
