I would like to click on the <div>, and this would trigger a date picker.
When I choose a date , it should appear inside the `.
here is the Jsfiddle example
<div class=date>
<h4> Fri Nov 28 </h4>
</div>
Using jQuery UI datepicker - You can hide an input behind the <div> having pointer-events:none and manually change the text of <div> when date is selected, as shown below:
$(#date).datepicker({
onSelect: function(date) {
$(.date).find(h4).text(date);
}
});* {
margin: 0;
padding: 0;
}
.date {
width: 49.5%;
height: 50px;
line-height: 50px;
float: left;
color: white;
text-align: center;
background-color: #f91d04;
-moz-box-shadow: 0px 0px 7px #777777;
-webkit-box-shadow: -5px 0px 7px #777777;
box-shadow: 0px 0px 7px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
pointer-events: none;
}
input {
position: absolute;
left: 0;
width: 49.5%;
height: 50px;
z-index: -1;
border: none;
outline: none;
}<link href=http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css rel=stylesheet />
<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<script src=http://code.jquery.com/ui/1.9.2/jquery-ui.js></script>
<div class=date>
<h4> Choose Date </h4>
</div>
<input type=text id=date />Not a neat way, but it's a way with less js if you must use <div>.
See pointer events browser support @caniuse
