在条件下在几个时间行中设置自定义css效果后显示来自Jquery时间选择器的时间

时间:2016-04-07 07:34:32

标签: javascript jquery html css timepicker

在设置css效果后显示时间戳有问题。尝试过beforeShow方法,但是之前的事情也没有解雇,虽然我不知道之前显示是否会起作用,因为我从未使用过beforShow。

现在情景

目前我正在设置单击文本框以显示timepicker的css效果,因此我通过jquery ajax call&获取可用时间。然后在那些时间设置css效果,以便点击文本框时css效果显示在后面&有闪烁的效果,我不知道。我想在设置所有css效果后显示timepicker下拉列表。

这就是我设置TimePicker的方式

    $(".txtArrivalTime").timePicker({

        startTime: "05:30",
        step: 15

       , onSelect: function (dateText, inst) {

          // console.log(dateText);
       }
//, beforeShow () {
//}
    });

这就是我设置css效果

的方法
 // Highlight Available Time Slots
$(".txtArrivalTime").click(function () {
    $(".time-picker>ul>li.AvaiableTime").removeClass("AvaiableTime");
    $(".time-picker>ul>li.RemoveAvailableTime").removeClass("RemoveAvailableTime");

    var custID = $("#hfCustomerID").val();
    var realdate = $("#txtExamDate").datepicker("getDate");
    var date = $("#txtExamDate").val();
    date = date == "Locked" ? "" : date
    var DayOfWeek = realdate ? realdate.getDay() : null;

    //$("#time_07_00").css("background-color", "gray");



    $.ajax({
        url: "/Data/Services/CustomersUsers.asmx/GetCustomerTimeSlots",
        type: "POST",
        dataType: "json",
        data: JSON.stringify({ ID: custID, DayOfWeek: DayOfWeek, ShowInactive: false, SelectedDate: date }),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            data = data.d;
            if (data.hasAnySlots && data.slots.length) {

                $.each(data.slots, function (i, slot) {
                    var Hrs = "00" + slot.timeSlot.Hours;
                    Hrs = Hrs.substr(Hrs.length - 2);
                    var Mins = "00" + slot.timeSlot.Minutes;
                    Mins = Mins.substr(Mins.length - 2);
                    var time = Hrs + ":" + Mins;
                    var rtime = time.replace(':', '_');
                    $("#time_" + rtime).removeClass("RemoveAvailableTime");
                    $("#time_" + rtime).addClass("AvaiableTime");
                });

            }
            $.ajax({
                url: "/Data/Services/CustomersUsers.asmx/GetTakenCustomerTimes",
                type: "POST",
                dataType: "json",
                data: JSON.stringify({ custID: custID, date: date, poid: $("#patientOrderID").val() }),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    data = data.d;

                    $.each(data, function (i, slot) {
                        var Hrs = "00" + slot.Hours;
                        Hrs = Hrs.substr(Hrs.length - 2);
                        var Mins = "00" + slot.Minutes;
                        Mins = Mins.substr(Mins.length - 2);
                        var time = Hrs + ":" + Mins;
                        var rtime = time.replace(':', '_');
                        $("#time_" + rtime).removeClass("AvaiableTime");
                        $("#time_" + rtime).addClass("RemoveAvailableTime");
                    });

                }
            });
        }
    });


});

//注意:可用时间我通过ajax调用获取时间并在timepicker中设置css效果取决于txtExamDate文本。 < / p>

请告诉我一个很好的方法。

1 个答案:

答案 0 :(得分:0)

好的最后我自己修好了。我必须为txtExamDate的更改事件编写相同的代码,而不是txtArrivalTime的click事件。对不起我的坏...那太容易了。