2

I am building my first ASP.NET web application for my company (having never developed anything before in C# or ASP.NET), so I apologize if I am asking something silly -- I searched but was not able to find anything of relevance, but that's likely because I didn't know what to search for honestly.

Anywho: I am trying to develop a "Birthday" field, where the "/" in "mm/dd/yyyy" remain fixed/static in the field as the user types.

The way I have my code right now, it gets overwritten when the user starts entering any information.

 Birth Date:
                <asp:TextBox runat="server" ID="birthday" Text='mm/dd/yyyy'/>
                <asp:CompareValidator runat="server" ID="CompareValidator_birthday" Type="Date" Operator="DataTypeCheck" ControlToValidate="birthday" Text="Invalid Date" Display="Dynamic" Font-Bold="true" ForeColor="red" />
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator_birthday" ControlToValidate="birthday" Text="Required" Display="Dynamic" Font-Bold="true" ForeColor="red"/>

I really don't want to use a JQuery datepicker or anything like that; our users are very diverse and some might find using that difficult. I'm trying to make it as simple as possible for them:

A date field that holds the "/" in place while the user types, and preloads with "mm/dd/yyyy" as I've already done. I do not know what the proper term for such a situation would be.

Thank you!

Kudin
  • 81
  • 1
  • 10
  • 3
    Look for a "masked text box" control. There's nothing built-in to the framework. – D Stanley Apr 06 '16 at 16:57
  • If it were me, I wouldn't be looking for an ASP.NET solution, but rather for an HTML/Javascript solution. What you want is client-side anyways. I'd probably start with an onKeyDown listener on the textbox that has logic to insert the / at the appropriate time, forbid non-numeric characters, etc. – TheRotag Apr 06 '16 at 17:40
  • 1
    Not exactly answering your question but Patrick McElhaney made a nice suggestion: three dropdown lists (http://stackoverflow.com/questions/339956/whats-the-best-ui-for-entering-date-of-birth). – ConnorsFan Apr 06 '16 at 22:22

1 Answers1

1

D Stanley's suggestion of a MaskedEditExtender is exactly what I was asking for.

HOWEVER: ConnorsFan's solution is ultimately what I chose for this particular situation of "Date of Birth".

I've actually incorporated both suggestions in different places in my project, so here is how I did both:

This is what I have, followed by the code running it (with validators and all) enter image description here

<div class="col-xs-6 text-right">
                        <b>Date of Birth:</b><br>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="DropDownList_bday_month" runat="server" class="form-control" style="max-width:125px">
                            <asp:ListItem Value="">Month</asp:ListItem>
                            <asp:ListItem Value="1">January</asp:ListItem>
                            <asp:ListItem Value="2">February</asp:ListItem>
                            <asp:ListItem Value="3">March</asp:ListItem>
                            <asp:ListItem Value="4">April</asp:ListItem>
                            <asp:ListItem Value="5">May</asp:ListItem>
                            <asp:ListItem Value="6">June</asp:ListItem>
                            <asp:ListItem Value="7">July</asp:ListItem>
                            <asp:ListItem Value="8">August</asp:ListItem>
                            <asp:ListItem Value="9">September</asp:ListItem>
                            <asp:ListItem Value="10">October</asp:ListItem>
                            <asp:ListItem Value="11">November</asp:ListItem>
                            <asp:ListItem Value="12">December</asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator
                            runat="server"
                            ID="RequiredFieldValidator_bday_month"
                            ControlToValidate="DropDownList_bday_month"
                            Text="Required"
                            ErrorMessage="Birthday (Month) is Required on tab 1"
                            class="text-right"
                            Display="Dynamic"
                            Font-Bold="true"
                            ForeColor="red"
                            ValidationGroup="ValidationGroup_Main" />
                        <asp:DropDownList ID="DropDownList_bday_day" runat="server" class="form-control" style="max-width:75px">
                            <asp:ListItem Value="">Day</asp:ListItem>
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                            <asp:ListItem Value="5">5</asp:ListItem>
                            <asp:ListItem Value="6">6</asp:ListItem>
                            <asp:ListItem Value="7">7</asp:ListItem>
                            <asp:ListItem Value="8">8</asp:ListItem>
                            <asp:ListItem Value="9">9</asp:ListItem>
                            <asp:ListItem Value="10">10</asp:ListItem>
                            <asp:ListItem Value="11">11</asp:ListItem>
                            <asp:ListItem Value="12">12</asp:ListItem>
                            <asp:ListItem Value="13">13</asp:ListItem>
                            <asp:ListItem Value="14">14</asp:ListItem>
                            <asp:ListItem Value="15">15</asp:ListItem>
                            <asp:ListItem Value="16">16</asp:ListItem>
                            <asp:ListItem Value="17">17</asp:ListItem>
                            <asp:ListItem Value="18">18</asp:ListItem>
                            <asp:ListItem Value="19">19</asp:ListItem>
                            <asp:ListItem Value="20">20</asp:ListItem>
                            <asp:ListItem Value="21">21</asp:ListItem>
                            <asp:ListItem Value="22">22</asp:ListItem>
                            <asp:ListItem Value="23">23</asp:ListItem>
                            <asp:ListItem Value="24">24</asp:ListItem>
                            <asp:ListItem Value="25">25</asp:ListItem>
                            <asp:ListItem Value="26">26</asp:ListItem>
                            <asp:ListItem Value="27">27</asp:ListItem>
                            <asp:ListItem Value="28">28</asp:ListItem>
                            <asp:ListItem Value="29">29</asp:ListItem>
                            <asp:ListItem Value="30">30</asp:ListItem>
                            <asp:ListItem Value="31">31</asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator
                            runat="server"
                            ID="RequiredFieldValidator_bday_day"
                            ControlToValidate="DropDownList_bday_day"
                            Text="Required"
                            class="text-right"
                            Display="Dynamic"
                            Font-Bold="true"
                            ForeColor="red"
                            ValidationGroup="ValidationGroup_Main" />
                        <asp:DropDownList ID="DropDownList_bday_year" runat="server" class="form-control" style="max-width:80px">
                            <asp:ListItem Value="">Year</asp:ListItem>
                            <asp:ListItem Value="1930">1930</asp:ListItem>
                            <asp:ListItem Value="1931">1931</asp:ListItem>
                            <asp:ListItem Value="1932">1932</asp:ListItem>
                            <asp:ListItem Value="1933">1933</asp:ListItem>
                            <asp:ListItem Value="1934">1934</asp:ListItem>
                            <asp:ListItem Value="1935">1935</asp:ListItem>
                            <asp:ListItem Value="1936">1936</asp:ListItem>
                            <asp:ListItem Value="1937">1937</asp:ListItem>
                            <asp:ListItem Value="1938">1938</asp:ListItem>
                            <asp:ListItem Value="1939">1939</asp:ListItem>
                            <asp:ListItem Value="1940">1940</asp:ListItem>
                            <asp:ListItem Value="1941">1941</asp:ListItem>
                            <asp:ListItem Value="1942">1942</asp:ListItem>
                            <asp:ListItem Value="1943">1943</asp:ListItem>
                            <asp:ListItem Value="1944">1944</asp:ListItem>
                            <asp:ListItem Value="1945">1945</asp:ListItem>
                            <asp:ListItem Value="1946">1946</asp:ListItem>
                            <asp:ListItem Value="1947">1947</asp:ListItem>
                            <asp:ListItem Value="1948">1948</asp:ListItem>
                            <asp:ListItem Value="1949">1949</asp:ListItem>
                            <asp:ListItem Value="1950">1950</asp:ListItem>
                            <asp:ListItem Value="1951">1951</asp:ListItem>
                            <asp:ListItem Value="1952">1952</asp:ListItem>
                            <asp:ListItem Value="1953">1953</asp:ListItem>
                            <asp:ListItem Value="1954">1954</asp:ListItem>
                            <asp:ListItem Value="1955">1955</asp:ListItem>
                            <asp:ListItem Value="1956">1956</asp:ListItem>
                            <asp:ListItem Value="1957">1957</asp:ListItem>
                            <asp:ListItem Value="1958">1958</asp:ListItem>
                            <asp:ListItem Value="1959">1959</asp:ListItem>
                            <asp:ListItem Value="1960">1960</asp:ListItem>
                            <asp:ListItem Value="1961">1961</asp:ListItem>
                            <asp:ListItem Value="1962">1962</asp:ListItem>
                            <asp:ListItem Value="1963">1963</asp:ListItem>
                            <asp:ListItem Value="1964">1964</asp:ListItem>
                            <asp:ListItem Value="1965">1965</asp:ListItem>
                            <asp:ListItem Value="1966">1966</asp:ListItem>
                            <asp:ListItem Value="1967">1967</asp:ListItem>
                            <asp:ListItem Value="1968">1968</asp:ListItem>
                            <asp:ListItem Value="1969">1969</asp:ListItem>
                            <asp:ListItem Value="1970">1970</asp:ListItem>
                            <asp:ListItem Value="1971">1971</asp:ListItem>
                            <asp:ListItem Value="1972">1972</asp:ListItem>
                            <asp:ListItem Value="1973">1973</asp:ListItem>
                            <asp:ListItem Value="1974">1974</asp:ListItem>
                            <asp:ListItem Value="1975">1975</asp:ListItem>
                            <asp:ListItem Value="1976">1976</asp:ListItem>
                            <asp:ListItem Value="1977">1977</asp:ListItem>
                            <asp:ListItem Value="1978">1978</asp:ListItem>
                            <asp:ListItem Value="1979">1979</asp:ListItem>
                            <asp:ListItem Value="1980">1980</asp:ListItem>
                            <asp:ListItem Value="1981">1981</asp:ListItem>
                            <asp:ListItem Value="1982">1982</asp:ListItem>
                            <asp:ListItem Value="1983">1983</asp:ListItem>
                            <asp:ListItem Value="1984">1984</asp:ListItem>
                            <asp:ListItem Value="1985">1985</asp:ListItem>
                            <asp:ListItem Value="1986">1986</asp:ListItem>
                            <asp:ListItem Value="1987">1987</asp:ListItem>
                            <asp:ListItem Value="1988">1988</asp:ListItem>
                            <asp:ListItem Value="1989">1989</asp:ListItem>
                            <asp:ListItem Value="1990">1990</asp:ListItem>
                            <asp:ListItem Value="1991">1991</asp:ListItem>
                            <asp:ListItem Value="1992">1992</asp:ListItem>
                            <asp:ListItem Value="1993">1993</asp:ListItem>
                            <asp:ListItem Value="1994">1994</asp:ListItem>
                            <asp:ListItem Value="1995">1995</asp:ListItem>
                            <asp:ListItem Value="1996">1996</asp:ListItem>
                            <asp:ListItem Value="1997">1997</asp:ListItem>
                            <asp:ListItem Value="1998">1998</asp:ListItem>
                            <asp:ListItem Value="1999">1999</asp:ListItem>
                            <asp:ListItem Value="2000">2000</asp:ListItem>
                            <asp:ListItem Value="2001">2001</asp:ListItem>
                            <asp:ListItem Value="2002">2002</asp:ListItem>
                            <asp:ListItem Value="2003">2003</asp:ListItem>
                            <asp:ListItem Value="2004">2004</asp:ListItem>
                            <asp:ListItem Value="2005">2005</asp:ListItem>
                            <asp:ListItem Value="2006">2006</asp:ListItem>
                            <asp:ListItem Value="2007">2007</asp:ListItem>
                            <asp:ListItem Value="2008">2008</asp:ListItem>
                            <asp:ListItem Value="2009">2009</asp:ListItem>
                            <asp:ListItem Value="2010">2010</asp:ListItem>
                            <asp:ListItem Value="2011">2011</asp:ListItem>
                            <asp:ListItem Value="2012">2012</asp:ListItem>
                            <asp:ListItem Value="2013">2013</asp:ListItem>
                            <asp:ListItem Value="2014">2014</asp:ListItem>
                            <asp:ListItem Value="2015">2015</asp:ListItem>
                            <asp:ListItem Value="2016">2016</asp:ListItem>
                            <asp:ListItem Value="2017">2017</asp:ListItem>
                            <asp:ListItem Value="2018">2018</asp:ListItem>
                            <asp:ListItem Value="2019">2019</asp:ListItem>
                            <asp:ListItem Value="2020">2020</asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator
                            runat="server"
                            ID="RequiredFieldValidator_bday_year"
                            ControlToValidate="DropDownList_bday_year"
                            Text="Required"
                            class="text-right"
                            Display="Dynamic"
                            Font-Bold="true"
                            ForeColor="red"
                            ValidationGroup="ValidationGroup_Main" />

                    </div>

In another field, called "Reported Date", I have the following code, which is what I was originally looking for when I posted this topic (including a date validation expression to make sure they don't enter a month beyond 12 or day beyond 31):

enter image description here The "/"s stay while typing.

 <div class="col-xs-6 text-right">
                        <b>Reported Date:</b><br>
                    </div>
                    <div class="col-xs-6">
                        <asp:TextBox
                            runat="server"
                            ID="TextBox_ReportedDate"
                            class="form-control"
                            style="max-width:125px" />
                        <asp:RegularExpressionValidator
                            ID="RegularExpressionValidator_ReportedDate"
                            runat="server"
                            ControlToValidate="TextBox_ReportedDate"
                            ErrorMessage="Invalid date"
                            ValidationExpression="^^((0[1-9])|(1[0-2]))\/((0[1-9])|(1[0-9])|(2[0-9])|(3[0-1]))\/(\d{4})$"
                            Display="Dynamic"
                            SetFocusOnError="True"
                            Font-Bold="true"
                            ForeColor="red" />
                        <ajaxToolkit:MaskedEditExtender ID="maskededitextender_ReportedDate" runat="server" TargetControlID="TextBox_ReportedDate" Mask="99/99/9999" MaskType="Date" AcceptNegative="None" />
                    </div>

Thanks for your help everybody! I hope this post is useful for others.

Kudin
  • 81
  • 1
  • 10