How can I show certain times available depending on the date someone selects from datepicker?

manpreet Best Answer 3 years ago

So, I am using NodeJS, MongoDB, and Express to send user form data back and fourth.

1. I am trying to accomplish a specific scenario where a user can only select a date that I show as available

2. Depending on the date that he/she selects, it will only show a certain time.

3. Once someone has selected this date and time, another user cannot select it.

Would the querying be done via Nodejs server-side JS or can I use vanilla js from the ejs file.

For example, if someone selects 4/01/2019 at 5:30pm, that data will go to my MongoDB collection successfully.... I don't have an issue there, but if someone wanted to book that same date and time, what is the easiest way to prevent that from happening.

I guess this is a high-level question, but any suggestions would help.

I have tried manually inserting times into a collection, but I can't seem to get them into a dropdown in html. Any query that I make to the collection is done in the app.js file and there isn't a way to assign it to dropwdown values that I know of.

function initComponent() {
    unAvailableDates = ['04-01-2019', '04-08-2019']
    $('#date').datepicker({
        dateFormat: 'mm-dd-yy',
        startDate: "04-20-2015",
        endDate: "05-31-2020",
        beforeShowDay: function(d) {
            var dmy = (d.getMonth() + 1)
            if (d.getMonth() < 9)
                dmy = "0" + dmy;
            dmy += "-";

            if (d.getDate() < 10) dmy += "0";
            dmy += d.getDate() + "-" + d.getFullYear();

            console.log(dmy + ' : ' + ($.inArray(dmy, unAvailableDates)));

            if ($.inArray(dmy, unAvailableDates) == -1) {
                return [true, "", "Available"];

            } else {
                return [false, "", "unAvailable"];
            }
        },
        todayBtn: "linked",
        autoclose: false,
        todayHighlight: true
    });
}

Here I have a simple jQuery datepicker that shows available dates (hardcoded) and on submit, would send successfully to a database. How can I get an available time back for that day depending on the date selected?