如何將日期選擇器帶入文本框

Question

日期選擇器和文本框如下所示

代碼如下：

<html:text name="facultyAchievementsForm" property="studentAchivementsDate" readonly="true" styleId="studentAchivements13"></html:text>
    <script language="JavaScript"> new tcal({ 
                                        'formname'    : 'facultyAchievementsForm', 
                                        'controlname' : 'studentAchivements13' 
                                           });
    </script>

我希望日期選擇器出現在文本框中，該怎么辦？

Answer 1

最簡單的解決方案：

使用日期選擇器和JQuery UI ：

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {    
            $(".datePicker").datepicker();
        });
    });
</script>
<input type="text" class="datePicker" />

Answer 2

我不完全知道代碼的HTML結果，但是根據您發布的圖像，似乎您在2個表列中有3個元素：

左側單元格中的標簽（日期：）右側單元格中的文本框和日歷圖標

HTML結果將是這樣的

<table>
<tr>
<td><label></label></td>
<td class="calendar"><input><img></td>
</tr>
</table>

您可以使用一些CSS將img標簽放置在文本框中。

您可以設置img標簽的絕對位置，並使用top ， left屬性。

這是一個例子：

 td { position:relative; } td.calendar input { width:200px; height:30px; } td.calendar img { position:absolute; z-index:99; left:174px; } 

 <table> <tr> <td><label>Date:</label></td> <td class="calendar"><input><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAWElEQVRYhe3SQQoAIAhE0bn/pW3VIqGCUEZpPrgS4S0E1D5zE72vC/CH0VMXYABs5g99r/sTpBYgKwH6AOhPKAAdkJUAfQD0JxSADshKgNKABZI41+iAvxpNfqDCtdHKkAAAAABJRU5ErkJggg=="/></td> </tr> </table>