Stan Barrows
Stan Barrows

Reputation: 973

Laravel Nova: Convert Datetime to readable output

Is there an option in Laravel Nova to display an readable date-time output and/or limit the output?

For example to : 29. October 2018 / 11. November 2018, 12:10 am

Datetime

Code:

   DateTime::make('Start')
                ->rules('required')
                ->sortable(),

Upvotes: 9

Views: 10698

Answers (5)

vesperknight
vesperknight

Reputation: 770

Add this to your NovaServiceProvider's boot method

Field::macro('withFriendlyDate', function () {
    return new MergeValue([
        $this->onlyOnForms(),
        Text::make($this->name)
            ->exceptOnForms()
            ->displayUsing(function ($d) {
                return sprintf('<div class="flex flex-col">
                    <div class="text-sm text-gray-500">%s</div>
                    <div class="text-lg">%s</div>
                </div>',
                    $d->diffForHumans(),
                    $d->format('Y-m-d H:i:s')
                );
            })
            ->asHtml(),
    ]);
});

Then you can add it to any DateTime field (or even others) like this

DateTime::make('Day Starts At')
    ->rules('required')
    ->withFriendlyDate(),

Upvotes: 0

Grant
Grant

Reputation: 6349

This is achieved in Nova 4.0+ with the displayUsing method:

DateTime::make('Updated', 'updated_at')
->displayUsing(fn ($value) => $value ? $value->format('D d/m/Y, g:ia') : '')

Upvotes: 22

Alexander Budovsky
Alexander Budovsky

Reputation: 1

We also faced such a problem. This solution DateTime::make('Start')->format('DD MMMM YYYY'), helps only for index page, but didn't help for Edit page. I don't know when this bug will be fixed in new Nova releases but we temporary used small hardcoding.

    1. nova/src/Fields/Date.php
 instead: return $value->format('Y-m-d');
 use this one: return $value->format('m/d/Y');
    1. nova/resources/js/components/Form/DateField.vue
 In this vue component also should be changed a date format: dateFormat="m/d/Y".
    1. nova/resources/js/components/Form/DateField.vue
 For placeholder method use this one:
     return this.field.placeholder || moment().format('MM/DD/YYYY')
Instead this:
     return this.field.placeholder || moment().format('YYYY-MM-DD')
    1. Also You should use Mutator in Your App\Model class if you store data in the database in another format. Something like this:

    public function setLastUsedAttribute($value){
          $date = Carbon::createFromFormat('m/d/Y', $value);
          $this->attributes['last_used'] = $date->format('Y-m-d');
    }

Upvotes: 0

r00t
r00t

Reputation: 466

As per documentation https://nova.laravel.com/docs/1.0/resources/fields.html#datetime-field

use Laravel\Nova\Fields\DateTime;

DateTime::make('Start')->format('DD MMMM YYYY'),

Must use Moment.js formatting rules https://momentjs.com/docs/#/displaying/format/

Upvotes: 11

Shailendra Gupta
Shailendra Gupta

Reputation: 1128

use this, hope it will works

Date::make('start')->format('F j, Y'),

Upvotes: 3

Related Questions