Enable / Disable date in jQuery UI DatePicker based on Database date using jQuery AJAX in ASP.Net

Last Reply 11 months ago By AnandM

Posted 11 months ago

I am refer this link. But  my database saved events Date. only event Date Enable.Reaming Date Disable

Implement jQuery UI DatePicker (Calendar) with ReadOnly TextBox in ASP.Net

my Database .

like this

Id    Date 

1    11-11-2016

2    10-11-2016

3     09-11-2016

Posted 11 months ago Modified on 11 months ago

Hi amitj,

I have created a sample which full fill your requirement

HTML

<div>
    <asp:TextBox ID="txtDisableDates" runat="server" />
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"
        type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css"
        rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            var reserveddates = '[';
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetDates",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xml = $.parseXML(response.d);
                    var dates = $(xml).find('BookedDate');
                    $.each(dates, function () {
                        reserveddates += '"' + $(this)[0].textContent.split('T')[0] + '",';
                    });
                    reserveddates += ']';
                    $('#txtDisableDates').datepicker({
                        beforeShowDay: function (date) {
                            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                            return [reserveddates.indexOf(string) != -1]
                        }
                    });
                }
            });
        });
    </script>
</div>

C#

[WebMethod]
public static string GetDates()
{
    DataTable dt = new DataTable("Date");
    dt.Columns.AddRange(new DataColumn[1] { new DataColumn("BookedDate", typeof(DateTime)) });
    dt.Rows.Add(DateTime.Now.Date);
    dt.Rows.Add(DateTime.Now.Date.AddDays(5));
    dt.Rows.Add(DateTime.Now.Date.AddDays(-5));
    dt.Rows.Add(DateTime.Now.Date.AddDays(-2));
    dt.Rows.Add(DateTime.Now.Date.AddDays(10));
    dt.Rows.Add(DateTime.Now.Date.AddDays(20));
    //You need to Bind Dates to DataTable and then bind datatable to DataSet and return like below.
    DataSet ds = new DataSet("Dates");
    ds.Tables.Add(dt);
    return ds.GetXml();
}

ScreenShot

 

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