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

Question

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

这是 Jsfiddle example

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

Answer 1

日期选择器是 jQuery UI 库的原生版本。

这可以通过指定文本字段轻松完成：

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

然后包括在对象上调用 datepicker() 函数的函数：

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

查看完整示例 here。

编辑：

我只是 modified your JSFiddle 展示一个基本的实现。请注意，包 jQuery UI 1.8.16 已包含在内。 div 元素必须更改为 input 元素，因为 datepicker() 是一种输入类型。如果您以后需要从该字段中提取此日期，您只需获取该字段的 value。

Answer 2

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");
});

Answer 3

要避免文本字段，只需使用这个 CSS 技巧，即将其高度和边框设置为 0/none:

CSS:

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

Demo

Answer 4

Using 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

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

Clickable div that shows a date picker

html

javascript

css

jquery

HTML

Jquery