Age calculate method is not working properly in dynamic fields

In this code, I have used jquery date picker. Me calculating age based on dob. when added dynamically age is not calculating. Please help me. Same age is displaying both fields

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> School Registration Form </title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript">


            var runBindings = function () {
                //Student date of birth


                $('.add_event').unbind('click');


                $('.addanother').click(function () {
                    if ($(this).text().indexOf('-') > -1) {
                        $(this).parent().remove();
                        return;
                    } else {
        //            var new_comm = $(this).closest('.details').clone(true).insertBefore($(this).parent());
                        var new_comm = $(this).closest('.details').clone(true).insertAfter($(this).parent());
                        if ($(new_comm).find('.class_event').length > 1) {
                            console.info('There are more than one.');
                            $(new_comm).find('.class_event').slice(1).remove();
                        }

                        $(new_comm).find('input,select').val('');
                        $(new_comm).find('.datepicker').attr('id', "datepicker" + Math.random() * 10000);
                        $(new_comm).find('.datepicker1').attr('id', "datepicker1" + Math.random() * 10000);
                        $(new_comm).find('.addanother').text('-');

                        bindDatePicker();
                        bindDatePicker1();
                    }
                });
                $('.add_event').click(function () {
                    if ($(this).text().indexOf('-') > -1) {
                        $(this).parent().remove();
                        return;
                    }
                    var new_comm = $(this).closest('.class_event').clone(true).insertBefore($(this).parent());
                    $(new_comm).find('input,select').val('');
                    $(new_comm).find('.datepicker').attr('id', "datepicker" + Math.random() * 10000);
                    $(this).text('-');
                    bindDatePicker();
                });

                bindDatePicker();
                bindDatePicker1();

            };


            var bindDatePicker = function () {
                $('.datepicker').datepicker('destroy');
                $('.datepicker').datepicker();
            };
            var bindDatePicker1 = function () {
                $('.datepicker1').datepicker('destroy');
                $(".datepicker1").removeData('datepicker');
                $('.datepicker1').datepicker({
                    onSelect: function (value, ui) {
                        var age = new Date(new Date - new Date(value)).getFullYear() - 1970;
                        $('.age').val(age);

                    },
                    yearRange: "-100:+0",
                    changeMonth: true,
                    changeYear: true});


            };

            $(document).ready(function () {

                runBindings();

            });


        </script>
    </head>
    <body>
        <pre id="result">
        </pre>
        <div class="details">
            <div> 
                <div>
                    Date Of Birth
                </div>
                <input type="text" class="datepicker1" id="parent_dob" name="parent_dob[]" />
                <label> Age
                    <input type="text" class="age" name="age" placeholder="Age" size="4" />
                </label>
                <div class='class_event'>
                    <select id="class_event_type" name="class_event_type"></select>
                    <input type='text' class="datepicker" name="class_event_date[]" placeholder="Event Date" />
                    <button  class="add_event" name="add_event">
                        +
                    </button>
                </div>

                <button class="addanother" name="addanother">                                                       
                    +
                </button>
            </div>
        </div>
    </body>
</html>

There’s an error here, need to create a new Date() with the parentheses ().

var age = new Date(new Date() - new Date(value)).getFullYear() - 1970;

The other problem is that you’re globally selecting $('.age'), you’re wanting to find the age within the closest .details block. in that callback this refers to the input with the datepicker that fired the event.

var $age = $(this).closest('.details').find('.age');
$age.val(age);

nope, parentheses are only necessary if you want to pass parameters.

2 Likes

It depends on how you want to use the Date object

Examples
Several ways to create a Date object

The following examples show several ways to create JavaScript dates:

var today = new Date();
var birthday = new Date('December 17, 1995 03:24:00');
var birthday = new Date('1995-12-17T03:24:00');
var birthday = new Date(1995, 11, 17);
var birthday = new Date(1995, 11, 17, 3, 24, 0);

Right you are, I’d still suggest always including them when calling a constructor function.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.