Check if date in field is more than x

Question

I would like to have a function that checks if a date in a field is more than 50 years in the past from todays date. If the date is more than 50 years in the past, a message should be shown, but there should not be any minimum date (maximum years).

I have a form where it is possible to add more fields dynamically (name + birthdate), and every new "form" should show this message under the birthday field if it is more than 50 years in the past.

The warning message under each birthdate field should be something like this (if over 50):

<div class="alert alert-warning">This person is over 50 year. Remember to do...</div>

My html setup:

<label for="id_nested-0-name">Name</label>
<input id="id_nested-0-name" maxlength="200" name="nested-0-name" type="text" />

<label for="id_nested-0-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-0-birthdate" name="nested-0-birthdate" type="date" />
<!-- If nested-0-birthdate is over 50, add html with warning message -->

<!-- New person -->
<label for="id_nested-1-name">Name</label>
<input id="id_nested-1-name" maxlength="200" name="nested-1-name" type="text" />

<label for="id_nested-1-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-1-birthdate" name="nested-1-birthdate" type="date" />
<!-- If nested-1-birthdate is over 50, add html with warning message -->

Edit:

This code works great in chrome, but does not work in safari. Anyone see what could be wrong?

<script type="text/javascript">
$(document).ready(function() {

            $(function(){
                $("#collapse1 input.dateinput").on("change.dp change keyup paste click propertychange",function (e){
                        var timediff1 = moment().diff(moment($(this).val()), 'years');
                        if (timediff1  >= 50 ) {
                            $('#alert1').remove();
                            $('#collapse1 .panel-body').append('<div id="alert1">Over 50!</div>');
                        } else {
                            $('#alert1').remove();
                        }
                });
            });

});             
</script>

Using http://eonasdan.github.io/bootstrap-datetimepicker/ for my date picker.

Edit 2:

I was missing data-format="DD/MM/YYYY" on my input. Now everything works!

It should not be any min date, just a "warning" if the person is over 50. — Tomas Jacobsen, Mar 07 '14 at 12:56
Can you filter the "year" information out of $('#id_nested-"+x+"-birthdate').val() ? — the_marcelo_r, Mar 07 '14 at 13:02
http://stackoverflow.com/questions/4060004/calculate-age-in-javascript - use the second answer to calculate their age, if it is >50 issue an alert! :) — Mark Walters, Mar 07 '14 at 13:04

setec · Accepted Answer · 2014-03-08T11:05:41.367

1

If you dont mind using moment.js

JSFiddle with demo

boolean isOldGeezer = moment().diff(moment($(this).val()), 'years') > 50;

edited Mar 08 '14 at 11:05

answered Mar 07 '14 at 13:40

setec

15,506
3
36
51

score 0 · Answer 2 · answered Mar 07 '14 at 13:20

Three part answer to this question

First you need to get the date 50 years ago. I am using a small hack here. You can find better techniques in StackOverflow.

ago50y = new Date();
ago50y.setFullYear(ago50y.getUTCFullYear()-50);

Second, compare that date when the input changes. The following code uses jQuery.

$('input.dateinput').change(function (event) {
    if ($(event.target).val() < ago50y.toJSON().slice(0,10)) {
        $('#alert').text('This person is over 50 year. Remember to do...');
    } else {
        $('#alert').text('');
    }
});

Third, invoke the second part whenever you add a new set of inputs. Put the above code in a function and include that in the callback while adding the new set.

http://jsfiddle.net/FA4hJ/

Check if date in field is more than x

Edit:

Edit 2:

2 Answers2