How to validate when enter date in TextBox in asp.net using JQuery?

Question

This is my code

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id$=txtDate]").datepicker({});
            $("#txtDate").blur(function () {
                val = $(this).val();
                val1 = Date.parse(val);

                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("mm-dd-yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    </form>
</body>
</html>

In the above code i have a textbox when user click on textbox it opens datepicker and select date. if user enter date manually how to validate using jquery. Eg:- 01011 --> this time shows alert for invalid date Eg:- 01-01-2016

FDavidov · Accepted Answer · 2016-07-27 06:51:45Z

1

You may wish to change to type="date" which is specially provided for entering dates.

answered Jul 27, 2016 at 6:51

FDavidov

3,7556 gold badges27 silver badges72 bronze badges

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

1 Comment

FDavidov Over a year ago

By the way, using this type of input warrants that the entered value is always legal.

Lokesh_Ram · Accepted Answer · 2016-07-27 07:01:57Z

1

Try validating the date using regex,this below expression will accept all the possible 3 formats dd/mm/yyyy,dd-mm-yyyy or dd.mm.yyyy.

Jquery:

$("#txtDate").datepicker();
$("#txtDate").blur(function () {

var pattern = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;

var validateDate = pattern.test($(this).val());

if(validateDate)
{
 alert('Date is valid');
}
else
{
alert('Date is not valid');
}
)};

answered Jul 27, 2016 at 7:01

Lokesh_Ram

3915 silver badges10 bronze badges

5 Comments

durga siva kishore mopuru Over a year ago

Your logic working fine but when i click on textbox it open calender i select date it shows date is not valid then next second time select date it working fine

Lokesh_Ram Over a year ago

Can you edit your code snippet by giving absolute urls for jquery library and ui js because its causing issue while running the snippet.

durga siva kishore mopuru Over a year ago

Now check once again in my code i change the jquery urls

Lokesh_Ram Over a year ago

If you just want the user either enter date manually or choose from the datepicker means try changing the date format of the date picker like this $("#txtDate").datepicker({dateFormat: "dd-mm-yy"});..

Lokesh_Ram Over a year ago

And Stop using the blur function if you want to trigger something during the onselect of data picker means use like this $("#txtDate").datepicker({dateFormat: "dd-mm-yy",onSelect: function (dateText) { alert('Date') }});

durga siva kishore mopuru · Accepted Answer · 2016-07-28 07:42:58Z

This is the final code for datetime in asp.net using jquery

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link type="text/css" href="Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
     <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
     <script src="Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
  <%--  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />--%>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker({ dateFormat: "dd/mm/yy" });
            //Bind keyup/keydown to the input
            $("#txtDate").bind('keyup', 'keydown', function (e) {

                //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
                if (e.which !== 8) {

                    var length = $("#txtDate").val().length;
                    if (length == 2) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val("0" + $("#txtDate").val().substring(0, 1));
                        }
                        var date = $("#txtDate").val().substring(0, 2);
                        if (date > 31) {
                            $("#txtDate").val("");
                        }
                    }

                    else
                        if (length == 5) {
                            if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                                $("#txtDate").val($("#txtDate").val().substring(0,3)+ "0" + $("#txtDate").val().substring(3, 4));
                            }
                            var month = $("#txtDate").val().substring(3, 5);
                            if (month > 12) {
                                $("#txtDate").val($("#txtDate").val().substring(0, 2));
                            }
                        }
                    if (length > 6) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val($("#txtDate").val().substring(0, length-1));
                        }
                    }
                        
                            var numChars = $("#txtDate").val().length;

                            if (numChars === 2 || numChars === 5) {
                                var thisVal = $("#txtDate").val();
                                thisVal += '/';
                                $("#txtDate").val(thisVal);
                            }
                  
                }
            });
            $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
            $("#txtDate").blur(function () {
                
                val = $(this).val();
                val1 = Date.parse(val);
                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
      
        });
	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtDate" runat="server" MaxLength="10" type="date"></asp:TextBox>
    &nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
    </div>    
    </form>
</body>
</html>

Collectives™ on Stack Overflow

How to validate when enter date in TextBox in asp.net using JQuery?

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related