- I am having a textbox with an input type as DATE, Date of Promotion and a dropdown box with the label name DNI. A hidden textbox with an ID pf have to be assigned with the selected date. But, the date textbox is taking the system date format.
a) How can it be fixed to dd-mm-yyyy format irrespective of the system date format ? b) Another hidden textbox will be appear on selection of the drop down box with a specific date. It should be toggle between 01-07-2023 (dd-mm-yyyy) or 01-01-2023 (dd-mm-yyyy) basing on the selection of the dropdown box. But here, I am getting the month and year correctly and date is as in the pf. How can I get the date as "01st"?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Date of Promotion</td><td><input class="form-control" type="date" name="dop" id="dop" autocomplete="off" /></td>
</tr>
<tr>
<td>DNI</td><td><select class="form-control" name="dni" id="dni" autocomplete="off">
<option value="0">Select</option>
<option value="1">01st January</option>
<option value="2">01st July</option>
</select></td>
</tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td>
Pay from <input type="text" id="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/>
Revised Pay from <input type="text" id="nid" style="width:100px; border:0; font-weight:bold; color:red;" readonly/>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#dni').on('click', function() {
$('#pf').val($('#dop').val());
if ( this.value == '1')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 8));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
else if ( this.value == '2')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 2));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
});
});
</script>
</body>
</html>
