文章彙整

解決 Magento 2 後台無法顯示 Datetime 欄位

By Sabina 10 months agoNo Comments
首頁  /  Magento  /  Magento-2  /  解決 Magento 2 後台無法顯示 Datetime 欄位

Magento 2 中,後台可以透過 ui conponent 產生 layoutgrid,欄位也有多種選擇,像是 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 之外,還必須在 itemname 裡面寫入 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的粉絲專頁,收看我們不定時發布的消息進一步對電商有更深入的了解!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。