Implement jQuery multiDatesPicker Plugin inside ASP.Net ListView using jQuery

Hi nauna,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<script type="text/javascript">
    $(function () {
        $("div[class=pickup]").each(function () {
            $('[id*=TextBox1]').multiDatesPicker({
                dateFormat: 'mm/dd/yy',
                minDate: 0

            });
        });
    });
</script>
<div>
    <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table id="ListViewTable" cellpadding="0" cellspacing="0" border="1" style="border-collapse: collapse">
                <tr>
                    <th>
                        Customer Id
                    </th>
                    <th>
                        Date
                    </th>
                </tr>
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <div class="pickup">
                <td>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Date") %>'></asp:TextBox>
                </td>
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("CustomerId", typeof(int)), new DataColumn("Date", typeof(DateTime)) });
        dt.Rows.Add(1, DateTime.Now);
        dt.Rows.Add(2, DateTime.Now.AddDays(1));
        dt.Rows.Add(3, DateTime.Now.AddDays(2));
        this.ListView1.DataSource = dt;
        this.ListView1.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 DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("CustomerId", GetType(Integer)), New DataColumn("Date", GetType(DateTime))})
        dt.Rows.Add(1, DateTime.Now)
        dt.Rows.Add(2, DateTime.Now.AddDays(1))
        dt.Rows.Add(3, DateTime.Now.AddDays(2))
        Me.ListView1.DataSource = dt
        Me.ListView1.DataBind()
    End If
End Sub

Screenshot