有一个日期显示为纯文本。当我单击"更改"按钮时,日期选择器应显示在下面,当我选择某个日期时,该日期选择器应隐藏。并且应当改变平面文本中的日期。
<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();
});