Disable Times in jQuery timepicker based on Database value using jQuery AJAX in ASP.Net

Last Reply 3 months ago By pandeyism

Posted 3 months ago

i am using this date picker, it shows all the time in dropdown, in my database table i have fields of timing like

Time not available 1:00 am 2:00 am

so field those are in my database i want that time should not be selectabl and strikeout in the above dropdown on page load

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<asp:TextBox ID="txttimeofreservation" runat="server"></asp:TextBox>
<script>
    $(document).ready(function () {
        //$('input.timepicker').timepicker({});
        $('[id*=txttimeofreservation]').timepicker({
            defaultTime: '12:00 AM',
            interval: 60,
        });
        //$('[id*=TextBox1]').summernote()
    });
</script>
Posted 3 months ago

Hi nauna,

Refer below sample.

I have used datatable for data you can fetch data from database to datatable.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.js"></script>
<script type="text/javascript">
    $(function () {
        var pair = [];
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCurrentTime",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (response) {
                for (var i = 0; i < response.d.length; i++) {
                    var hour = response.d[i].split(' ')[0].split(':')[0];
                    var min = parseInt(response.d[i].split(' ')[0].split(':')[1]) + 1;
                    min = min < 10 ? '0' + min : min;
                    var ampm = response.d[i].split(' ')[1];
                    var start = response.d[i];
                    var end = hour + ':' + min + ' ' + ampm;
                    pair.push([start, end]);
                }
            }
        });
        $('[id*=txttimeofreservation]').timepicker({
            'disableTimeRanges': pair
        });
    });
</script>
<div>
    <asp:TextBox ID="txttimeofreservation" runat="server"></asp:TextBox>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

[System.Web.Services.WebMethod]
public static string[] GetCurrentTime()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Date");
    dt.Rows.Add("01:00 AM");
    dt.Rows.Add("02:00 AM");
    dt.Rows.Add("03:00 AM");
    dt.Rows.Add("04:00 AM");
    string[] result = new string[dt.Rows.Count];
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        result[i] = dt.Rows[i][0].ToString();
    }
    return result;
}

VB.Net

<System.Web.Services.WebMethod()>
Public Shared Function GetCurrentTime() As String()
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("Date")
    dt.Rows.Add("01:00 AM")
    dt.Rows.Add("02:00 AM")
    dt.Rows.Add("03:00 AM")
    dt.Rows.Add("04:00 AM")
    Dim result As String() = New String(dt.Rows.Count - 1) {}

    For i As Integer = 0 To dt.Rows.Count - 1
        result(i) = dt.Rows(i)(0).ToString()
    Next

    Return result
End Function

Screenshot