javascript - 显示日期选择器的可点击 div

Question

我想点击 <div> ，这将触发日期选择器。

当我选择一个日期时，它应该出现在`.

这是 Jsfiddle example

<div class="date">
   <h4> Fri Nov 28 </h4>
</div>

Answer 1

使用 jQuery UI datepicker - 您可以隐藏 <div> 后面的输入有pointer-events:none并手动更改 <div> 的文本选择日期时，如下图:

$("#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" />

---

这不是一个简洁的方法，但如果您必须使用 <div>，这是一种使用较少 js 的方法.

参见 pointer events browser support @caniuse