CODEWITHSUNDEEP
c#javascriptjqueryasp.net
rumi
rumi

Reputation: 3298

how to copy a selected date between textboxes in c#

I have a StartDate and EndDate in an ASP.NET using c# webpage. When user fills in start date - I want this to be copied to enddate until user changes the end date. How can we possibly do that. The code I have as as below

<asp:PlaceHolder ID="m_eventform" runat="server" Visible="true">
<script type="text/javascript">
    $(function () {
        $('#<%= m_eventDate.ClientID %>').datepick({ dateFormat: 'yyyy-mm-dd' });
        $('#<%= m_eventEndDate.ClientID %>').datepick({ dateFormat: 'yyyy-mm-dd' });
    });
</script>
<form id="eventForm" runat="server">

<div class="formrow">
    <label>
      Start Date</label>
    <asp:TextBox ID="m_eventDate" runat="server" />
    <asp:RequiredFieldValidator ID="m_eventDateRequired" runat="server" ControlToValidate="m_eventDate"
        ErrorMessage="Please enter a start date" Display="Dynamic" />
    <asp:RegularExpressionValidator ID="m_eventDateReg" runat="server" ValidationExpression="^\d{4}[\-]?((((0[13578])|(1[02]))[\-]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\-]?(([0-2][0-9])|(30)))|(02[\-]?[0-2][0-9]))$"
        ControlToValidate="m_eventDate" Display="Dynamic" ErrorMessage="Please enter the date in YYYY-MM-DD format" />
</div>

  <div class="formrow">
    <label>
        End Date</label>
    <asp:TextBox ID="m_eventEndDate" runat="server" />
    <asp:RequiredFieldValidator ID="m_eventEndDateRequired" runat="server" ControlToValidate="m_eventEndDate"
        ErrorMessage="Please enter an end date" Display="Dynamic" />
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^\d{4}[\-]?((((0[13578])|(1[02]))[\-]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\-]?(([0-2][0-9])|(30)))|(02[\-]?[0-2][0-9]))$"
        ControlToValidate="m_eventEndDate" Display="Dynamic" ErrorMessage="Please enter the date in YYYY-MM-DD format" />
</div>


</form>

Upvotes: 2

Views: 236

Answers (2)

Aaron F.
Aaron F.

Reputation: 67

Date picker has an onselect function that could be used :
$('#<%= m_eventDate.ClientID %>').datepick( { dateFormat: 'yyyy-mm-dd', onSelect : function(dateText,inst){ if(!endDateSelected){ $('#<%= m_eventEndDate.ClientID %>').val(dateText); } } });


$('#<%= m_eventEndDate.ClientID %>').datepick( { dateFormat: 'yyyy-mm-dd', onSelect : function(dateText,inst){ endDateSelected = true; } });
This will keep you from having to write extra C# code. Adding the onSelect function to the enddate selector will prevent the end date from continually being updated every time the user changes the start date.

You can also checkout this post for a similar situation: jQuery UI Datepicker - onSelect get the selected date +3 days

Upvotes: 1

Mike Perrenoud
Mike Perrenoud

Reputation: 67898

Modify your markup like this:

<asp:TextBox ID="m_eventDate" runat="server" onblur="copyDate();" />

and then add this JavaScript:

function copyDate() {
    $('#<%= m_eventEndDate.ClientID %>').val($('#<%= m_eventDate.ClientID %>').val);
}

Recommendation

I would recommend, if you're using .NET 4.0, to leverage the new ClientIDMode property for the text boxes. You could set it like this:

<asp:TextBox ID="m_eventDate" runat="server" ClientIDMode="Static" />

and then in JavaScript you'll be able to reference them like this instead:

$('#m_eventDate') ...

because their id won't be changed server-side by the naming container.

Upvotes: 0

Related Questions