jQuery检查日期选择器的年份

Question

i'm using the datepicker from jqueryui in a form. Now i want to validate the year of birth. This means that my user can't put in a year that is higher than 1998 (he/she must be 18 years old). How can i check if the value isn't higher than 1998? This is what i've so far.

<input type="text" id="birthyear" required><br />

$(function(){
    $('#birthyear').datepicker({
        minDate: new Date(1900,1-1,1),
        defaultDate: new Date(1991,1-1,1),
        changeYear: true,
        yearRange: '-110:-18'
    });
});

Answer 1

You can get the Date object from the datepicker using getDate:

var date = $("#birthyear").datepicker("getDate");

From there you can get the year:

var year = date.getFullYear();

If you want to make sure the user is at least 18 years old, you might want to check more than just the year: you'll also want to make sure today's date is after their 18th birthday.

Answer 2

There's a few ways I can see to achieve this

1. Set a max cut-off date to prevent anyone from even selecting a date past your determined

    $('#birthyear').datepicker({ minDate: new Date(1900,1-1,1), defaultDate: new Date(1991,1-1,1), changeYear: true, yearRange: '-110:-18', maxDate: new Date(1997, 11, 31) }); 

2. Bind a validation function to the onChangeMonthYear event on initialisation

    $('#birthyear').datepicker({ minDate: new Date(1900,1-1,1), defaultDate: new Date(1991,1-1,1), changeYear: true, yearRange: '-110:-18', onChangeMonthYear: function(year) { if (year > 1998) ; // alert user of error } }); 

3. A little trickier, but if you've got some client-side validation function already, you can get the Date object like this:

    $('#birthyear').datepicker('getDate').getFullYear() 

Hope that helps

Answer 3

I see some of the other answers are showing you how to confirm the year but years pass by. I had a similar requirement for a project that required the users age to be verified and rather than hard coding a year, and though you are requesting to check the year(but with the age requirements in parentheses) I would suggest a more dynamic and maintainable solution as provided below.

    //Initialize datepicker
         $(function() {
                $( "#dob" ).datepicker({
                    changeMonth: true,//allow month select
                    changeYear: true,//allow year select
                    yearRange: "-100:+0",//set range of year select
                    dateFormat: 'MM dd, yy',//set format of "displayed element"
                    altField: "#hidden-dob",//set alt field "hidden element"
                    altFormat: "yy/mm/dd",//set format for hidden element
                    onClose: function() {
                        $('#hidden-age').val(getUserAge($('#hidden-dob').val()));
                    }
                });
            });
    //year/month/day

//Pass the date to retrieve the users age FORMAT <yy/mm/dd> "The function that you need"
            function getUserAge(dateString) {
                var today = new Date();
                var dob = new Date(dateString);
                var age = today.getFullYear() - dob.getFullYear();
                var month = today.getMonth() - dob.getMonth();
                if (month < 0 || (month === 0 && today.getDate() < dob.getDate())) {
                    age--;
                }
                return age;
            }