Introduction

Here we create a simple example of DynamicPopulate. In this example when we select the particular date format, the TextBox will show the result on the basis of the current Date.
DynaJava.gif
Step 1: First we take four radio buttons and a TextBox in our Form.
  1. <input id="rdonormal" type="radio" name="group1" value="Normal" />Normal
  2. <br />
  3. <input id="rdoshortdate" type="radio" name="group1" value="Short Date" />Short Date
  4. <br />
  5. <input id="rdolongdate" type="radio" name="group1" value="Long Date" /> Long date
  6. <br />
  7. <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" />UTC Date/Time
  8. <br />
  9. <br />
  10. <input type="text" id="txtdate" style=" text-align:center; width: 278px;" />
Note: Here name is used to tell the group name. When we select one button, the other button of the other groups are unselected.
Step 2: Now we write JavaScript Functions:
(a): Here we write the code for the first radio button (rdonormal); when we click on it, it shows the date according to the js function(Show()):
  1. <input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />
JavaScript Function
  1. function Show() {
  2. var a = new Date();
  3. document.getElementById('txtdate').value = a.toLocaleString();
  5. }
Here the toLocaleString() method is used to convert the date to a string according to the Locale.
(b) ): Here we write the code for the first radio button (rdoshortdate); when we click on it, it shows the date according to the js function(ShowShortDate()):
  1. <input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date
JavaScript Function
  1. function ShowShortDate() {
  2. var a = new Date();
  3. document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
  5. }
Here we use the getDate(), getMonth() and getYear() functions to get the current Date, Month and Year.
(c) ): Here we write the code for the first radio button (rdolongdate); when we click on it, it shows the date according to the js function(ShowLongDate()):
  1. <input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date
JavaScript Function
  1. function ShowLongDate() {
  2. var a = new Date();
  3. document.getElementById('txtdate').value = a.toLocaleDateString();
  5. }
Here the tolocaleDateString() method returns the date portion as a string as per the Locale.
(d) ): Here we write the code for the first radio button (rdoutcdatetime); when we click on it, it shows the Date according to the js function(ShowUTCDateTime()):
  1. <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time
JavaScript Function
  1. function ShowUTCDateTime() {
  2. var a = new Date();s
  3. document.getElementById('txtdate').value = a.toUTCString();
  4. }
Here ToUTCString() converts the date to a string, according to the Coordinated Universal Time (UTC).
Complete Program
  1. <head runat="server">
  2. <script language="javascript" type="text/javascript">
  3. function Show() {
  4. var a = new Date();
  5. document.getElementById('txtdate').value = a.toLocaleString();
  6. }
  7. function ShowShortDate() {
  8. var a = new Date();
  9. document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
  11. }
  12. function ShowLongDate() {
  13. var a = new Date();
  14. document.getElementById('txtdate').value = a.toLocaleDateString();
  15. }
  16. function ShowUTCDateTime() {
  17. var a = new Date();
  18. document.getElementById('txtdate').value = a.toUTCString();
  19. }
  20. </script>
  21. <title></title>
  22. <style type="text/css">
  23. #rdonormal
  24. {
  25. width: 24px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <form id="form1" runat="server">
  31. <div>
  32. <input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />Normal
  33. <br />
  34. <input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date
  35. <br />
  36. <input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date
  37. <br />
  38. <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time
  39. <br />
  40. <br />
  41. <input type="text" id="txtdate" style=" text-align:center; width: 278px;" />
  43. </div>
  44. </form>
  45. </body>