从ajax调用返回html并格式化

Question

According to my scenario in my laravel project, A customer can select a date from datepicker. according to the selected date, available times will be display to the customer. I used Ajax to send the selected date to the database, the controller select all available times from database and send back as ajax success data. I hard coded the all time slots as bootstrap radio button group to show the times to customer. I want to disable the buttons with ajax returned times among the button group. how can I change the status of the buttons to disable according to ajax return data. how can I format the html with javascript to perform this?

Datepicker and hard coded button group with time slots.

Ajax returned times, according to selected date (console log output)

Ajax code I have used

const $datepicker = $('#date').datepicker({
    format: 'yyyy-mm-dd'
});

$datepicker.on('changeDate', function (e) {
    $.ajax({
        type: "POST",
        url: '/process_date',
        data: {
            date: convert(e.date.toString()),
        },
        success: function (result) {
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        }
    });

    function convert(str) {
        var date = new Date(str),
            month = ("0" + (date.getMonth() + 1)).slice(-2),
            day = ("0" + date.getDate()).slice(-2);
        return [date.getFullYear(), month, day].join("-");
    }
});

Answer 1

As API is returning Date object, first you have to process Date to convert it into time format of 12 Hours, please use formatDateToTime to get the correct time, and then you use this value to enable disable radio buttons:

 function formatDateToTime(date) { var hours = date.getHours(); var minutes = date.getMinutes(); var ampm = hours >= 12 ? 'pm' : 'am'; hours = hours % 12; hours = hours ? hours : 12; // the hour '0' should be '12' minutes = minutes < 10 ? '0'+minutes : minutes; var strTime = hours + ':' + minutes + ' ' + ampm; return strTime; } var dt = new Date( "December 25, 1995 23:15:20" ); console.log(formatDateToTime(dt));