README

此包针对Laravel Nova，旨在改进默认日期和日期时间字段。原始字段的问题在于，它对自定义日期格式化选项非常有限。

此包提供的\Gabelbart\Laravel\Nova\Fields\Date\Date和\Gabelbart\Laravel\Nova\Fields\Date\DateTime字段是从原始的\Laravel\Nova\Fields\Date和\Laravel\Nova\Fields\DateTime字段派生出来的。然而，Vue组件被替换为一个更可定制的版本，仍然使用luxon包。此包可以与laravel Nova的本地Date/Datetime字段共存。

此包还提供了一个选项，可以使用flatpickr，因为某些浏览器对type="datetime-local"输入字段的完整支持不完整。仅当在Firefox桌面（enableFirefoxFlatpickr）和Safari（enableSafariFlatpickr）时，才会启用flatpickr。

要求

• php: ^8.0
• laravel/nova: ^4.0

使用

安装

使用Composer安装此包

composer require gabelbart/nova-improved-date-field

入门

就像使用默认的Laravel Nova日期（时间）字段一样使用它。有关自定义行为和外观的选项，请参阅下面的说明。

<?php

namespace App\Nova;

use Laravel\Nova\Fields\ID;
use Laravel\Nova\Http\Requests\NovaRequest;

use Gabelbart\Laravel\Nova\Fields\Date\DateTime;

class User extends Resource
{
    public static $model = \App\Models\User::class;
    public static $title = 'name';
    public static $search = ['id'];

    public function fields(NovaRequest $request): array
    {
        return [
            ID::make()->sortable(),

            DateTime::make('Email verified at'),
        ];
    }

    // snip...
}

或者只需将\Laravel\Nova\Fields\DateTime或\Laravel\Nova\Fields\Date的导入替换为\Gabelbart\Laravel\Nova\Fields\Date\DateTime或\Gabelbart\Laravel\Nova\Fields\Date\Date。

选项

enableFirefoxFlatpickr(bool $flag = true)/enableSafariFlatpickr(bool $flag = true)

Firefox/Safari对datetime-local字段的实现不完整。对于日期，提供了一个选择器，但时间必须手动输入。这可能会让一些用户感到困惑。将此选项设置为true将启用Firefox桌面浏览器中的flatpickr。

\Gabelbart\Laravel\Nova\Fields\Date\DateTime::make('Created at')
  ->enableFirefoxFlatpickr()
  ->enableSafariFlatpickr();

如果您需要用户能够清除字段，请使用Laravel Nova字段的nullable选项。这将在flatpickr对话框中启用清除按钮。

intlDateFormatOptions(array $options)

为luxon's DateTime.toLocaleString方法设置Intl.DateTimeFormat参数。在Novas Vue组件的原生实现中，这些是硬编码的。

无法更改选择器输入的格式，这始终将是浏览器定义的格式！

\Gabelbart\Laravel\Nova\Fields\Date\DateTime::make('Created at')
  ->intlDateFormatOptions([
    'year' => 'numeric',
    'month' => '2-digit',
    'day' => '2-digit',
    'hour' => '2-digit',
    'minute' => '2-digit',
  ]);

有关所有可能选项的完整列表，请参阅MDN文档。

timezone(?string $timezone)

默认情况下，字段将使用通过Nova配置的时间区域。使用此选项可以更改用于显示日期的时间区域。使用null调用此选项以撤销先前的对timezone的调用。

\Gabelbart\Laravel\Nova\Fields\Date\DateTime::make('Created at')
  ->timezone('Africa/Nairobi');

在timezonedb.com上查看完整的时间区域列表。

showTimezone(bool $flag)

显示值的时区。在索引/详情页面，这将设置 timeZoneName，用于 Intl.DateTimeFormat。在表单中，这将显示输入背后的时区名称。

!!! 此选项可能与 intlDateFormatOptions 冲突

• 如果您将其设置为 false 但为 intlDateFormatOptions 配置了 timeZone 选项，它仍然会显示时区。
• 如果您将其设置为 true，则 intlDateFormatOptions 的 timeZone 选项将被 timezoneName 覆盖

您可以使用这些选项来微调索引、详情和表单的可见性

• showTimezoneOnIndex
• showTimezoneOnDetail
• showTimezoneOnForms

timezoneName(string $name)

更改时区的显示。这仅在与 showTimezone(true) 结合时有效。可能的值可以在 Intl.DateTimeFormat 的 MDN 文档 中找到。

您可以使用这些选项来微调索引、详情和表单的显示

• timezoneNameOnIndex
• timezoneNameOnDetail
• timezoneNameOnForms

showDiff(bool $flag = true)

使用 luxon 的 DateTime.toRelative 方法创建差异。在表单中，这将显示在输入背后的差异，并实时更新到通过输入设置的日期。

您可以使用这些选项来控制索引、详情和表单的差异显示

• showDiffOnIndex
• showDiffOnDetail
• showDiffOnForms

showDiffAsPrimaryInformation(bool $flag = true)

默认情况下，通过 showDiff 启用的差异将显示在日期后面的括号中。您可以反转此行为，通过设置此选项。差异将作为主要值显示，日期将显示在它后面的括号中。

comment(?string $comment = null)

在值后面显示一条评论。如果您通过 timezone 选项更改了时区，但不是用户/应用的时区，这特别有用。

hideCommentFromIndex(bool $flag = true)

防止评论在索引列中显示，以节省空间。

建议

此步骤是可选的，但我建议您从 \Gabelbart\Laravel\Nova\Fields\Date\DateTime 和 \Gabelbart\Laravel\Nova\Fields\Date\Date 派生自己的类。这样，您将能够提高代码的一致性、可维护性和可读性！

在您的自定义类中，您可以预先定义您在应用程序中旨在使用的格式常量，如 \App\Nova\DateTime::FORMAT_SHORT 或 \App\Nova\DateTime::FORMAT_LONG（有关详细信息，请参阅 intlDateFormatOptions）。您还可以预定义您想要在方法中组合的选项集，以维护DRY原则。

替代方案

您可以将 \Gabelbart\Laravel\Nova\Fields\Date\DateTime 和 \Gabelbart\Laravel\Nova\Fields\Date\Date 配置为具有全局默认值。这可以通过 setDefaults 和 addDefaults 静态方法来完成。在您的 \App\Providers\NovaServiceProvider::boot 方法中调用这些方法。setDefaults 方法替换所有现有的默认值，而 addDefaults 方法将已注册的默认值与参数中传递的默认值合并。参数是一个数组 option => [value]，有关可能的选项，请参阅下文“选项”部分。