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

Question

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

<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

做：

<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

Answer 2

您想查看 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();
});