Question

有一个日期显示为纯文本。当我点击更改按钮时，datepicker应该出现在下面，当我选择一些日期时，应该隐藏日期选择器。并且应该更改平面文本中的日期。

<span id="display-date"> <?php  echo $sdate; ?></span>
<span id="d1" onClick="showdate()"> change </span>
<div  id="datepicker"></div>  

 <script>
  $(function() {
  $( "#datepicker" ).datepicker();
  });
 </script>

这就是我所拥有的一切。最初（在页面加载时），应隐藏具有id =“datepicker”的div。当我点击带有id =“d1”的“更改”时，应显示带有id =“datepicker”的div。当我选择一个日期时，我应该再次隐藏，$ sdate变量应该取该值。因此，应更改带有id =“display-date”的span中的内容。

Answer 1

您想要查看jQuery datepicker：http://jqueryui.com/datepicker/

以下是一个示例：http://jsfiddle.net/h7wau/

HTML：

<input type="text" id="datepicker" value="2013-08-11" />

JS：

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

Answer 2

做的：

<span id="display-date"> <?php  echo $sdate; ?></span>
<span id="d1"> change </span>
<div  id="datepicker" style="display:none;"></div>

和js

$( "#datepicker" ).datepicker({
    onSelect: function(dateStr, dateObj) {
        $("#display-date").html(dateStr);
        $("#datepicker").hide();
    }
});
$("span#d1").click(function() {
    $("#datepicker").show();
});

演示:: jsFiddle

onclick显示日期字段和选择日期隐藏日期字段

2 个答案: