ASP.net Format Textbox so date format only allows 8 numbers & 2 slashes

Enflow
Enflow used Ask the Experts™
on
ASP.net  TextBox Mode Property set to Date... TextMode="Date" Allows user to pick a date from a built in Date picker or TYPE A DATE into the textbox mm/dd/yyyy  (works great if the user types in a correct date format for year

Try out typing in 555555 or similar number of year !  www.enflow.com/CC/P1/EE.aspx

But the user can type in a year of 555555 or similar which will cause a SQL insert Truncate error on submit...

How do i format this TextMode property to ONLY allow 8 numbers (Two slashes are default) on page load attribute setting ???

thanks.. CJ

<%@ Page Language="VB" AutoEventWireup="false" Debug="true" MaintainScrollPositionOnPostback="true" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web.UI.Page" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.data.OleDb" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Register Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    Public Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Page.EnableViewState = false
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
    <title>CC Housing Assistance Application: Part One</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en" />
    <meta name="robots" content="noindex, nofollow" />
    <!-- <link rel="StyleSheet" href="/authority.css" media="all" />-->
    <style type="text/css">
        .container {
            width: 440px;
            margin: auto;
            border: 10px solid #003366;
            background-color: #FFFFFF;
        }

        .inner {
            width: 400px;
            margin: auto;
        }

        .divTable {
            display: table;
            width: 100%
        }

        .divTableRow {
            display: table-row;
            width: 100%
        }

        .divTableCell_100Pct {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            line-height: 35px;
            width: 100%;
            height: 35px;
        }

        .p {
            display: block;
            margin-left: 0;
            margin-right: 0;
            text-align: left;
            width: 100%;
            font-size: large;
        } 
        
        .focus {
          border: 2px solid red!important;
          background-color: #FEFED5!important;
       }

    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

        //On Focus Change Textbox color - remove On Blur
        $(document).ready(function () {
            $('INPUT[type="text"]').focus(function () {
                $(this).addClass("focus");
            });

            $('INPUT[type="text"]').blur(function () {
                $(this).removeClass("focus");
            });
        });

    </script>
</head>
<body bgcolor="#F2F2F2">
  <div class="container">
        <form id="frmPartOne" runat="server">
            <div class="divTable">
                <div class="divTableRow">
				<div class="TC_12P">Birthdate:*</div>
                <div class="TC_38P">
                <asp:TextBox ID="BirthDate_1" runat="server" Height="25px" style="text-align: center" Width="340px" Wrap="False" BackColor="#EAF4FF" Font-Size="Large" TextMode="Date" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" ToolTip="Enter Your Birth Date Here - Format = 1/10/1999 or 10/15/2001 etc." TabIndex="13" MaxLength="10"></asp:TextBox>
                </div>
               </div>
           </div>
       </form>
    </div>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
Use this plugin : https://igorescobar.github.io/jQuery-Mask-Plugin/

$('.mydate-class').mask('00/00/0000');

you can also use the  HTML5 date input :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Commented:
Any solution will work, such as stated above (I assign jQuery Datepicker to the textbox).
Please note, since it's still a textbox, using mouse clicks will have to results you want, but for the hardcore typist, please know that any input is allowed, so it's YOUR job to handle the string/date validation and correct user interaction in any the following code.

Author

Commented:
@leakim971...

If i put in the ASP.net text box attributes the following:  type="date" value="yyyy-MM-dd" min="1901-01-01"
max="2040-01-01"

then this will work by not allowing more than 4 chars in the yyyy spot... but this is a lot of attbutes --- Is  there a way to  make a CSS style class out of these and add to textbox as a class ?
leakim971Multitechnician
Top Expert 2014

Commented:
but this is a lot of attbutes

I'm pretty sure CSS will add more...
Use:
<asp:RegularExpressionValidator
         id="RegularExpressionValidator1" 
        ControlToValidate="BirthDate_1" 
        ValidationExpression="\d{4}[-]\d{2}[-]\d{2}" 
        Display="Static" 
        ErrorMessage="invalid date format is yyyy-mm-dd" 
         EnableClientScript="False" runat="server"/>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial