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.
Step 1: First we take four radio buttons and a TextBox in our Form.
<input id="rdonormal" type="radio" name="group1" value="Normal" />Normal
<br />
<input id="rdoshortdate" type="radio" name="group1" value="Short Date" />Short Date
<br />
<input id="rdolongdate" type="radio" name="group1" value="Long Date" /> Long date
<br />
<input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" />UTC Date/Time
<br />
<br />
<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()):
<input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />
JavaScript Function:
function Show() {
var a = new Date();
document.getElementById('txtdate').value = a.toLocaleString();
}
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()):
<input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date
JavaScript Function:
function ShowShortDate() {
var a = new Date();
document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
}
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()):
<input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date
JavaScript Function:
function ShowLongDate() {
var a = new Date();
document.getElementById('txtdate').value = a.toLocaleDateString();
}
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()):
<input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time
JavaScript Function:
function ShowUTCDateTime() {
var a = new Date();s
document.getElementById('txtdate').value = a.toUTCString();
}
Here ToUTCString() converts the date to a string, according to the Coordinated Universal Time (UTC).
Complete Program:
<head runat="server">
<script language="javascript" type="text/javascript">
function Show() {
var a = new Date();
document.getElementById('txtdate').value = a.toLocaleString();
}
function ShowShortDate() {
var a = new Date();
document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
}
function ShowLongDate() {
var a = new Date();
document.getElementById('txtdate').value = a.toLocaleDateString();
}
function ShowUTCDateTime() {
var a = new Date();
document.getElementById('txtdate').value = a.toUTCString();
}
</script>
<title></title>
<style type="text/css">
#rdonormal
{
width: 24px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />Normal
<br />
<input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date
<br />
<input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date
<br />
<input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time
<br />
<br />
<input type="text" id="txtdate" style=" text-align:center; width: 278px;" />
</div>
</form>
</body>