Learning Learning - 18 days ago 6
Javascript Question

JQuery Calender for DOB to reflect changes when month, year or date is changed

I have to use a JQuery Calendar control for Date Of Birth field and by default change in Calendar are reflect only when user selects the date, while i have been asked to make changes to reflect when either user selects month, date or year in the calendar control

CodePen

<input name="txtdob" id="txtDOB" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">

$(document).ready(function () {
// $(function () {
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0"
});
// });
});


Is there any property which i can set so that when ever user select date, month or year then same changes should reflect in the
txtDOB
input fields
UPDATED:

I did it like this

$(function () {
$("#txtDOB").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0",
onChangeMonthYear: function (y, m, i) {
var d = i.selectedDay;
$(this).datepicker('setDate', new Date(y, m - 1, d));
}
});
});

Answer

How about this solution. Hope it helps!

Here's an updated codepen: http://codepen.io/HenryGranados/pen/ObWaXX

$(function() {
  var date = new Date();
  var currentDay = date.getDate();
  $("#txtdob").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "-90:+0",
    onChangeMonthYear: function(year, month, inst) {
        $(this).val(currentDay + "/"+month + "/" + year);
    }
  });
 });
.rg-txt{
  width:200px;
  margin:50px 200px;
}
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <input name="txtdob"  id="txtdob" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
</body>

</html>