asked on

Date on a table

Hi experts, I wish to put some datepicker inside the Child(2) table as the code shown below. Is there anyone who can help achieve this?

<!Doctype Html>
<Html>
<body>
<form name="EnrollForm" method="post" action="Enroll.asp">
<table id="EnrollTable" class="four">
<tr>
<td>  Date:</td>
<td><input type="date" id="sdate"/></td>
</tr>
</Table>

</form>
</body>
</Html>

SOLUTION

Big Monty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Whing Dela Cruz

ASKER

I want the date to be resided inside the <td> with the id="sdate" as the code shown above. I want the client to choose the Month, Day and Year within that input date. I do not know how possible is this that the datepicker will reside in a table.. Thank you!

Leonidas Dosas

First you must inlcude in your document the latest JQuery UI in the head section.

<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>

Open in new window

Then in a script mode ath the end of your body:

<body>
<!-- Start your code here -->

 <form name="EnrollForm" method="post" action="Enroll.asp">
       <table id="EnrollTable" class="four">
                  <tr>
                     <td>&nbsp; Date:</td>
                     <td><input type="text" id="sdate"/></td>
                  </tr>
       </table>
    
   </form>
<script>
   $('#sdate').datepicker({});
    
  </script>  
<!-- End your code here -->
</body>
</html>

Open in new window

Big Monty

what happens with your code? do you not see the datepicker? When I try it from here, it works fine.

Leonidas - why reinvent the wheel with jquery when you can just use the HTML5 date input type?

Leonidas Dosas

Whing asked for Datepicker insert option.So I must answer at this issue. As i saw his code his has already put date attr in input element, so I thought that he wants something different.

Whing Dela Cruz

ASKER

Hi Monty, the given code is not running on my browser since I am using Firefox. I also tried Leonidas Solution but it didn't work also. Here's how I implement the code suggested by Leonidas.

<!Doctype Html>
<Html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="crossorigin="anonymous"></script>
</head>

<body>
<form name="EnrollForm" method="post" action="Enroll.asp">
<table id="EnrollTable" class="four">
<tr>
<td>  Date:</td>
<td><input type="text" id="sdate"/></td>
</tr>
</Table>

</form>

<script>
$('#sdate').datepicker({});
</script>
</body>
</Html>

Leonidas Dosas

Do you have errors in your console? I tested in liveweave and works for me

Big Monty

looks like you need an additional JS reference / script for it to work, try this code out:

<body>
  <script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
  <script>
    webshims.setOptions('forms-ext', {types: 'date'});
    webshims.polyfill('forms forms-ext');
	</script>
   <form name="EnrollForm" method="post" action="Enroll.asp">
       <table id="EnrollTable" class="four">
                  <tr>
                     <td>&nbsp; Date:</td>
                     <td><input type="date" id="sdate"/></td>
                  </tr>
       </Table>
    
   </form>
</body>

Open in new window

https://jsfiddle.net/bigmonty/wqaw1L57/1/

Whing Dela Cruz

ASKER

I will just try it again, but it seems not working and no error appeared..

Whing Dela Cruz

ASKER

Hi Monty, I will try it now..

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.