Dear SirI have a Datagrid where i want to open Boostrtap CalenderFor Delivery Date i am using below JqueryPlease help me out to calender Start Date will start from cells 3 Text 34ContentPlaceHolder1gridPOD inputname39txtDlyDate3934datepicker autoclose true format 34ddMyyyy34 endDate 34today34 startDate 393d39 todayBtn true inline true todayHighlight 1 ltaspDataGrid ID34DataGrid134 runat34server

Hi AmitabhaCheck this example Now please take its reference and correct your codeHTMLltaspDataGrid ID34gridPOD34 runat34server34 AutoGenerateColumns34false34 class34table tablestriped tablebordered34 Width3410034gt ltColumnsgt ltaspTemplateColumn HeaderText34Delivery Date amp Time34gt ltItemTemplategt ltaspTextBox ID34txtDlyDate34 runat34server34 CssClass34formcontrol34 Text39lt ConvertToDateTimeDataBinderEvalContainerDataItem34DLYDATE34ToString34ddMMMyyyy34gt39gt ltaspTextBoxgt ltItemTemplategt ltaspTemplateColumngt ltColumnsgtltaspDataGridgtltscript type34textjavascript34 src34httpsajaxaspnetcdncomajaxjQueryjquery183minjs34gtltscriptgtltscript type34textjavascript34 src34httpscd

Set Boostratp Datepicker start date inside ASP.Net DataGrid using jQuery

Amitabha

SOLVED CLOSED ACTIVE ANSWERED
User: Amitabha
Posted: on Mar 09, 2021 10:37 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 1695
Sample Code: Download

Dear Sir

I have a Datagrid where i want to open Boostrtap Calender.

For Delivery Date i am using below Jquery,

Please help me out to calender Start Date will start from cells [3] Text

$("#ContentPlaceHolder1_gridPOD input[name*='txtDlyDate']").datepicker({
    autoclose: true,
    format: "dd-M-yyyy",
    endDate: "today",
    startDate: '-3d',
    todayBtn: true,
    inline: true,
    todayHighlight: 1
});

<asp:DataGrid ID="DataGrid1" runat="server" HeaderStyle-BackColor="#0099cc" HeaderStyle-ForeColor="White"
    OnItemDataBound="gridPOD_ItemDataBound" ItemStyle-Font-Size="Small"
    AutoGenerateColumns="false" class="table table-striped table-bordered" Width="100%">
    <Columns>
        <asp:TemplateColumn HeaderText="Sr No">
            <ItemTemplate>
                <asp:CheckBox ID="ChkBxPOD" runat="server" CssClass="checkbox-inline" />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:BoundColumn DataField="BRANCH_BRANCH_CODE" HeaderText="Bkg Branch"></asp:BoundColumn>
        <asp:BoundColumn DataField="CNS_NO" HeaderText="Consginment No"></asp:BoundColumn>
        <asp:BoundColumn DataField="CNS_DATE" HeaderText="Consginment Date"></asp:BoundColumn>
        <asp:TemplateColumn HeaderText="Delivery Date & Time">
            <ItemTemplate>
                <asp:TextBox ID="txtDlyDate" runat="server" CssClass=" form-control"
                    Text='<%#DataBinder.Eval(Container.DataItem,"DLY_DATE")%>'>
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="OK" HeaderStyle-BackColor="Green">
            <ItemTemplate>
                <asp:CheckBox ID="chkOk" Class="checkbox-inline" runat="server" />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Damage" HeaderStyle-BackColor="Red">
            <ItemTemplate>
                <asp:CheckBox ID="chkDmg" runat="server" Class="checkbox-inline" />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Shortage" HeaderStyle-BackColor="Orange">
            <ItemTemplate>
                <asp:CheckBox ID="chkShrt" runat="server" Class="checkbox-inline" />
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="Remarks">
            <ItemTemplate>
                <asp:TextBox ID="txtRemarks" runat="server" CssClass="form-control user text-uppercase"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn HeaderText="POD Image">
            <ItemTemplate>
                <div class="input-group">
                    <label class="input-group-btn">
                        <span class="btn btn-primary">Browse&hellip;
                            <input type="file" style="display: none;" accept=".jpg">
                        </span>
                    </label>
                    <input type="text" id="txtFilePath" runat="server" class="form-control" readonly>
                </div>
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Mar 10, 2021 04:12 AM
Report

Hi Amitabha,

Check this example. Now please take its reference and correct your code.

HTML

<asp:DataGrid ID="gridPOD" runat="server" AutoGenerateColumns="false"
    class="table table-striped table-bordered" Width="100%">
    <Columns>
        <asp:TemplateColumn HeaderText="Delivery Date & Time">
            <ItemTemplate>
                <asp:TextBox ID="txtDlyDate" runat="server" CssClass="form-control"
                    Text='<%# Convert.ToDateTime(DataBinder.Eval(Container.DataItem,"DLY_DATE")).ToString("dd-MMM-yyyy")%>'>
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.each($('[id*=txtDlyDate]'), function () {
            var dlyDate = $(this).val();
            $(this).datepicker({
                autoclose: true,
                format: "dd-M-yyyy",
                endDate: "today",
                startDate: dlyDate,
                todayBtn: true,
                inline: true,
                todayHighlight: 1
            });
        });
    });
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add(new System.Data.DataColumn("DLY_DATE", typeof(DateTime)));
        dt.Rows.Add(DateTime.Now);
        dt.Rows.Add(DateTime.Now.AddDays(-1));
        dt.Rows.Add(DateTime.Now.AddMonths(-1).AddDays(2));
        gridPOD.DataSource = dt;
        gridPOD.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As Data.DataTable = New Data.DataTable()
        dt.Columns.Add(New Data.DataColumn("DLY_DATE", GetType(DateTime)))
        dt.Rows.Add(DateTime.Now)
        dt.Rows.Add(DateTime.Now.AddDays(-1))
        dt.Rows.Add(DateTime.Now.AddMonths(-1).AddDays(2))
        gridPOD.DataSource = dt
        gridPOD.DataBind()
    End If
End Sub

Screenshot

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

Set Boostratp Datepicker start date inside ASP.Net DataGrid using jQuery

Company

Explore

Follow us

Contact Us