处理时间和字符串时 MySQL 表中显示的日期无效

Question

我有一个存储各种日期和时间以及一个字符串的数据表。日期功能完美，但时间和字符串显示为无效时间。为什么会出现这种情况？

以下是响应示例：

“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", "理由": "asdf",

下面是该表的缩写版本。

许可_日期	permission_start_date	权限开始时间	理由
2024-03-08	2024-03-08	日期无效	日期无效

如表中所示，日期处理得很好，但其他一切都不是。 我的表格助手，用于格式化数据：

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

用户输入数据的模式。

<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

默认情况下，我认为

moment()

希望参数包含日期和时间。要仅解析没有日期的时间，请传递包含格式字符串的第二个参数。

            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');
            },