在第二次点击输入之前,Pikaday初始化不起作用

问题描述

劳动节日历仅在我单击输入文本框两次后显示。 我希望它一按即可。

var datePickerFrom = document.getElementById("datepickerFrom");
$(document).ready(function() {
    datePickerFrom.addEventListener("click",async function () {
        console.log('hello');
        picker = new pikaday({
            field: document.getElementById('datepickerFrom'),firstDay: 1,minDate: new Date(),onSelect: function() {
                timePickerFrom.value = "";
                timePickerTo.value = "";
                datePickerTo.value = "";
                toTimeEl.setAttribute("class","col-lg-6 d-none");
                toDateEl.setAttribute("class","col-lg-6 d-none");
                if (typeof picker2 !== "undefined"){
                    location.reload();
                }
                var date = this._d;
                isoDateFrom = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0,10);
                var [yearF,monthF,dayF] = isoDateFrom.split("-");
                monthF = monthF - 1;
                fromD = new Date(yearF,dayF);
                dateFrom = fromD;
                //from time input
                var today = new Date();
                var dd = String(today.getDate()).padStart(2,'0');
                var mm = String(today.getMonth() + 1).padStart(2,'0'); //January is 0!
                var yyyy = today.getFullYear();
        
                today = yyyy + '-' + mm + '-' + dd;
                //only if selected from date equals to today's date,then strict restriction
                if (isoDateFrom != today){
                    minTimeF = '09:00am';
                }
                $('#timepickerFrom').timepicker({
                    'minTime': minTimeF,'maxTime': '11:00pm','scrollDefault': 'Now'
                });
                fromTimeEl.setAttribute("class","col-lg-6 d-block");
                $('#timepickerFrom').on('changeTime',function() {
                    //to add half an hour to chosen time for processing of min time for timepickerto if same day.
                    let rawValue = this.value;
                    let rawTime = rawValue.slice(0,rawValue.length-2) //4:00pm
                    var is_AM = true;
                    if (rawValue.slice(rawValue.length-2,) != "am"){
                        is_AM = false;
                    }
                    const [hourF,minF] = rawTime.split(":");
                    fromDT = new Date(yearF,dayF,hourF,minF);
                    timeFrom = fromDT.addHours(0.5);
                    timeFrom = timeFrom.toString().slice(16,21);
                    if (is_AM === true){
                        timeFrom = timeFrom + "am"
                    } else {
                        timeFrom = timeFrom + "pm"
                    }
                    // to add a space between time and am/pm so to use the function 
                    var timeF = this.value;
                    var processedTimeF = timeF.slice(0,timeF.length-2); //4:00pm
                    processedTimeF += " " + timeF.slice(timeF.length-2,);
                    isoTimeFrom = convertTime12to24(processedTimeF);
                    //to date input
                    var toDateEl = document.getElementById("toDate");
                    toDateEl.setAttribute("class","col-lg-6 d-block");
                    picker2 = new pikaday({
                        field: document.getElementById('datepickerTo'),minDate: dateFrom,onSelect: function() {
                            var date = this._d;
                            isoDateto = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0,10);
                            var [yearT,monthT,dayT] = isoDateto.split("-");
                            monthT = monthT - 1;
                            //to time input
                            var minTime = '09:00am';
                            //only if its the same day,then strict restriction
                            if (isoDateFrom == isoDateto){
                                minTime = timeFrom;
                            }
                            $('#timepickerTo').timepicker({
                                'minTime': minTime,'maxTime': '11:00pm'
                            });
                            var toTimeEl = document.getElementById("toTime");
                            toTimeEl.setAttribute("class","col-lg-6 d-block");
                            $('#timepickerTo').on('changeTime',function() {
                                var time = this.value;
                                var processedTimeT = time.slice(0,time.length-2);
                                processedTimeT += " " + time.slice(time.length-2,);
                                isoTimeto = convertTime12to24(processedTimeT);
                                toD = new Date(yearT,dayT);
                                msg.innerHTML = "From " + fromD.toString().slice(0,15) + " " + timeF + " to " + toD.toString().slice(0,15) + " " + this.value + ",";
                                var isoDTFrom = isoDateFrom + "T" + isoTimeFrom + ":00";
                                var isoDTTo = isoDateto + "T" + isoTimeto + ":00";
                                //allow choosing of seats
                                var chooseSeats = document.getElementById("chooseSeats");
                                chooseSeats.setAttribute("class","row");
                                var userCookie = getCookie('user');
                                const user = JSON.parse(userCookie);
                                var loading = document.getElementById("loading");
                                var confirmBtn = document.getElementById("confirmBtn");
                                var seatsDropdownBtn = document.getElementById("seatsDropdown");
                                seatsDropdownBtn.addEventListener("click",function (){
                                    $("#specificationsDropdown").html("");
                                    $("#specificationsDropdown2").html("");
                                    $("#specificationsDropdown3").html("");
                                    msg.setAttribute("class","card-text d-none");
                                    var string = msg.innerHTML;
                                    var selected = false;
                                    if (string.search("continue.") > -1) {
                                        selected = true;
                                    }
                                    if (selected == true){
                                        var arr = string.split(",");
                                        console.log(arr);
                                        msg.innerHTML = arr[0] + ",";
                                    }
                                });
                                for (let i = 0; i < seatsDropdownItems.length; i++) {
                                    seatsDropdownItems[i].addEventListener('click',function () {
                                        var selection = this.id; 
                                        if (selection == "odd" || selection == "even") {
                                            fetchData('GET',"http://localhost:5001/get_seats/",)
                                            .then(data => {
                                                msg.innerHTML += "you are blocking all the " + selection + " seats! Press confirm to continue.";
                                                msg.setAttribute("class","card-text d-block");
                                                confirmBtn.setAttribute("class","row justify-content-center d-block");
                                                confirmBtn.addEventListener("click",function () {
                                                    loading.setAttribute("class","row d-block");
                                                    var oddReservations = [];
                                                    var evenReservations = [];
                                                    var seats = data.seats;
                                                    for (seat of seats){
                                                        if (seat.id %2 ==0){
                                                            var evenReservationjsON = {"student_id": user.user_id,"library_id": seat.library_id,"seat_id": seat.id,"floor": seat.floor,"section": seat.section,"start": isoDTFrom,"end": isoDTTo};
                                                            evenReservations.push(evenReservationjsON);
                                                        } else {
                                                            var oddReservationjsON = {"student_id": user.user_id,"end": isoDTTo};
                                                            oddReservations.push(oddReservationjsON);
                                                        }
                                                    }
                                                    if (selection == "odd"){
                                                        create_reservation_bulk(oddReservations);
                                                    } else {
                                                        create_reservation_bulk(evenReservations);
                                                    }
                                                });
                                            });
                                        } else {
                                            fetchData('GET',"http://localhost:5001/get_libraries/",)
                                                .then(data => {
                                                    var libraries = data.libraries;
                                                    var specificationsDropdown = document.getElementById("specificationsDropdown");
                                                    var html_str = `<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    Choose Library
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`;
                                                    for (var library of libraries){
                                                        html_str += `<button class = "dropdown-item libraries" id = "${library.id}" value = "${library.name}">${library.name}</button>`;
                                                    }
                                                    html_str += `</div>`;
                                                    specificationsDropdown.innerHTML = html_str;
                                                    var librariesDropdownItems = document.getElementsByClassName("libraries");
                                                    for (let j = 0; j < librariesDropdownItems.length; j++) {
                                                        librariesDropdownItems[j].addEventListener('click',function () {
                                                            library_id = this.id;
                                                            library = this.value;
                                                            if (selection == "floor" || selection =="section") {
                                                                var specificationsDropdown2 = document.getElementById("specificationsDropdown2");
                                                                var html_str2 = `<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                Choose Floor
                                                                </button>
                                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`;
                                                                for (let el of libraries){
                                                                    if (el.id == library_id){
                                                                        var numOfFloors = el.floors;
                                                                    }
                                                                }
                                                                for (let k = 2; k < numOfFloors+2; k ++){
                                                                    html_str2 += `<button class = "dropdown-item floors" id = "${k}" value = "${k}">${k}</button>`;
                                                                }
                                                                html_str2 += `</div>`;
                                                                specificationsDropdown2.innerHTML = html_str2;
                                                                var floorsDropdownItems = document.getElementsByClassName("floors");
                                                                //var floorReservationjsON = {"student_id": user.user_id,"end": isoDTTo};
                                                                for (let a = 0; a < floorsDropdownItems.length; a++) {
                                                                    floorsDropdownItems[a].addEventListener('click',function () {
                                                                        floor = this.id;
                                                                            if (selection == "section"){
                                                                                var specificationsDropdown3 = document.getElementById("specificationsDropdown3");
                                                                                var html_str3 = `<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                Choose Section
                                                                                </button>
                                                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`;
                                                                                postData = {
                                                                                    "library_id": library_id,"floor": floor
                                                                                }
                                                                                fetchData('GET',"http://localhost:5001/get_sections_by_library_floor/",postData)
                                                                                    .then(data => {
                                                                                        var sectionsArr = data.sections;
                                                                                        for (let section of sectionsArr){
                                                                                            html_str3 += `<button class = "dropdown-item sections" id = "${section.section}" value = "${section.venue}">${section.venue}</button>`;
                                                                                        }
                                                                                        html_str3 += `</div>`;
                                                                                        specificationsDropdown3.innerHTML = html_str3;
                                                                                        var sectionsDropdownItems = document.getElementsByClassName("sections");
                                                                                        for (let a = 0; a < sectionsDropdownItems.length; a++) {
                                                                                            sectionsDropdownItems[a].addEventListener('click',function () {
                                                                                                section_id = this.id;
                                                                                                section = this.value;
                                                                                                msg.innerHTML += "you are blocking section " + section + " of floor " + floor + " of " + library + "! Press confirm to continue.";
                                                                                                msg.setAttribute("class","card-text d-block");
                                                                                                confirmBtn.setAttribute("class","row justify-content-center d-block");
                                                                                                confirmBtn.addEventListener("click",function () {
                                                                                                    loading.setAttribute("class","row d-block");
                                                                                                    specificationsDropdown.innerHTML="";
                                                                                                    specificationsDropdown2.innerHTML="";
                                                                                                    specificationsDropdown3.innerHTML="";
                                                                                                    postData = {
                                                                                                        "library_id": library_id,"floor": floor,"section": section_id
                                                                                                    }
                                                                                                    fetchData('GET',"http://localhost:5001/get_seats_by_library_floor_section/",postData)
                                                                                                        .then(data => {
                                                                                                            var sectionReservations = [];
                                                                                                            var seats = data.seats;
                                                                                                            for (seat of seats){
                                                                                                                var sectionReservationjsON = {"student_id": user.user_id,"end": isoDTTo};
                                                                                                                sectionReservations.push(sectionReservationjsON);
                                                                                                            }
                                                                                                            create_reservation_bulk(sectionReservations);
                                                                                                        });
                                                                                                });
                                                                                            });
                                                                                        }
                                                                                    });
                                                                            }  else {
                                                                                        msg.innerHTML += "you are blocking floor " + floor + " of " + library + "! Press confirm to continue.";
                                                                                        msg.setAttribute("class","card-text d-block");
                                                                                        confirmBtn.setAttribute("class","row justify-content-center d-block");
                                                                                        confirmBtn.addEventListener("click",function () {
                                                                                            loading.setAttribute("class","row d-block");
                                                                                            specificationsDropdown.innerHTML="";
                                                                                            specificationsDropdown2.innerHTML="";
                                                                                            postData = {
                                                                                                "library_id": library_id,"floor": floor
                                                                                            }
                                                                                            fetchData('GET',"http://localhost:5001/get_seats_by_library_floor/",postData)
                                                                                                .then(data => {
                                                                                                    var floorReservations = [];
                                                                                                    var seats = data.seats;
                                                                                                    for (seat of seats){
                                                                                                        var floorReservationjsON = {"student_id": user.user_id,"end": isoDTTo};
                                                                                                        floorReservations.push(floorReservationjsON);
                                                                                                    }
                                                                                                    create_reservation_bulk(floorReservations);
                                                                                                });
                                                                                        });
                                                                            }
                                                                    });
                                                                }
                                                            }  else {
                                                                for (let j = 0; j < librariesDropdownItems.length; j++) {
                                                                    librariesDropdownItems[j].addEventListener('click',function () {
                                                                        msg.innerHTML += "you are blocking " + library + "! Press confirm to continue.";
                                                                        confirmBtn.setAttribute("class","row justify-content-center d-block");
                                                                        confirmBtn.addEventListener("click",function () {
                                                                            loading.setAttribute("class","row d-block");
                                                                            specificationsDropdown.innerHTML="";
                                                                            postData = {
                                                                                "library_id": library_id,}
                                                                            fetchData('GET',"http://localhost:5001/get_seats_by_library/",postData)
                                                                                .then(data => {
                                                                                    var libraryReservations = [];
                                                                                    var seats = data.seats;
                                                                                    for (seat of seats){
                                                                                        var libraryReservationjsON = {"student_id": user.user_id,"end": isoDTTo};
                                                                                        libraryReservations.push(libraryReservationjsON);
                                                                                    }
                                                                                    create_reservation_bulk(libraryReservations);
                                                                                });
                                                                        });
                                                                    });
                                                                }
                                                            }
                                                        });
                                                    }
                                                });
                                        }
                                    });
                                }
                                fromD = "";
                                toD = "";
                            });
                        }
                    });
                });
            }
        });
    });
    
});

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)