CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AziCode
AziCode

Reputation: 2692

Clickable div that shows a date picker

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>

Upvotes: 2

Views: 8191

Answers (4)

codefreaK
codefreaK

Reputation: 3662

Demo

HTML

<input type="text" id="datepicker" style="visibility:hidden">
<div class="date">
   <h4> Fri Nov 28 </h4>
</div>

Jquery

$(function() {
    $("#datepicker").datepicker();
});

$('#datepicker').on('change', function() {
    $('h4').html($('#datepicker').val());
});

$('.date').on('click', function() {
    $('#datepicker').datepicker("show");
});

Upvotes: 3

T J
T J

Reputation: 43156

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

Upvotes: 3

Gaurav Kalyan
Gaurav Kalyan

Reputation: 1897

To avoid the text field just use this CSS-trick i.e make its height and border 0/none:

CSS:

.date input{
    height:0px;
    border:none;  
}

Demo

Upvotes: 1

James Taylor
James Taylor

Reputation: 6258

The date picker is native to jQuery UI Library.

This can be easily done by specifying a text field:

<p>Date: <input type="text" id="datepicker"></p>

and then including the function which calls the datepicker() function on the object:

$(function() {
    $("#datepicker").datepicker();
});

Check out the complete example here.

Edit:

I just modified your JSFiddle to show a basic implementation. Note that the package jQuery UI 1.8.16 was included. The div element had to be changed to an input element because the datepicker() is a type of input. If you need to extract this date from the field later you can just get the value of the field.

Upvotes: 1

Related Questions