How To Create Date Selector Using Javascript and PHP: 2018

How To Create Date Selector Using Javascript and PHP

Select Date:

Sample Code: Date Selector

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date Selector</title>
<body>

<table width="30%" align="left">
<tr><td>Select Date:</td></tr>
<tr><td>
<select id="cday" onchange="SelectDate()" style="font-size:8pt;">
<option value="0">dd</option>
<?php
for($i = 1; $i <= 31; ++$i)
if($i < 10)
echo "<option value='$i'>0$i</option>";
else
echo "<option value='$i'>$i</option>";
?>
</select>

<select id="cmonth" onchange="SelectDate()" style="font-size:8pt;">
<option value="0">mm</option>
<?php
for($i = 1; $i <= 12; ++$i)
if($i < 10)
echo "<option value='$i'>0$i</option>";
else
echo "<option value='$i'>$i</option>";
?>
</select>

<select id="cyear" onchange="SelectDate()" style="font-size:8pt;">
<option value="0">yyyy</option>
<?php
for($i = 2011; $i <= 2025; ++$i)
echo "<option value='$i'>$i</option>";
?>
</select>
</td></tr>
<tr><td><input type="text" id="date" name="date" value="" maxlength="10" style="font-size:10pt; width: 100px;"></td></tr>
</table>

<script>
var d = new Date();
document.getElementById("cday").selectedIndex = d.getDate();
document.getElementById("cmonth").selectedIndex = d.getMonth()+1;
document.getElementById("cyear").selectedIndex = d.getFullYear()-2010;
SelectDate();

function SelectDate()
{
d = document.getElementById("cday");
cday = d.options[d.selectedIndex].text;
if(cday == "dd") return null;
m = document.getElementById("cmonth");
cmonth = m.options[m.selectedIndex].text;
if(cmonth == "mm") return null;
y = document.getElementById("cyear");
cyear = y.options[y.selectedIndex].text;
if(cyear == "yyyy") return null;
document.getElementById("date").value = cday+"-"+cmonth+"-"+cyear;
}
</script>
</body>
</html>

Friday, June 22, 2018

How To Create Date Selector Using Javascript and PHP

Sample Code: Date Selector