How to Retrieve Date from Other Form in Asp.net Using JavaScript

Description:-

In this Example we will See How to retrieve date from another form and set in textbox. This example need if you want to put Birth date for etc. in your web page then you want to put date picker in your form so it will take space in your form instead of that space you want to that date picker control in other form then you can use this.

Create Webpage and Drag and Drop Textbox and Image controls so you can click on that image button and open other form for date selection.

<div>
   <table>
      <tr>
         <td>
            <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
         </td>
         <td>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Minimalist.jpg" Style="cursor: hand;" onclick="PopupPicker('txtDate')" Height="22px" Width="31px" />
         </td>
      </tr>
   </table>
</div>

Now Create Script for selection and other form and retrieve date from that form.

<script type="text/javascript">
   function PopupPicker(ctl) {   
     //var PopupWindow = null;   
     var strWindowFeatures = "toolbar=no,directories=no,location=no,scrollbars=no,status=no,resizable=no,menubar=no,width=276,height=215,left=0px,top=110px";   
     var URL = "DatePicker.aspx?ctl=" + ctl;   
     var win = window.open(URL, "_blank", strWindowFeatures);   
     return win ? false : true;   
     //PopupWindow = window.open('DatePicker.aspx?ctl=' + ctl, "_blank", "toolbar=0,directories=0,location=yes,scrollbars=yes,status=yes,resizable=no,menubar=no,width=276,height=215,left=0px,top=110px", false);   
     //PopupWindow.focus();   
      }   
</script>

Now create another form and name it “DatePicker” and add DatePicker Control in this form so User can Easily Select Date form this Form.

<div>
   <asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender">
   </asp:Calendar>
</div>

Now Create Script for Selected Date Pass to the Main Form and Set in Textbox. 

<script type="text/javascript">
  function SetDate(dateValue, ctl) {
     thisForm = window.opener.document.forms[0].elements[ctl].value = dateValue;
     self.close();
     }
</script>

In this function taking to parameter first one is Selected Date and second one is Ctl where we are Putting Our Values.

thisForm = window.opener.document.forms[0].elements[ctl].value = dateValue;
self.close();

This will Set Current form Selected Date Value and Close Form Automatically.

Now run your Main Form Textbox Value will be Blank.

Now Click On Image Button Then Open other Form Select Date.

After Selecting Date form automatically will be closed and selected Date will be on Textbox.

Author : Umesh Patel

Related Posts