The jQuery UI datepicker previous button is not working properly, and even some days it is not clickable when used with -webkit-backface-visibility: hidden;
Otherwise, when jQuery UI datepicker is normally used it works fine.
<head>
<title>Check Windows</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<style>
*
{
box-sizing: border-box;
margin: 0; padding: 0;
}
.frame
{
height: 300px;
width: 400px;
float:left;
}
.square:hover .flipper
{
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.flipper
{
-webkit-transition:all 0.6s;
-webkit-transform-style:preserve-3d;
}
.front, .back
{
height: 300px;
width: 400px;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
position:absolute;
}
.back
{
-webkit-transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.f1
{
height: 300px;
width: 400px;
background-color:FF1D77;
font:normal 32px Comic Sans MS;
text-align:center;
}
.b1
{
height: 300px;
width: 400px;
}
.ui-datepicker
{
height: 300px;
width: 400px;
}
</style>
<body>
<div class="frame square"
style="position: absolute; top: 0px; left:0px;margin:15px;">
<div class="flipper">
<div class="front f1">
<div><br><br>Mouseover to see the Calendar</div>
</div>
<div class="back b1">
<div id="datepicker"></div>
</div>
</div>
</div>
</body>
