Arun Sudhakaran Arun Sudhakaran - 11 months ago 75
HTML Question

How can I bring a date picker inside a textbox

The date picker and text box looks like this

enter image description here

The code is given below :

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

I want the date picker to come inside of the textbox, what should I do?

Answer Source

I don't know exactly the HTML result of your code, but based on the image you posted, it seems that you have 3 elements inside 2 table columns :

A label (Date:) inside the left cell A textbox and an icon of a calendar inside the right cell

The HTML result will be something like this

<td class="calendar"><input><img></td>

You can use some CSS to place the img tag inside the textbox.

You can set the img tag position absolute and you use top, left properties.

Here is an example :

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