Jquery datepicker validation mm/dd/yyyy

Question

I am trying to validate an input text box w/ a jquery calendar datepicker. The datepicker itself works well, but I am not sure how to validate that the input is in mm/dd/yyyy form. This is setup this way because the content is being loaded from another jsp.

here is the input.

<table class="style2" width="100%">
    <tr>
        <td width="291" valign="middle">
            <p>Date: <input type="text" class="followup_three_02" id="followup_three_02" maxlength="10" size="10" value="<%=session.getAttribute("followup_three_02")==null?"":session.getAttribute("followup_three_02")%>" />
        </td>
        <td width="246">            
        </td>
    </tr>
</table>

and the datepicker

function showContent(pos,direction){
    $("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 500,      
        function(){
            $("#area").load("3month_forms.jsp #area" + pos, function(){
                $("#area").show("slide", { direction: direction }, 500);
                if(pos==2){
                    $(function(){
                    var pickerOpts = {
                        showOn: "button",
                        buttonImage: "/images/calendar.png",
                        buttonImageOnly: true,
                        changeMonth: true,
                        changeYear: true,
                        yearRange: "-60:+0"
                    }; 
        $("#followup_three_02").datepicker(pickerOpts);
});

                }
            }); 
        }             
    );
}

and my validator that is not correct.

}else if(question_pos==2){
        if($('#followup_three_02').val() == ( Date.parse("4/8/2013") > Date.now())){
            alert("What is your baby's birthdate? ");
        return false;

You're comparing a string with a boolean, why not just compare the string to a string ? — adeneo
– adeneo, Commented Apr 12, 2013 at 19:04
I am not completely sure what that means, an example would help me understand. — user2089255
– user2089255, Commented Apr 12, 2013 at 19:05
@user2089255 ( Date.parse("4/8/2013") > Date.now()) returns true if the left part is greater than the right, otherwise it returns false. Therefore you are getting a boolean out of that comparison. — Jazzepi
– Jazzepi, Commented Apr 12, 2013 at 19:51

adeneo · Accepted Answer · 2013-04-12 20:00:58Z

1

This is a condition:

Date.parse("4/8/2013") > Date.now()

it returns true or false!

val() will always return a string, in this case probably a date as a string, like 5/5/2013, and comparing that to true or false, is always false.

if($('#followup_three_02').val() == ( Date.parse("4/8/2013") > Date.now())){
// if  string ^^^^^^^^^         equals       true or false ^^^^^^ == always false

Instead try:

var given_date   = Date.parse( $('#followup_three_02').val() ),
    compare_date = Date.parse("4/8/2013");

if ( given_date.getTime() > compare_date.getTime() ) { ... }

and since you're using jQuery datepicker:

var given_date   = $("#followup_three_02").datepicker('getDate'),
    compare_date = $.datepicker.parseDate('m/d/yy', '04/08/2013', {});

if ( given_date > compare_date ) { ... }

FIDDLE

edited Apr 12, 2013 at 20:00

answered Apr 12, 2013 at 19:07

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2089255 Over a year ago

I am getting an error ( TypeError: b.getMonth is not a function ) it is comming from the Jquery.js

adeneo Over a year ago

@user2089255 - If you're trying to just test for a certain date, you can compare strings, like this FIDDLE

user2089255 Over a year ago

I wish it were that simple, but i have to check the pattern basically.

adeneo Over a year ago

@user2089255 - I was a bit off on the datepicker methods, added a working FIDDLE

Santosh · Accepted Answer · 2013-04-12 19:21:05Z

Call this function. If the date is not in mm/dd/yyyy format it will return false.

function isDate(txtDate) {
        var currVal = txtDate;
        if (currVal === '') {
            return false;
        }

        //Declare Regex
        var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
        var dtArray = currVal.match(rxDatePattern); // is format OK?
        if (dtArray === null) {
            return false;
        }

        //Checks for mm/dd/yyyy format.
        dtMonth = dtArray[3];
        dtDay = dtArray[1];
        dtYear = dtArray[5];

        if (dtMonth < 1 || dtMonth > 12) {
            return false;
        }
        else if (dtDay < 1 || dtDay > 31) {
            return false;
        }
        else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) {
            return false;
        }
        else if (dtMonth == 2) {
            var isleap = (dtYear % 4 === 0 && (dtYear % 100 !== 0 || dtYear % 400 === 0));
            if (dtDay > 29 || (dtDay == 29 && !isleap)) {
                return false;
            }
        }
        else {
            return true;
        }
    }

Collectives™ on Stack Overflow

Jquery datepicker validation mm/dd/yyyy

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related