单击“显示日期”字段，然后单击“选择日期”隐藏日期字段

onclick show date field and on select date hide date field

本文关键字：日期 单击 字段 选择日期 隐藏 选择 显示 显示日期 然后      更新时间：2023-09-26

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

<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"的"change"时，应该会显示id="datepicker"的div。当我选择一个日期时，我应该再次被隐藏，$sdate变量应该取这个值。因此，id="display date"的span中的内容应该更改。

do:

<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

您想要签出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();
});
相关文章：