HTML field won't accept date from datepicker (combination of Progress-4GL)

[steffichong]

I wanted to use a datepicker in the birthday field. And when I choose a date, it will automatically show the age of the person. My problem here is that whenever I choose a date in the datepicker, the popup "Invalid Date" appears. But if I manually type the date, it works. Can you guys pls help me?

This is my JavaScript code with a little Progress 4GL:

<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal('show');
$("#bday").mask("99/99/9999");
$("#bday").datepicker();

<!-- $("#amt_cvr").maskMoney(); -->
});

function DeleteRecord(refid) {
var x = window.confirm("Are you sure you want to delete this record?")
if (x)
window.location="./pa_item_groupdtl.html?refid=" + refid + "&state=delete&pin=" + `get-value('pin')` + "&sl=" + `get-value('sl')` + "&lc=" + `get-value('lc')` + "&itemcd=" + `get-value('itemcd')`;
}

function getAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
if (age < 0 || isNaN(age)) {
alert("Invalid Date!");
$("#bday").val("");
age = 0;
}
$("#age").val(age);

}
</script>


This is my HTML code.

<div class="span3">
<label class="control-label" for="linedesc">Birthday<span class="required_field_note"> *</span></label>
<input name="bday" value="`get-value('bday')`" id="bday" type="text" placeholder="mm/dd/yyyy" onchange="getAge(this.value);">
</div>
<div class="span3">
<label class="control-label" for="linedesc">Age<span class="required_field_note"> *</span></label>
<input name="age" value="`get-value('age')`" id="age" type="text" readonly>
</div>

Continue reading...