datepikcar in javascript funcation

2 posts, 0 answers
  1. Rathan
    Rathan avatar
    20 posts
    Member since:
    Oct 2011

    Posted 02 Apr 2012 Link to this post

    Hi

    Iam placed one table inside the EditFormSetting .i want to calculate the days in between twodates of datepickers .
    how can i get the value of datepickerconcrol when i selected the date for writing the javascript function .
    please help me .Thank u in advance.

     <EditFormSettings EditFormType="Template">
    </FormTemplate>
    ---datepicker1---
    ---datepicker2---
    ---ddl----price*days
    --txtbox---result bind to this textbox

    </formTemplate>
    </EditFormSettings>    



    <
    table cellpadding="1" cellspacing="1" width="98%" align="center">
         <tr>
            <!--#include file="../Menus/MenuPage.aspx"--> 
            </tr>
            <tr>
            <td align="center">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate >
                <table align="center">
                <tr>
                <td style="text-align: center">
                        <asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="true" 
                            Font-Names="verdana" Font-Size="12pt" ForeColor="SteelBlue"> Bill Details </asp:LinkButton>
                    </td>
                </tr>
                <tr>
                <td> </td>
                </tr>
                <tr>
                <td align="center">
                <table align="center" cellpadding="1" cellspacing="1" style="margin:2px">
                <tr>
                <td align="left"  style="width:100px">
                    <asp:Label ID="Label1" runat="server" Text="RefNo" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label></td>
                <td align="left" style="width:150px">
                    <asp:TextBox ID="txtRefno" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8.5pt" 
                        ForeColor="Black"></asp:TextBox>
                    <telerik:RadComboBox ID="ddlRefno" runat="server" AllowCustomText="True" AutoPostBack="True" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" DropDownCssClass="RadComboBox_Sunset" EmptyMessage="Select a RefNo" EnableEmbeddedSkins="False" EnableLoadOnDemand="True" EnableViewState="false" EnableVirtualScrolling="True" Font-Names="verdana" Font-Size="8.5pt" MarkFirstMatch="True" ShowMoreResultsBox="True" Skin="Sunset" style="color:Black;background-color:White;font-family:Verdana;font-size:8pt;" TabIndex="1">
                    </telerik:RadComboBox>
                </td>
                <td align="left" style="width:100px" >
                     <asp:Label ID="Label2" runat="server" Text="Date" Font-Names="Verdana" 
                         Font-Size="8.5pt" ForeColor="Maroon"></asp:Label></td>
                <td align="left" style="width:150px"><asp:TextBox ID="txtDate" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8.5pt"></asp:TextBox></td>
                </tr>
                <tr>
                <td align="left"  style="width:100px">
                    <asp:Label ID="Label3" runat="server" Text="Patient Id" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label></td>
                <td align="left" style="width:150px">
                    <telerik:RadComboBox ID="ddlPatientno" runat="server"
                     AutoPostBack="True" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" 
                                        DropDownCssClass="RadComboBox_Sunset" EmptyMessage="Select a Patient No/Name" 
                                        EnableEmbeddedSkins="False" EnableLoadOnDemand="True" EnableViewState="false" 
                                        EnableVirtualScrolling="True" Font-Names="verdana" Font-Size="8.5pt" 
                                        MarkFirstMatch="True" ShowMoreResultsBox="True" Skin="Sunset" 
                                        style="color:Black;background-color:White;font-family:Verdana;font-size:8pt;" 
                                        TabIndex="2" Width="230">
                    </telerik:RadComboBox>
                  </td>
                <td align="left" style="width:100px" >
                 <asp:Label ID="Label4" runat="server" Text="Patient Name" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label>
                     </td>
                <td align="left" style="width:200px">
                 <asp:TextBox ID="txtPatientname" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Width="200" Font-Size="8.5pt"></asp:TextBox>
               </td>
                </tr>
                <tr>
                <td align="left"  style="width:100px">
                    <asp:Label ID="Label5" runat="server" Text="Ward" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label></td>
                <td align="left" style="width:150px">
                    <asp:TextBox ID="txtWard" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8.5pt"></asp:TextBox>
                  </td>
                <td align="left" style="width:100px" >
                 <asp:Label ID="Label6" runat="server" Text="Room No" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label>
                     </td>
                <td align="left" style="width:150px">
                 <asp:TextBox ID="txtRoomno" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8.5pt"></asp:TextBox>
               </td>
                </tr>
                <tr>
                <td align="left"  style="width:100px">
                    <asp:Label ID="Label7" runat="server" Text="Bed No" Font-Names="Verdana" 
                        Font-Size="8.5pt" ForeColor="Maroon"></asp:Label></td>
                <td align="left" style="width:150px">
                    <asp:TextBox ID="txtBedno" runat="server" BorderColor="#999999" 
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8.5pt"></asp:TextBox>
                  </td>
                <td align="left" style="width:100px" >
                     </td>
                <td align="left" style="width:150px">
                     </td>
                </tr>
                <tr>
                <td align="left" colspan="4">
                  <asp:Panel ID="Panel1" runat="server" Font-Names="Verdana" Font-Size="8.5pt"  ForeColor="Maroon" HorizontalAlign="Left">
                                    <fieldset >
                                    <legend ><b style="color:Maroon">Equipment Bill</b></legend>
                                      
                                    <table width="98%" cellpadding="0" cellspacing="0">
                                    <tr>
                                    <td align="left" style="font-size: 8.5pt; font-family: Verdana;color:Maroon">
                                      
                                    </td>
                                    </tr>
                                        <tr>
                                            <td align="left" style="font-size: 8.5pt; font-family: Verdana;color:Maroon">
                                                 </td>
                                        </tr>
                                    <tr>
    <td align="center" >
          
        <telerik:RadGrid ID="grvEquipDetails" runat="server" AllowSorting="True" AutoGenerateColumns="False"  CellSpacing="0" GridLines="None" Skin="Outlook"  ShowStatusBar="True" Width="700px" TabIndex="3" >
                                         <ClientSettings EnableRowHoverStyle="true">
                                            </ClientSettings>
                                            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Outlook">
                                            </HeaderContextMenu>
                                            <MasterTableView  CommandItemDisplay="Top" DataKeyNames="doctorid">
                                              
                                         
                                              
                                              
                                                <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
      
    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
    <HeaderStyle Width="20px"></HeaderStyle>
    </RowIndicatorColumn>
      
    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
    <HeaderStyle Width="20px"></HeaderStyle>
    </ExpandCollapseColumn>
                                                <Columns>
                                                    <telerik:GridTemplateColumn FilterControlAltText="Filter column column" 
                                                        HeaderText="S.NO" UniqueName="column">
                                                        <EditItemTemplate>
                                                           <%# Container.DataSetIndex+1  %>
                                                        </EditItemTemplate>
                                                        <ItemTemplate>
                                                             <%# Container.DataSetIndex+1  %>
                                                     </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridBoundColumn DataField="Fdate" 
                                                        FilterControlAltText="Filter Fdate column" HeaderText="FROM DATE" UniqueName="fdate">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Tdate" 
                                                        FilterControlAltText="Filter Tdate column" HeaderText="TO DATE" 
                                                        UniqueName="tdate">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Ecode" 
                                                        FilterControlAltText="Filter Ecode column" HeaderText="EQUIPMENT NAME" 
                                                        UniqueName="Ecode">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Days" 
                                                        FilterControlAltText="Filter Days column" HeaderText="DAYS" 
                                                        UniqueName="Days">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Amount" 
                                                        FilterControlAltText="Filter Amount column" HeaderText="AMOUNT" 
                                                        UniqueName="Amount">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton">
                                                    <ItemStyle Width="50px" />
                                                </telerik:GridEditCommandColumn>
                                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"  ConfirmText="Delete this Doctor Name ?" Text="Delete"  UniqueName="DeleteColumn1">
                                                    <HeaderStyle Width="20px" />
                                                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                                </telerik:GridButtonColumn>
                                                </Columns>
                                                  
                                           <EditFormSettings EditFormType="Template">
    <EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>
    <FormTemplate>
     <table id="tblDesi" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none" style="border-collapse: collapse; background: white;">
                            <tr class="EditFormHeader">
                                <td colspan="2" style="font-size: small; font-family: Verdana;color:Maroon" >
                                    <b>Equipment Bill:</b>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                     <table id="Table3" cellspacing="1" cellpadding="1" width="250" border="0">
                        <tr>
                            <td> </td>
                            <td> </td>
                        </tr>
                        <tr>
                            <td align="left">
                                <asp:Label ID="label7" Text="From Date:" runat="server" Font-Names="verdana" Font-Size="8.5pt" ForeColor="Maroon" Width="110"></asp:Label>
                            </td>
                            <td align="left">
                            <telerik:RadDatePicker ID="txtFromdate" runat="server"  Culture="English (United States)" onkeypress="return CharOnly()"  onkeydown="return noNumbers(event)" MinDate="1900-01-01" Font-Size="8.5pt" Font-Names="verdana" Width="100">
                            <Calendar ID="Calendar2" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar><DatePopupButton ImageUrl="" HoverImageUrl="" ToolTip="Calendar"></DatePopupButton>
                            <DateInput ID="DateInput2" runat="server" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" ></DateInput>
                        
                                        </telerik:RadDatePicker><span style="font-size: 8pt; color: maroon">*</span>
                            </td>
                           <%-- <td>
                                  <asp:DropDownList ID="ddlDoc" AppendDataBoundItems="true" runat="server" Width="222px" TabIndex="1" Font-Names="verdana" Font-Size="8.5pt" DataTextField='<%# Bind("doctorid") %>' DataValueField='<%# Bind("doctorid") %>'></asp:DropDownList><span style="font-size: 8pt; color: maroon">*</span>
                            </td>--%>
                             
                        </tr>
                        <tr>
                        <td align="left">
                          <asp:Label ID="label9" Text="To Date:" runat="server" Font-Names="verdana" Font-Size="8.5pt" ForeColor="Maroon" Width="110"></asp:Label>
                        </td>
                        <td align="left">
                         <telerik:RadDatePicker ID="txtToDate" runat="server"  Culture="English (United States)" onkeypress="return CharOnly()"  onkeydown="return noNumbers(event)" 
                        Font-Size="8.5pt" Font-Names="verdana" Width="100">
                         <Calendar ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>
                         <DatePopupButton ImageUrl="" HoverImageUrl="" ToolTip="Calendar"></DatePopupButton>
                            <DateInput ID="DateInput1" runat="server" DisplayDateFormat="dd/MM/yyyy"  DateFormat="dd/MM/yyyy" ></DateInput>
             
                              
                             </telerik:RadDatePicker><span style="font-size: 8pt; color: maroon">*</span>
                         
                        </td>
                        </tr>
                        <tr>
                        <td align="left">
                         <asp:Label ID="label10" Text="Equipment Name:" runat="server" Font-Names="verdana" Font-Size="8.5pt" ForeColor="Maroon" Width="110"></asp:Label>
                        </td>
                        <td align="left">
                        <telerik:RadComboBox ID="ddlEuipment" runat="server"
                       AutoPostBack="True" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" 
                                        DropDownCssClass="RadComboBox_Sunset" EmptyMessage="Select a EquipmentName" 
                                        EnableEmbeddedSkins="False" EnableLoadOnDemand="True" EnableViewState="false" 
                                        EnableVirtualScrolling="True" Font-Names="verdana" Font-Size="8.5pt" 
                                        MarkFirstMatch="True" ShowMoreResultsBox="True" Skin="Sunset" 
                                        style="color:Black;background-color:White;font-family:Verdana;font-size:8pt;" 
                                        TabIndex="2" Width="230">
                    </telerik:RadComboBox></td>
                        </tr>
                        <tr>
                        <td align="left">
                         <asp:Label ID="label11" Text="Days:" runat="server" Font-Names="verdana" Font-Size="8.5pt" ForeColor="Maroon" Width="110"></asp:Label>
                        </td>
                        <td align="left">
                         <asp:TextBox ID="txtDays" runat="server" Font-Names="verdana" Font-Size="8.5pt" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
                        </td>
                        </tr>
                        <tr>
                        <td align="left">
                          <asp:Label ID="label12" Text="Amount:" runat="server" Font-Names="verdana" Font-Size="8.5pt" ForeColor="Maroon" Width="110"></asp:Label>
                        </td>
                        <td align="left">
                        <asp:TextBox ID="txtAmount" runat="server" Font-Names="verdana" Font-Size="8.5pt" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"></asp:TextBox></td>
                        </tr>
                    </table>
                     </td>
                    </tr>
                            <%--<tr>
                                <td align="right" colspan="2">
                                    <asp:Button ID="btnUpdate1" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>' Style="color: White; background-color: SteelBlue; font-family: Verdana; font-size: 8pt; width: 87px;" runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' OnClientClick="return ValidName()" CausesValidation="true" AccessKey="I" ToolTip="Alt+i" TabIndex="7">
                                    </asp:Button
                                      <asp:Button ID="btnCancel1" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" Style="color: White; background-color: SteelBlue; font-family: Verdana; font-size: 8pt; width: 87px;" AccessKey="C" ToolTip="Alt+c" TabIndex="8"></asp:Button>
                                </td>
                            </tr>--%>
                            <tr>
                             <td colspan="2" align="center" style="padding-left:65px" >
                                <asp:ImageButton ID="btnUpdate1" AccessKey="S" ToolTip="Save" runat="server"  Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update" ) %>' ImageUrl="~/Images/save.jpg"  CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' OnClientClick="OnClientClick(); return false;" />    
                                <asp:ImageButton ID="btnCancel1" runat="server" CausesValidation="false" CommandName="Cancel" ImageUrl="~/Images/cancelbtn.jpg" ToolTip="Cancel"/>
                             </td>
                             </tr>
                        </table>
      
    </FormTemplate>
      
    </EditFormSettings>     
                                                  
                                                 
                                            </MasterTableView>
                                            <FilterMenu EnableImageSprites="False">
                                            </FilterMenu>
                                        </telerik:RadGrid>
    </td>
                                    </tr>
                                    <tr>
                                    <td> </td>
                                    </tr>
                                    </table>
                                    </fieldset></asp:Panel>
                </td>
                </tr>
                </table>
                </td>
                </tr>
                <tr>
                <td align="center">
                  <asp:Button ID="btnAdd" runat="server" Text="Add" AccessKey="A" ToolTip="Alt+a" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px" /> 
                  <asp:Button ID="btnEdit" runat="server" Text="Edit"  AccessKey="E" ToolTip="Alt+e" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px"  /> 
                  <asp:Button ID="btnSave" runat="server" Text="Save"  AccessKey="S" ToolTip="Alt+s" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px"  /> 
                  <asp:Button ID="btnDel" runat="server" Text="Delete"  AccessKey="D" ToolTip="Alt+d" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px"  /> 
                  <asp:Button ID="btnClear" runat="server" Text="Clear"  AccessKey="C" ToolTip="Alt+c" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px"  /> 
                  <asp:Button ID="btnPrint" runat="server" Text="Print"  AccessKey="P" ToolTip="Alt+p" 
                   style="color:White;background-color:SteelBlue;font-family:Verdana;font-size:8.5pt;"  Width="80px"  />
                </td>
                </tr>
                  <tr>
                                <td align="center">
                                    <asp:Label ID="lblResult" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="8.5pt"
                                        ForeColor="Maroon" Width="448px"></asp:Label>
                                    <asp:TextBox ID="txtSpeNo" runat="server" BorderStyle="None" ForeColor="White" Height="10px"
                                        Width="100px"></asp:TextBox>
                                        <asp:TextBox ID="txtGrid" runat="server" BorderStyle="None" ForeColor="White" Height="10px"
                                        Width="100px"></asp:TextBox>
                                        </td>
                            </tr>
                   
                </table>
                </ContentTemplate>
                </asp:UpdatePanel>
              
            </td>
            </tr>
      
      
       </table>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Apr 2012 Link to this post

    Hello Rathan,

    You can access the controls in FormTemplate from code behind and pass their respective ClientID's as shown below. Here is the sample code.
    aspx:
    <EditFormSettings EditFormType="Template">
      <FormTemplate>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
        <telerik:RadDatePicker ID="RadDatePicker2" runat="server"></telerik:RadDatePicker>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="btn" Text="Click" runat="server" OnClientClick="GetValue();" />
      </FormTemplate>
    </EditFormSettings>
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
     if ((e.Item is GridEditFormItem && e.Item.IsInEditMode))
     {
      GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
      RadDatePicker pkr1 = (RadDatePicker)editFormItem.FindControl("RadDatePicker1");
      RadDatePicker pkr2 = (RadDatePicker)editFormItem.FindControl("RadDatePicker2");
      TextBox box = editFormItem.FindControl("TextBox1") as TextBox;
      RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['Id1'] = '" + pkr1.ClientID + "';</script>"));
      RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['Id2'] = '" + pkr2.ClientID + "';</script>"));
      RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['Id3'] = '" + box.ClientID + "';</script>"));
     }
    }
    JS:
    script type="text/javascript">
     function GetValue()
     {
       var dp1 = document.getElementById(window['Id1']);
       var dp2 = document.getElementById(window['Id2']);
       var txt = document.getElementById(window['Id3']);
       if (!dp1)
      {
        alert("no item in edit/insert mode available");
        return false;
      }
      else
      {
        rd1 = new Date(dp1.value);
        rd2 = new Date(dp2.value);
        msPerDay = 24 * 60 * 60 * 1000;
        days = Math.round((rd1- rd2) / msPerDay);
        txt.value = days;
      }
    }
    </script>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top