时间戳

首页 > 解决方案 > 从ajax调用返回html并格式化

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

问题描述

根据我在 laravel 项目中的场景，客户可以从 datepicker 中选择一个日期。根据选择的日期，将向客户显示可用时间。我使用 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("-");
    }
});

标签： javascriptphphtmlajaxlaravel

解决方案

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

推荐阅读