从ajax调用返回html并将其格式化

Question

根据我在laravel项目中的情况，客户可以从日期选择器中选择一个日期。根据选择的日期，可用时间将显示给客户。我使用Ajax将选定的日期发送到数据库，控制器从数据库中选择所有可用时间，并作为ajax成功数据发送回去。我将所有时隙硬编码为引导单选按钮组，以向客户显示时间。我想禁用按钮组中具有ajax返回时间的按钮。我如何更改按钮的状态以根据Ajax返回数据禁用。如何使用javascript格式化html以执行此操作？

带时隙的日期选择器和硬编码按钮组。

Ajax返回的时间，根据选择的日期（控制台日志输出）

我使用过的Ajax代码

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

当API返回Date对象时，首先您必须处理Date并将其转换为12小时的时间格式，请使用formatDateToTime获取正确的时间，然后您使用此值启用禁用单选按钮：

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));