javascript - 从 ajax 调用返回 html 并格式化它

Question

根据我在 Laravel 项目中的场景，客户可以从日期选择器中选择日期。根据所选日期，将向客户显示可用时间。我使用 Ajax 将选定的日期发送到数据库， Controller 从数据库中选择所有可用时间并作为 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));