解決 Magento 2 後台無法顯示 Datetime 欄位
Magento 2 中，後台可以透過 ui conponent 產生 layout 跟 grid，欄位也有多種選擇，像是 Text、Textarea、Select 等等，但是 Datetime 欄位顯示的時候僅有日期選擇器的部分，沒有時間，導致實務應用上的不便。這也是 Magento 的 Issue 之一，今天我們就來看看怎麼解決吧！
1. 新增 Attribute
通常會寫在 InstallData.php 內，今天我們就不特別說明新增的部分 但是在新增的時候，需要 給予 input_renderer 選項，裡面填寫自定義的 Class。
$eavSetup->addAttribute( \Magento\Catalog\Model\Product::ENTITY, 'datetime_example', 'label' => 'datetime example', 'type' => 'datetime', 'input' => 'date', 'input_renderer' => Datetime::class, 'class' => 'validate-date', 'backend' => Startdate::class, 'required' => false, 'global' => ScopedAttributeInterface::SCOPE_GLOBAL, 'visible' => true, 'searchable' => false, 'filterable' => false, 'filterable_in_search' => false, 'visible_in_advanced_search' => false, 'comparable' => false, 'visible_on_front' => false, 'used_in_product_listing' => false, 'unique' => false );
2. 自定義 class
這邊的 class 個人是習慣放置於 Ui\DataProvider\Product\Form\Modifier 這個資料夾內，當然你也可以放置於自己喜歡的 namespace，而另外要注意的是，FIELD_CODE 常數內的 code 就是 Attribute Code，一定要跟剛剛設定的一樣。
<?php
namespace Vendor\Extension\Ui\DataProvider\Product\Form\Modifier;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;
/**
* Class Datetime
* @package Vendor\Extension\Ui\DataProvider\Product\Form\Modifier
*/
class Datetime extends AbstractModifier
{
const FIELD_CODE = 'datetime_example';
/**
* @param ArrayManager $arrayManager
*/
public function __construct(
ArrayManager $arrayManager
)
{
$this->arrayManager = $arrayManager;
}
/**
* {@inheritdoc}
*/
public function modifyMeta(array $meta)
{
$meta = $this->enableTime($meta);
return $meta;
}
/**
* {@inheritdoc}
*/
public function modifyData(array $data)
{
return $data;
}
/**
* @param array $meta
* @return array
*/
protected function enableTime(array $meta)
{
$elementPath = $this->arrayManager->findPath(self::FIELD_CODE, $meta, null, 'children');
$containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . self::FIELD_CODE, $meta, null, 'children');
if (!$elementPath) return $meta;
$meta = $this->arrayManager->merge(
$containerPath,
$meta,
[
'children' => [
self::FIELD_CODE => [
'arguments' => [
'data' => [
'config' => [
'default' => '',
'options' => [
'dateFormat' > 'Y-m-d',
'timeFormat' => 'HH:mm:ss',
'showsTime' => true
]
],
],
],
]
]
]
);
return $meta;
}
}
3. 使用 modifiers 重新定義欄位
有了欄位資料之後，需要使用 modifiers 來取代原本的設定，首先要建立 etc/adminhtml/di.xml 並且貼上以下程式，這邊除了要在 class 欄位指定剛剛新增的 class 之外，還必須在 item 的 name 裡面寫入 Attribute Code ，如此一來才能完成定義。
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="datetime_example" xsi:type="array"> <item name="class" xsi:type="string">Vendor\Extension\Ui\DataProvider\Product\Form\Modifier\Datetime</item> <item name="sortOrder" xsi:type="number">100</item> </item> </argument> </arguments> </virtualType> </config>
4. 更改前的 Datatime picker
5.更改後的 Datatime picker
適用版本
- Magento 2.1、2.2
參考連結: Magento Issue
若想了解更多，請關注我們對Magento的教學導覽，或是關注我們Facebook的粉絲專頁，收看我們不定時發布的消息進一步對電商有更深入的了解！
我要留言