Wednesday, October 10, 2012

Add days to Input Date

Lets suppose we  have a html page with three text boxes.
In one text box user has to enter the date in MM/DD/YYYY . Once foucs is lost in first text field ,m then Seccond text field is populated as "Input date+ 14" .
Third text field should be populated as "Input date+ 15
Even date validation should happen for input date.

For ex:-   If input date entered is "01/01/1995" (MM/DD/YYYY)
Then second text field is populates as "01/15/1995" (MM/DD/YYYY)
Third text field populates as "01/29/1995" (MM/DD/YYYY).

Lets see the program how this is achieved. 

<%--
    Document   : adddate
    Adding days to input date
    Author     : murali
--%>
<html>
    <body>
        <script>
            function addDays(currDate,days)
            {
                var dateSplit = currDate.split("/");
                var dateInput = new Date( parseInt(dateSplit[2], 10),
                parseInt(dateSplit[0], 10)-1,
                parseInt(dateSplit[1], 10)
            );
                dateInput.setDate(dateInput.getDate() + days);
                var res = ("0" + (dateInput.getMonth() + 1)).slice(-2) + "/" + ("0" + dateInput.getDate()).slice(-2) + "/" + dateInput.getFullYear() ;
                return res;
            }

            function check_date(refillOrderDate)
            {
                var datePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
                if (!datePattern.test(refillOrderDate))
                {
                    return false;
                }
                var dateSplit = refillOrderDate.split("/");
                var day = dateSplit[1] ;
                var month =dateSplit[0];
                var year =dateSplit[2];
                if(month>12 || day>31)
                {
                    return false;
                }

                var leap = 0;
                if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0))
                {
                    leap = 1;
                }

                if ((month == 2) && (leap == 1) && (day > 29))
                { return false; }

                if ((month == 2) && (leap != 1) && (day > 28))
                { return false ; }

                if((day > 30) && ((month == "04") || (month == "06") || (month == "09")
                    || (month =="11")))
                { return false; }

                return true;

            }

            function updateDeliveryDate()
            {
                var err=0;
                var orderDate= document.activityForm.orderDate.value;
                if (orderDate.length==0)
                {
                    document.activityForm.orderDate.value='';
                    document.activityForm.startPlaceDate.value='';
                    document.activityForm.endPlaceDate.value='';
                    return true;
                }

                if(orderDate.length==10)
                {
                    if(check_date(orderDate))
                    {
                        document.activityForm.startPlaceDate.value = addDays(orderDate,14);
                        document.activityForm.endPlaceDate.value = addDays(orderDate,28);
                        return true;
                    }
                    else
                    {
                        err=1;
                    }
                }
                else
                {
                    err=1;
                }
                if (err==1)
                {
                    alert("Invalid date format. Date format should be mm/dd/yyyy");
                    document.activityForm.orderDate.value='';
                    document.activityForm.startPlaceDate.value='';
                    document.activityForm.endPlaceDate.value='';
                    document.activityForm.orderDate.focus();
                    return false ;
                }

                return true;
            }
        </script>
    </head>
<body>
    <form name="activityForm" >
        If you order your product On &nbsp;&nbsp;<input type="text" name="orderDate" onblur="updateDeliveryDate()"/> <font color="red">  [(MM/DD/YYYY) Format]</font>
        <br><br>
        You will get your order between  &nbsp;&nbsp;<input type="text" name="startPlaceDate" readonly/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="endPlaceDate" readonly/>
    </form>

</body>
</html>

SAMPLE OUTPUT

If you order your product On    [(MM/DD/YYYY) Format]

You will get your order between          and           

No comments:

Post a Comment