Using jQuery DateTimepicker in GridView EditItemTemplate using jQuery in ASP.Net

Last Reply on Sep 26, 2017 03:12 AM By dharmendr

Posted on Sep 25, 2017 04:38 AM

Hello Everyone,

When I select the date for edit event in gridview it gives me current date as shown in the below image. I want to show the same date and time when Datetime picker is pop-up for october.

Thanks

DateTimePicker

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="calendarEdit/jquery.datetimepicker.css" />
    <script type="text/javascript" src="calendarEdit/jquery.js"></script>
    <script type="text/javascript" src="calendarEdit/jquery.datetimepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id$=txtMeetingStartTime]").datetimepicker({
                format: 'Y-m-d H:i',

                datepicker: true,
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: 'css/images/Calendar-icon.png'
            });
            $("[id$=txtMeetingEndTime]").datetimepicker({
                format: 'Y-m-d H:i',
                datepicker: true,
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: 'css/images/Calendar-icon.png'
            });

        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <form id="form2" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowEditing="EditCustomer"
        CssClass="table table-bordered" OnRowUpdating="UpdateCustomer" OnRowCancelingEdit="CancelEdit"
        DataKeyNames="PK_MeetingID" EnableModelValidation="True" EmptyDataText="No meetings Found for you!">
        <Columns>
            <asp:CommandField ShowEditButton="True" />
            <asp:TemplateField HeaderText="Meeting Title">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("MeetingTitle") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("MeetingTitle") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Meeting Start Time">
                <ItemTemplate>
                    <asp:Label ID="label1" runat="server" Text='<%# Bind("MeetingStartTime","{0:dd-MM-yyyy hh:mm tt}") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtMeetingStartTime" runat="server" ReadOnly="true" Text='<%# Bind("MeetingStartTime") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Meeting End Time">
                <ItemTemplate>
                    <asp:Label ID="label2" runat="server" Text='<%# Bind("MeetingEndTime") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtMeetingEndTime" runat="server" ReadOnly="true" Text='<%# Bind("MeetingEndTime","{0:dd-MM-yyyy hh:mm tt}") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <div class="container" id="div1" runat="server" visible="false">
        <div class="alert alert-danger">
            <strong>Sorry!</strong> Booking Time already passed.
        </div>
    </div>
    </form>
</asp:Content>

 

Posted on Sep 26, 2017 03:12 AM Modified on on Sep 26, 2017 03:26 AM

Hi irshad1231,

I have checked you code and found the issue. You need to change the DataFormatString in the edit mode like below.

irshad1231 says:
 <EditItemTemplate>
                <asp:TextBox ID="txtMeetingStartTime" runat="server" ReadOnly = "true" Text='<%# Bind("MeetingStartTime") %>'></asp:TextBox>
            </EditItemTemplate>

From the above with the below

<EditItemTemplate>
    <asp:TextBox ID="txtMeetingStartTime" runat="server" ReadOnly="true" Text='<%# Bind("MeetingStartTime","{0:yyyy-MM-dd HH:mm}") %>'></asp:TextBox>
</EditItemTemplate>

And

irshad1231 says:
 <EditItemTemplate>
                <asp:TextBox ID="txtMeetingEndTime" runat="server" ReadOnly = "true" Text='<%# Bind("MeetingEndTime","{0:dd-MM-yyyy hh:mm tt}") %>'></asp:TextBox>
            </EditItemTemplate>

From the above with the below

<EditItemTemplate>
    <asp:TextBox ID="txtMeetingEndTime" runat="server" ReadOnly="true" Text='<%# Bind("MeetingEndTime","{0:yyyy-MM-dd HH:mm}") %>'></asp:TextBox>
</EditItemTemplate>

The format should be yyyy-MM-dd hh:mm or yyyy-MM-dd HH:mm

2017-09-26 02:29

or

2017-09-26 14:29

As you are assigning format as format: 'Y-m-d H:i' in the jquery.

So as per the format in jquery you have to change the html format.