2

There is a field "DatePicker" from it I need to take the date and insert the age in the field "NumericTextBox "

Thanks

<div>
<sq8:DatePicker runat="server" ID="dateDatePicker">
   <ClientEvents OnDateSelected="get_current_age"></ClientEvents>
</sq8:DatePicker>

<sq:BindableControl runat="server" TargetControlID="dateDatePicker" DataField="Date"></sq:BindableControl>

</div>
<div class="sqf-col-xs-4 sqf-control-group-v">
<sq8:Label runat="server" Text="Age" ID="lblAge"></sq8:Label>

<sq8:NumericTextBox runat="server" ID="txtAge"></sq8:NumericTextBox>
</div>
  • 2
    you will have to parse the date into a javascript date object and then do a delta between Date.now - dateParsed (and then divide by milliseconds for a year) – DevZer0 Jan 16 '19 at 07:10
  • Related issue: https://stackoverflow.com/questions/9/how-do-i-calculate-someones-age-in-c. Just pass the value in code-behind and do age calculation as in linked post, then assign the result to the textbox. – Tetsuya Yamamoto Jan 16 '19 at 07:14
  • How to implement this using jQuery? – Michael Reed Jan 16 '19 at 08:13
  • @MichaelReed jQuery doesn't add anything more with Dates than is available through native JavaScript. So you can do as DevZer0 says. You could use jQuery to get the value from the date field but after that it's all down to using native dates. However JS dates can be a pain, especially to the un-initiated. Using another date library such as [MomentJS](http://momentjs.com) to help out may make your life simpler and let you keep more of your hair. It's easy to parse a date string into a momentJS object, and then diff that with today's date to get the age in years. – ADyson Jan 16 '19 at 09:28

1 Answers1

1

This can be achieved with the help of jQuery. See the example below.

Along with jQuery I am using moment.js. The reason for that is, when working with normal javascript date functions there are tons of issues in multi device / browser environment. To avoid that it is recommended to use a standard / well tested JS date library. More about Moment.JS

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
Your Age is: <span id="age">Pick a date</span> 
<script>
  $(document).ready(function() {
    $( "#datepicker" ).datepicker();
    
    $('#datepicker').change(function(){   
      var pickedDate = $(this).val();
      var a = moment(pickedDate,"MM/DD/YYYY");
      var b = moment(new Date());
      var c = b.diff(a,'years',true);
      $('#age').html(Math.floor(c) + ' year(s)');
    });
  } );
  </script>
</body>
</html>

I hope this helps.

Anjana Silva
  • 8,353
  • 4
  • 51
  • 54
  • Hello @Michael , if this answer fulfills your requirement would you mind marking as the accepted answer./ up vote please. Thank you. – Anjana Silva Jan 20 '19 at 07:51