繁体   English   中英

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

[英]Showing time from Jquery time-picker after setting custom css effect in few time rows on condition

设置 css 效果后无法显示时间选择器。 尝试过 beforeShow 方法,但 beforeShow 也没有触发,虽然我不知道 beforeShow 是否适合我的目的,因为我从未使用过 beforShow。

现在的情景是


目前我正在单击文本框设置 css 效果以显示时间选择器,因此当我通过 jquery ajax 调用获取可用时间然后在这些时间设置 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文本。

请告诉我一个好的方法。

好吧最后我自己修好了。 我不得不为 txtExamDate 的更改事件而不是 txtArrivalTime 的单击事件编写相同的代码。 :) 对不起我的坏...那太容易了。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM