The date entered in the input field should also appear in all other textboxes on the

Question

The date entered in the input field should also appear in all other textboxes on the

I currently have 2 tables set up on my page. In the first table, there is a textbox (txt1) that includes a date picker. The second table contains 5 similar textboxes (txt2, txt3, txt4, txt5, txt6) also with date pickers.

My requirement is as follows:

Initially, all the text boxes should display today's date. When I change the date in the textbox in the first table, all the textboxes in the second table should automatically update to reflect the date chosen in the first table. I am looking for either a VB code or a JavaScript solution to achieve this functionality.

I have already implemented code to display today's date, but I'm struggling to code for the scenario described above.

If txt1.Text = "" Then
    txt1.Text = Format((Date.Today), "dd-MMM-yyyy")
    If txt1.Text <> "" Then
        txt2.Text = txt1.Text
        txt3.Text = txt1.Text
        txt4.Text = txt1.Text
        txt5.Text = txt1.Text
        txt6.Text = txt1.Text
    End If
End If

javascript asp.net vb.net datepicker

Answer 1

Answer №1

Upon page load, include the following code:

protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            txt1.Text = DateTime.Now.ToString();
        }
    } 

This will set the text of textbox 1 to today's date on the initial page load.


protected void txt1_TextChanged(object sender, EventArgs e)
    {   
              If txt1.Text = "" Then

                    If txt1.Text <> "" Then
                        txt2.Text = txt1.Text
                        txt3.Text = txt1.Text
                        txt4.Text = txt1.Text
                        txt5.Text = txt1.Text
                        txt6.Text = txt1.Text
                    End If
                End If

 }

You can add your specific conditions within the txt1_TextChanged event for textbox1. When the text in textbox1 changes, this event will trigger and populate all textboxes with the date accordingly.

<asp:TextBox ID="txt1" AutoPostBack="true" runat="server" Width="83px" ontextchanged="txt1_TextChanged" ></asp:TextBox>

Answer 2

Upon page load, include the following code:

protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            txt1.Text = DateTime.Now.ToString();
        }
    } 

This will set the text of textbox 1 to today's date on the initial page load.


protected void txt1_TextChanged(object sender, EventArgs e)
    {   
              If txt1.Text = "" Then

                    If txt1.Text <> "" Then
                        txt2.Text = txt1.Text
                        txt3.Text = txt1.Text
                        txt4.Text = txt1.Text
                        txt5.Text = txt1.Text
                        txt6.Text = txt1.Text
                    End If
                End If

 }

You can add your specific conditions within the txt1_TextChanged event for textbox1. When the text in textbox1 changes, this event will trigger and populate all textboxes with the date accordingly.

<asp:TextBox ID="txt1" AutoPostBack="true" runat="server" Width="83px" ontextchanged="txt1_TextChanged" ></asp:TextBox>

Answer 3

Answer №2

 public void LoadPage(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Textbox1.Text = DateTime.Now.ToString();
            OnTextChanged(Textbox1.Text);
        }
        else
        {
            OnTextChanged(Textbox1.Text);
        }
    }

    public void OnTextChanged(object sender, EventArgs e)
    {
        Textbox2.Text = Textbox1.Text;
    }

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>New Page</title>
</head>
<body>

    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"
        EnablePartialRendering="true">
    </asp:ScriptManager>
        <asp:TextBox ID="Textbox1" AutoPostBack="true" runat="server" 
            ontextchanged="OnTextChanged"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="Textbox1"
            Mask="99/99/9999" MaskType="Date" />
        <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Textbox1"
            Format="dd/MM/yyyy">
        </cc1:CalendarExtender>
        <asp:TextBox ID="Textbox2" runat="server"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="Textbox2"
            Mask="99/99/9999" MaskType="Date" />
        <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="Textbox2"
            Format="dd/MM/yyyy">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

This code can be added and it will function correctly.

Answer 4

 public void LoadPage(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Textbox1.Text = DateTime.Now.ToString();
            OnTextChanged(Textbox1.Text);
        }
        else
        {
            OnTextChanged(Textbox1.Text);
        }
    }

    public void OnTextChanged(object sender, EventArgs e)
    {
        Textbox2.Text = Textbox1.Text;
    }

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>New Page</title>
</head>
<body>

    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"
        EnablePartialRendering="true">
    </asp:ScriptManager>
        <asp:TextBox ID="Textbox1" AutoPostBack="true" runat="server" 
            ontextchanged="OnTextChanged"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="Textbox1"
            Mask="99/99/9999" MaskType="Date" />
        <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Textbox1"
            Format="dd/MM/yyyy">
        </cc1:CalendarExtender>
        <asp:TextBox ID="Textbox2" runat="server"></asp:TextBox>
        <cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="Textbox2"
            Mask="99/99/9999" MaskType="Date" />
        <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="Textbox2"
            Format="dd/MM/yyyy">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

This code can be added and it will function correctly.

Answer 5

Answer №3

I've implemented the solution you need using jQuery. Here's how you can do it:

Simply add the following code snippet within the head element of your HTML document:

<head runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


     <script>
         $(function () {
             $("#txt1").datepicker();
             $("#txt2").datepicker();
             $("#txt3").datepicker();
             $("#txt4").datepicker();
             $("#txt5").datepicker();
             $("#txt6").datepicker();
         });
         $(document).ready(function () {
             ShowTime();
             $("#txt1").change(function () {
                 $("#txt2").val($("#txt1").val());
                 $("#txt3").val($("#txt1").val());
                 $("#txt4").val($("#txt1").val());
                 $("#txt5").val($("#txt1").val());
                 $("#txt6").val($("#txt1").val());
             });
         });
         function ShowTime() {
             var dt = new Date();
             $("#txt1").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt2").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt3").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt4").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt5").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt6").val($.datepicker.formatDate('mm/dd/yy', new Date()));

         }

</script>
</head>

Note: I have set the date format to 'mm/dd/yy', feel free to adjust the code if you require a different format.

Answer 6

I've implemented the solution you need using jQuery. Here's how you can do it:

Simply add the following code snippet within the head element of your HTML document:

<head runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


     <script>
         $(function () {
             $("#txt1").datepicker();
             $("#txt2").datepicker();
             $("#txt3").datepicker();
             $("#txt4").datepicker();
             $("#txt5").datepicker();
             $("#txt6").datepicker();
         });
         $(document).ready(function () {
             ShowTime();
             $("#txt1").change(function () {
                 $("#txt2").val($("#txt1").val());
                 $("#txt3").val($("#txt1").val());
                 $("#txt4").val($("#txt1").val());
                 $("#txt5").val($("#txt1").val());
                 $("#txt6").val($("#txt1").val());
             });
         });
         function ShowTime() {
             var dt = new Date();
             $("#txt1").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt2").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt3").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt4").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt5").val($.datepicker.formatDate('mm/dd/yy', new Date()));
             $("#txt6").val($.datepicker.formatDate('mm/dd/yy', new Date()));

         }

</script>
</head>

Note: I have set the date format to 'mm/dd/yy', feel free to adjust the code if you require a different format.

The date entered in the input field should also appear in all other textboxes on the

Answer №1

Answer №2

Answer №3

Similar questions

Learn the steps to successfully select a drop-down option by clicking on a button

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

populating a multi-dimensional array using a "for" loop in Javascript

Strategies for retaining additional fields added via JavaScript when the page is refreshed

Learn the trick to make this floating icon descend gracefully and stick around!

Experiencing difficulties with a click event function for displaying or hiding content

Retrieving data from a dynamic array using jQuery

I am encountering difficulties with a nodejs query where I am unable to successfully include the "+" symbol as part of the query

Utilizing columns within the 'segment' element in Semantic-ui to enhance layout design

Rotating the camera around the origin in Three.js

Tips for incorporating a JavaScript file directly into your HTML code

Avoid activating the panel by pressing the button on the expansion header

The v-menu closes before the v-list-item onclick event is detected

Redirecting to another page with a simple link is not recommended

Issue encountered when employing the spread operator on objects containing optional properties

What is the method for retrieving the active element with Waypoint?

Can fetch be used to retrieve multiple sets of data at once?

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

Alter the button's color seamlessly while staying on the same page

Transmit a data element from the user interface to the server side without relying on the