Question

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

当我选择日期时，它应该出现在`。

中

这里是Jsfiddle example

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

Answer 1

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 2

使用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>，这是一种少j的方式。

请参阅pointer events browser support @caniuse

Answer 3

日期选择器是jQuery UI Library的原生。

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

<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 4

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

CSS：

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

<强> Demo

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

4 个答案:

HTML

Jquery的