How to display calender in an input field

[walker1234Participant]

I am referring to the type of Edit popup window used in this example

So, basically, I have the following from the code:

`<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>First Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Last Name:</td>
<td align=”left”><input id=”lastName” /></td>
</tr>
<tr>
<td align=”right”>Product:</td>
<td align=”left”><input id=”product” /></td>
</tr>
<tr>
<td align=”right”>Quantity:</td>
<td align=”left”><div id=”quantity”></div></td>
</tr>
<tr>
<td align=”right”>Price:</td>
<td align=”left”><div id=”price”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>`

Say for example, I want to show a jQXCalender on the following input field of the popup window :

<input id="product" />

I was referring to the JSFiddle mentioned here.

[HristoParticipant]

Hello walker1234,

You just need to create <div> tag (instead of <input>) for the jqxCalendar and to set settings for it similarly as others widgets.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts