Using jQuery DateTimePicker inside FormView control in ASP.Net

Last Reply on Nov 30, 2015 02:22 AM By dharmendr

Posted on Nov 25, 2015 01:34 PM

Hi

I saw the example here http://www.aspsnippets.com/Articles/DateTimePicker-in-ASP.Net-GridView-using-jQuery-DateTimePicker-Plugin.aspx.

 

These work if the textbox is not in formview. I have the textbox which is in the formview. I can't get dynDateTime() to get it working when my textbox is in formview control.

Please help me out, I appreciate it.

 

Posted on Nov 30, 2015 02:22 AM Modified on 8 months ago

Hi tbh,

I have created one sample please check with this.

HTML

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
    <script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
    <link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
    <link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Calender").dynDateTime({
                showsTime: true,
                ifFormat: "%Y/%m/%d %H:%M",
                daFormat: "%l;%M %p, %e %m,  %Y",
                align: "BR",
                electric: false,
                singleClick: false,
                displayArea: ".siblings('.dtcDisplayArea')",
                button: ".next()"
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FormView ID="FormView1" DataKeyNames="Name" GridLines="Both" AllowPaging="true"
            runat="server" OnItemInserting="ItemInserting" OnModeChanging="ModeChanging"
            OnPageIndexChanging="PageIndexChanging">
            <ItemTemplate>
                <table>
                    <tr>
                        <td align="right">
                            <b>Name:</b>
                        </td>
                        <td>
                            <%# Eval("Name")%>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <b>Date Of Birth:</b>
                        </td>
                        <td>
                            <asp:TextBox ID="txtItemDOB" runat="server" ReadOnly="true" class="Calender" />
                            <img src="calender.png" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:LinkButton ID="NewButton" Text="New" CommandName="New" runat="server" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
            <EditItemTemplate>
                <table>
                    <tr>
                        <td align="right">
                            <b>Name:</b>
                        </td>
                        <td>
                            <%# Eval("Name")%>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <b>Date Of Birth:</b>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEditDOB" runat="server" ReadOnly="true" class="Calender" />
                            <img src="calender.png" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:LinkButton ID="UpdateButton" Text="Update" CommandName="Update" runat="server" />
                            &nbsp;
                            <asp:LinkButton ID="CancelUpdateButton" Text="Cancel" CommandName="Cancel" runat="server" />
                        </td>
                    </tr>
                </table>
            </EditItemTemplate>
            <InsertItemTemplate>
                <table>
                    <tr>
                        <td align="right">
                            <b>Name:</b>
                        </td>
                        <td>
                            <asp:TextBox ID="txtInsertName" Text='<%# Bind("Name") %>' runat="Server" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <b>Date Of Birth:</b>
                        </td>
                        <td>
                            <asp:TextBox ID="txtInsertDOB" runat="server" class="Calender" />
                            <img src="calender.png" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:LinkButton ID="InsertButton" Text="Insert" CommandName="Insert" runat="server" />
                            &nbsp;
                            <asp:LinkButton ID="CancelInsertButton" Text="Cancel" CommandName="Cancel" runat="server" />
                        </td>
                    </tr>
                </table>
            </InsertItemTemplate>
        </asp:FormView>
    </div>
    </form>
</body>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGridWithDummyData();
    }
}

private void BindGridWithDummyData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Name");
    dt.Columns.Add("DateOfBirth");
    dt.Rows.Add();
    dt.Rows[0]["Name"] = "John";
    dt.Rows.Add();
    dt.Rows[1]["Name"] = "Sam";
    dt.Rows.Add();
    dt.Rows[2]["Name"] = "Tommy";
    FormView1.DataSource = dt;
    FormView1.DataBind();
}

protected void ItemInserting(object sender, FormViewInsertEventArgs e)
{
    string name = ((TextBox)FormView1.FindControl("txtInsertName")).Text.Trim();
    string dateOfBirth = ((TextBox)FormView1.FindControl("txtInsertDOB")).Text.Trim();
}

protected void ModeChanging(object sender, FormViewModeEventArgs e)
{
    FormView1.ChangeMode(e.NewMode);
    BindGridWithDummyData();
}

protected void PageIndexChanging(object sender, FormViewPageEventArgs e)
{
    FormView1.PageIndex = e.NewPageIndex;
    BindGridWithDummyData();
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html