Search This Blog

Friday, 16 October 2015

How to add months to a date in JavaScript? Or Want to add 1 year into my textbox value using JavaScript?



Step 1:- JavaScript Code

    <script>
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                todayHighlight: true
            });
        });

        $(function () {
            $("#txtPurchaseDate").change(function () {

                var jPurchaseDate = $("#txtPurchaseDate").val();

                var jExpiryDate;

                // Split the Purchase Date
                jPurchaseDate = jPurchaseDate.split('/');

                // After splitting, Arrange the mm/dd/yyyy format
                jPurchaseDate = jPurchaseDate[1] + '/' + jPurchaseDate[0] + '/' + jPurchaseDate[2]; //mm/dd/yyyy

                // After arranging Purchase Date in mm/dd/yyyy format, convert to date format
                jPurchaseDate = new Date(jPurchaseDate);

                // Adding 12 months in date
                jExpiryDate = jPurchaseDate.setMonth(jPurchaseDate.getMonth() + 12);

                // After adding 12 months in date, convert to date format
                jExpiryDate = new Date(jExpiryDate);

                // Subtracting day 1 from date
                jExpiryDate = jExpiryDate.setDate(jExpiryDate.getDate() - 1);

                // After Subtracting day 1 from date, convert to date format
                jExpiryDate = new Date(jExpiryDate);

                var dd = jExpiryDate.getDate();
                var mm = jExpiryDate.getMonth() + 1; //January is 0!
                var yyyy = jExpiryDate.getFullYear();

                if (dd < 10) {
                    dd = '0' + dd;
                }
                if (mm < 10) {
                    mm = '0' + mm;
                }

                jExpiryDate = dd + '/' + mm + '/' + yyyy;//dd/mm/yyyy

                $("#txtExpiryDate").val(jExpiryDate);
            });
        });
    </script>

Step 2:- Design Page

     <table>
                <tr>
                    <td>Purchase Date</td>
                    <td>
                        <asp:TextBox ID="txtPurchaseDate" CssClass="datepicker" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date</td>
                    <td>
                        <asp:TextBox ID="txtExpiryDate" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </td>
                </tr>
            </table>

Step 3:- Complete Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to add months to a date in JavaScript?</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                todayHighlight: true
            });
        });

        $(function () {
            $("#txtPurchaseDate").change(function () {

                var jPurchaseDate = $("#txtPurchaseDate").val();

                var jExpiryDate;

                // Split the Purchase Date
                jPurchaseDate = jPurchaseDate.split('/');

                // After splitting, Arrange the mm/dd/yyyy format
                jPurchaseDate = jPurchaseDate[1] + '/' + jPurchaseDate[0] + '/' + jPurchaseDate[2]; //mm/dd/yyyy

                // After arranging Purchase Date in mm/dd/yyyy format, convert to date format
                jPurchaseDate = new Date(jPurchaseDate);

                // Adding 12 months in date
                jExpiryDate = jPurchaseDate.setMonth(jPurchaseDate.getMonth() + 12);

                // After adding 12 months in date, convert to date format
                jExpiryDate = new Date(jExpiryDate);

                // Subtracting day 1 from date
                jExpiryDate = jExpiryDate.setDate(jExpiryDate.getDate() - 1);

                // After Subtracting day 1 from date, convert to date format
                jExpiryDate = new Date(jExpiryDate);

                var dd = jExpiryDate.getDate();
                var mm = jExpiryDate.getMonth() + 1; //January is 0!
                var yyyy = jExpiryDate.getFullYear();

                if (dd < 10) {
                    dd = '0' + dd;
                }
                if (mm < 10) {
                    mm = '0' + mm;
                }

                jExpiryDate = dd + '/' + mm + '/' + yyyy;//dd/mm/yyyy

                $("#txtExpiryDate").val(jExpiryDate);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Purchase Date</td>
                    <td>
                        <asp:TextBox ID="txtPurchaseDate" CssClass="datepicker" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date</td>
                    <td>
                        <asp:TextBox ID="txtExpiryDate" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Step 4:- Output


Posted by at 1 comment:
Labels: , ,

Thursday, 8 October 2015

Pan Card Validation Using Javascript

Step 1:- JavaScript Code

<script type="text/javascript">

        function UpperCase(ctrlID) {
            var PANNo = document.getElementById(ctrlID).value;
            if (PANNo != "") {
                document.getElementById(ctrlID).value = PANNo.toUpperCase();
            }
        }

        function ValidatePAN(ctrlID) {
            var PANNo = document.getElementById(ctrlID).value;
            if (PANNo.value != "") {
                var ObjVal = PANNo;
                var panPattern = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;
                var matchArray = ObjVal.match(panPattern);

                if (matchArray == null) {
                    alert('Invalid PAN Card No.');
                    return false;
                }

                return true;
            }
        }

    </script>

Step 2:- Design Page

            <table style="border: 1px; width: 500px;">
                <tr>
                    <td style="width: 200px;">
                        <label for="panno">PAN No:</label>

                    </td>
                    <td style="width: 200px;">
                        <asp:TextBox ID="panno" runat="server" placeholder="Enter PAN No" ClientIDMode="Static" onkeypress="UpperCase('panno');" onkeyup="UpperCase('panno');" onchange="return ValidatePAN('panno')"></asp:TextBox>
                    </td>
                </tr>
            </table>

Step 3:- Complete Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Validate PAN Card Number</title>
   
    <script type="text/javascript">

        function UpperCase(ctrlID) {
            var PANNo = document.getElementById(ctrlID).value;
            if (PANNo != "") {
                document.getElementById(ctrlID).value = PANNo.toUpperCase();
            }
        }

        function ValidatePAN(ctrlID) {
            var PANNo = document.getElementById(ctrlID).value;
            if (PANNo.value != "") {
                var ObjVal = PANNo;
                var panPattern = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;
                var matchArray = ObjVal.match(panPattern);

                if (matchArray == null) {
                    alert('Invalid PAN Card No.');
                    return false;
                }

                return true;
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table style="border: 1px; width: 500px;">
                <tr>
                    <td style="width: 200px;">
                        <label for="panno">PAN No:</label>

                    </td>
                    <td style="width: 200px;">
                        <asp:TextBox ID="panno" runat="server" placeholder="Enter PAN No" ClientIDMode="Static" onkeypress="UpperCase('panno');" onkeyup="UpperCase('panno');" onchange="return ValidatePAN('panno')"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>


Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)