日期时间值未显示在数据表中。如何处理 javascript (VueJS) 和 php (laravel) 之间的日期时间?

问题描述 投票:0回答:1

我试图从模式中收集用户输入的日期时间并将其存储在数据表中,尽管我收到成功消息,但日期时间值未添加到表中。

这是我的有效负载,其中仅出现状态和批准。

is_active : “1” 是_批准 : “1” 理由 : “萨德夫” 权限日期 : “2024-03-15T16:22:24.445Z” 权限结束日期 : “2024-03-22T16:22:31.444Z” 权限结束时间 : “下午 03:00” 权限开始日期 : “2024-03-15T16:22:26.572Z” 权限开始时间 : “凌晨 03:00”

我很确定我的问题是由 VueJS 和 PHP 之间对 dateTime 的可怕处理引起的,因为有效负载以字符串的形式保存所有正确的信息,这只是正确格式化它并将其传递给数据的问题表。

这是我的控制器:


    <?php

    namespace App\Http\Controllers;

    use App\Services\TdhpermissionsService;
    use Illuminate\Http\Request;
    use DateTime;

    class TdhpermissionsController extends Controller
    {
        public function __construct(
            tdhpermissionsService $tdhpermissionsService
        ) {
            $this->tdhpermissionsService = $tdhpermissionsService;
        }

        public function view()
        {
            return view('tdhpermissions.index');
        }

        //Listar registros
        public function index()
        {
            $data = $this->tdhpermissionsService
                // ->where('is_active', 1)
                ->paginate(request()->get('per_page', 10));
            return $data;
        }

        // Tomar 1 registro por $id
        public function show($id)
        {
            return $this->tdhpermissionsService->where('id', $id)->first();
        }

        // guardar registros
        public function store()
        {
            $data = $this->tdhpermissionsService->save();
            return created_responses('data', ['message' =>  'Creacion de registro exitosa', 'data' => $data]);
        }
        private function createDateTime($dateTimeString)
    {
        try {
            // Log the datetime string for debugging
            error_log("Attempting to create DateTime: DateTime: $dateTimeString");

            // Create DateTime object from ISO 8601 formatted string
            $dateTime = new DateTime($dateTimeString);

            // Return the DateTime object formatted as a string
            return $dateTime->format('Y-m-d H:i:s');
        } catch (\Throwable $e) {
            // Log any exceptions
            error_log("Exception in createDateTime: " . $e->getMessage());
            throw $e;
        }
    }

        //actualizar registros
        public function update($id)
        {
            $entity = $this->tdhpermissionsService->where('id', $id)->first();
            $data = $this->tdhpermissionsService->update($entity);
            return created_responses('data', ['message' =>  'Actualizacion de registro exitosa', 'data' => $data]);
        }

        // eliminar registros
        public function destroy($id)
        {
            $entity = $this->tdhpermissionsService->where('id', $id)->first();
            $data = $this->tdhpermissionsService->delete($entity);
            return created_responses('data', ['message' =>  'Eliminacion de registro exitosa', 'data' => $data]);
        }
    }

我尝试了两种不同的迁移,一种使用字符串类型的值,另一种使用日期类型,但两者都导致了相同的错误。

这是字符串类型的:

$table->String("permission_date");
$table->String("permission_start_date");
$table->String("permission_end_date");
$table->String("permission_start_time");
$table->String("permission_end_time");
$table->String("justification");

以及日期时间类型的:


$table->date("permission_date");
$table->dateTime("permission_start_date");
$table->dateTime("permission_end_date");
$table->dateTime("permission_start_time");
$table->dateTime("permission_end_time");
$table->String("justification");

这是我的模态,用户在其中设置这些值。

<script>
import { FormMixin } from '../../../../core/mixins/form/FormMixin';
import AppLibrary from '../../../Helpers/AppLibrary';
import { ModalMixin } from '../../../Mixins/ModalMixin';
import { DatePicker } from 'v-calendar/lib/v-calendar.umd';


export default {
    name: "tdhpermissionsModal",
    extends: AppLibrary,
    mixins: [FormMixin, ModalMixin],
    props: {
        tableId: String
    },
    data() {
        return {
            preloader: false,
            inputs: {

            },
            activeLists: [
                    {id: '0', value: "Inactivo"},
                    {id: '1', value: "Activo"},
                ],
            modalId: 'tdhpermissions-edit-Modal',
            modalTitle: this.$t('Crear nuevas permissiones'),
        }

    },
    created() {
        if (this.selectedUrl) {
            this.modalTitle = this.$t('edit');
            this.preloader = true;
        }
    },
    methods: {
        submit() {

            this.save
                (this.inputs);
        },
        afterSuccess(response) {
            this.$toastr.s(response.data.message);
            this.$hub.$emit('reload-' + this.tableId);
        },

        afterSuccessFromGetEditData(response) {
            this.inputs = response.data;
            this.preloader = false;
        },
    },
}
</script> 
<template>
<modal :modal-id="modalId" :title="modalTitle" :preloader="preloader" @submit="submit" @close-modal="closeModal">
    <template slot="body">
        <app-overlay-loader v-if="preloader" />
        <form class="mb-0" :class="{ 'loading-opacity': preloader }" ref="form" 
            :data-url='selectedUrl 
            ? `masterdata/tdhpermissions/${inputs.id}` 
            : `masterdata/tdhpermissions`'>
            <div class="form-group row align-items-center">
                <label class="col-md-12">
                    {{ $t('permission_date') }}
                </label>
                <app-input class="col-sm-8"
                           type="date"
                           v-model="inputs.permission_date"
                           :placeholder="$t('select_valid_date')"/>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-md-12">
                    {{ $t('permission_start_date') }}
                </label>
                <app-input class="col-sm-8"
                           type="date"
                           v-model="inputs.permission_start_date"
                           :placeholder="$t('select_valid_date')"/>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-md-12">
                    {{ $t('permission_start_time') }}
                </label>
                <app-input class="col-sm-8"
                           type="time"
                           v-model="inputs.permission_start_time"
                           :placeholder="$t('select_valid_time')"/>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-md-12">
                    {{ $t('permission_end_date') }}
                </label>
                <app-input class="col-sm-8"
                           type="date"
                           v-model="inputs.permission_end_date"
                           :placeholder="$t('select_valid_date')"/>
            </div>
            <div class="form-group row align-items-center">
                <label class="col-md-12">
                    {{ $t('permission_end_time') }}
                </label>
                <app-input class="col-sm-8"
                           type="time"
                           v-model="inputs.permission_end_time"
                           :placeholder="$t('select_valid_time')"/>
            </div>
            <div class="form-group row align-items-center">
                <label for="inputs_name" class="col-md-12">
                    {{ $t('Justification') }}
                </label>
                <app-input id="inputs_name" class="col-sm-9" type="textarea" 
                    v-model="inputs.justification"
                    :placeholder="$t('textarea_field')" :required="true" />
            </div>
            <div class="form-group row align-items-center " > <!--stlye="margin bottom: x px;"-->
                <label class="col-sm-3 mb-0">
                    {{ $t('Approval') }}
                </label>
                <app-input class="col-sm-9"
                           type="radio"
                           v-model="inputs.is_approve"
                           :list="activeLists"/>
            </div>
             
            <div class="form-group row align-items-center ">
                <label class="col-sm-3 mb-0">
                    {{ $t('Estado') }}
                </label>
                <app-input class="col-sm-9"
                           type="radio"
                           v-model="inputs.is_active"
                           :list="activeLists"/>
            </div>
        </form>
    </template>
</modal>
</template>

服务:

<?php

namespace App\Services;

use App\Services\Core\BaseService;
use App\Models\Tdhpermissions as Entity;

class TdhpermissionsService extends BaseService
{
    public function __construct(Entity $entity)
    {
        $this->model = $entity;
    }
    public function update(Entity $entity)
    {
        $entity->fill(request()->all());
        $this->model = $entity;
        $entity->save();
        return $entity;
    }
    public function delete(Entity $entity)
    {
        return $entity->delete();
    }
}
javascript php html vue.js datetime
1个回答
0
投票

由于 JavaScript 和 PHP 处理日期的方式不同,为了将它们从后端拉到前端,需要转换表格格式化程序本身显示此信息的方式。这是一个例子:

                    { 
                    title: this.$t('permission_date'),
                    type: 'custom-html',
                    key: 'permission_date',
                    modifier: (value) => {
                        return moment(String(value)).format('YYYY-MM-DD');
                    },
                },
© www.soinside.com 2019 - 2024. All rights reserved.