Invalid date shown in MySQL table when handling times and strings

Question

I have a data table that is storing a variety of dates and times and a string. The dates function perfectly, but the times and string are displayed as invalid time. Why does this happen?

here is an example of a response:

"permission_date": "2024-03-08T18:08:08.783Z", "permission_start_date": "2024-03-08T18:08:10.590Z", "permission_end_date": "2024-03-26T18:08:13.574Z", "permission_start_time": "04:00 AM", "permission_end_time": "06:00 PM", "justification": "asdf",

below is an abbreviated version of the table.

permission_date	permission_start_date	permission_start_time	justification
2024-03-08	2024-03-08	Invalid date	Invalid date

as demonstrated in the table the dates are handled fine, but everything else is not. My table helper where I format the data:

export const TableHelpers = {
    data() {
      return {
        tableColumns: [{
            title: this.$t('permission_date'),
            type: 'custom-html',
            key: 'permission_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_start_date'),
            type: 'custom-html',
            key: 'permission_start_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_start_time'),
            type: 'custom-html',
            key: 'permission_start_time',
            modifier: (value) => {
              return moment(String(value)).format('hh:mm');
            },
          },
          {
            title: this.$t('permission_end_date'),
            type: 'custom-html',
            key: 'permission_end_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_end_time'),
            type: 'custom-html',
            key: 'permission_end_time',
            modifier: (value) => {
              return moment(String(value)).format('hh:mm');
            },

          },
          {
            title: this.$t('justification'),
            type: 'custom-html',
            key: 'justification',
            modifier: (value) => {
              return moment(String(value));
            },
          },
        }
      },
    }

The modal in which the data is being inputed by the user.

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

Answer 1

By default I think moment() expects the argument to contain a date and time. To parse just a time without date, pass a second argument containing the format string.

            title: this.$t('permission_start_time'),
            type: 'custom-html',
            key: 'permission_start_time',
            modifier: (value) => {
              return moment(String(value), 'hh:mm a').format('hh:mm');
            },