Date renderers

Example model

Following example model is using date for grid view, form and view. These need to be aliased at import, as have the same short class name.

Imported aliases:

use Maslosoft\Widgets\Grid\Column\Date as GridDate;
use Maslosoft\Widgets\Renderers\Form\Date as FormDate;
use Maslosoft\Widgets\Renderers\View\Date as ViewDate;

Next code example defines model containing date field. For convenience model extends from MongoDocument, but could as well just implement AnnotatedInterface. To ensure proper date format on saving, loading as well as preparing from untrusted input, the date sanitizer is used.

class ExampleDate extends MongoDocument
{
    /**
     * @Label('Name')
     * @var string
     */
    public $name = '';
    /**
     * @Label('Issue date')
     * @GridRenderer(GridDate)
     * @FormRenderer(FormDate)
     * @ViewRenderer(ViewDate)
     * @Sanitizer(DateSanitizer)
     * @var UTCDateTime|null
     */
    public $issueDate = null;
}

Form with date as input

The input form features some ninja skills recognizing inputs such as +1 day or -1w thanks to date js.

Example form using ActiveForm:

And the code used to produce this form:

$model = new ExampleDate();
echo ActiveForm::widget([
    'model' => $model,
    'fields' => [
        '_id',
        'name',
        'issueDate'
    ]
]);

Viewing data of one element

The form is bound to model on client side too, so that it will reflect it's state on ActiveView too:

And the code used to produce this view:

$model = new ExampleDate();
echo ActiveView::widget([
    'model' => $model,
    'fields' => [
        'name',
        'issueDate'
    ]
]);

Viewing list of elements with grid

To display list of items containing model with date, the GridView can be used.

Example of using grid view with ArrayProvider and model created above:

$dp = new ArrayProvider(ExampleDate::class);
$dp->setData([$model]);
$grid = GridView::widget([
    'dataProvider' => $dp,
    'columns' => [
        '_id',
        'name',
        'createUser',
        'issueDate'
    ]
]);