{"id":1443,"date":"2020-12-03T05:19:23","date_gmt":"2020-12-03T05:19:23","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-date-using-dynamic-field-in-system-xml-file-in-magento-2\/"},"modified":"2025-06-16T15:44:27","modified_gmt":"2025-06-16T10:14:27","slug":"add-date-using-dynamic-field-in-system-xml-file-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-date-using-dynamic-field-in-system-xml-file-in-magento-2\/","title":{"rendered":"How to Add Date Using Dynamic Field in system.xml File in Magento 2"},"content":{"rendered":"\n

Magento 2 CMS is a widely used platform to develop online stores. Owing to the flexibility of customization, the CMS is preferred to cater to modern business requirements.<\/p>\n\n\n\n

Here, I\u2019ve posted a similar solution that you can implement if your business requires to configure settings based on the calendar dates from the system configuration.<\/p>\n\n\n\n

For example, you may want to restrict certain dates for delivery that are national holidays, or set exclusive offers for a certain period of time.<\/p>\n\n\n\n

\"add<\/figure>\n\n\n\n

Such functionalities can be implemented easily with the programmatic solution to add date using dynamic field in system.xml in Magento 2<\/strong><\/em> store.<\/p>\n\n\n\n

Method to Add Date Using Dynamic Field in system.xml File in Magento 2:<\/h2>\n\n\n\n

1. Create registration.php<\/strong><\/em> file at app\\code\\Vendor\\Module directory<\/strong><\/strong><\/p>\n\n\n\n

<?php\nuse \\Magento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);<\/pre>\n\n\n\n
2. Create module.xml<\/strong><\/em> file at app\\code\\Vendor\\Module\\etc directory<\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Vendor_Module\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
3. Create system.xml<\/strong><\/em> file at app\\code\\Vendor\\Module\\etc\\adminhtml\\system.xml<\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Config:etc\/system_file.xsd\">\n    <system>\n        <tab id=\"vendor\" translate=\"label\" class=\"dynamic_field\" sortOrder=\"100\">\n            <label><\/label>\n        <\/tab>\n        <section id=\"deliverydate\" translate=\"label\" type=\"text\" sortOrder=\"320\" showInDefault=\"1\" showInWebsite=\"1\"\n                 showInStore=\"1\">\n            <label>Order Delivery Date<\/label>\n            <tab>vendor<\/tab>\n            <resource>Vendor_Module::module_configuration<\/resource>\n            <group id=\"general\" translate=\"label\" type=\"text\" sortOrder=\"1\" showInDefault=\"1\" showInWebsite=\"1\"\n                   showInStore=\"1\">\n                <label>General<\/label>\n                <field id=\"enable\" translate=\"label\" type=\"select\" sortOrder=\"1\" showInDefault=\"1\" showInWebsite=\"1\"\n                       showInStore=\"1\">\n                    <label>Enable<\/label>\n                    <source_model>Magento\\Config\\Model\\Config\\Source\\Enabledisable<\/source_model>\n                <\/field>\n                <field id=\"cutofftime\" translate=\"cut off time\" type=\"time\" sortOrder=\"4\" showInDefault=\"1\" showInWebsite=\"1\"\n                       showInStore=\"1\">\n                    <label>Cut off Time<\/label>\n                    <comment>\n                        <![CDATA[If customers place order after this time the date when orders made will be counted as the following day.]]>\n                    <\/comment>\n                <\/field>\n                <field id=\"dynamic_field_holidays\" translate=\"label\" sortOrder=\"4\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\n                    <label>Holidays\/Exclude Days\/Blackout Days<\/label>\n                    <backend_model>Vendor\\Module\\Block\\Adminhtml\\Config\\Backend\\ArraySerializedHolidays<\/backend_model>\n                    <frontend_model>Vendor\\Module\\Block\\Adminhtml\\DynamicFieldHolidays<\/frontend_model>\n                <\/field>\n            <\/group>\n        <\/section>\n    <\/system>\n<\/config><\/pre>\n\n\n\n
4. Create ArraySerializedHolidays.php<\/strong><\/em> file at Vendor\\Module\\Block\\Adminhtml\\Config\\Backend<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\Config\\Backend;\n\nuse Magento\\Framework\\App\\Cache\\TypeListInterface;\nuse Magento\\Framework\\App\\Config\\ScopeConfigInterface;\nuse Magento\\Framework\\App\\Config\\Value as ConfigValue;\nuse Magento\\Framework\\Data\\Collection\\AbstractDb;\nuse Magento\\Framework\\Model\\Context;\nuse Magento\\Framework\\Model\\ResourceModel\\AbstractResource;\nuse Magento\\Framework\\Registry;\nuse Magento\\Framework\\Serialize\\SerializerInterface;\n\nclass ArraySerializedHolidays extends ConfigValue\n{\n\n    protected $serializer;\n\n    public function __construct(\n        SerializerInterface $serializer,\n        Context $context,\n        Registry $registry,\n        ScopeConfigInterface $config,\n        TypeListInterface $cacheTypeList,\n        AbstractResource $resource = null,\n        AbstractDb $resourceCollection = null,\n        array $data = []\n    ) {\n        $this->serializer = $serializer;\n        parent::__construct($context, $registry, $config, $cacheTypeList, $resource, $resourceCollection, $data);\n    }\n\n    public function beforeSave()\n    {\n        $value = $this->getValue();\n        if (isset($value['__empty'])) {\n            unset($value['__empty']);\n        }\n        $encodedValue = $this->serializer->serialize($value);\n        $this->setValue($encodedValue);\n    }\n\n    protected function _afterLoad()\n    {\n        $value = $this->getValue();\n        if ($value) {\n            $decodedValue = $this->serializer->unserialize($value);\n            $this->setValue($decodedValue);\n        }\n    }\n}<\/pre>\n\n\n\n
5. Create DynamicFieldHolidays.php<\/strong><\/em> file at Vendor\\Module\\Block\\Adminhtml<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml;\n\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Magento\\Config\\Block\\System\\Config\\Form\\Field\\FieldArray\\AbstractFieldArray;\nuse Magento\\Framework\\DataObject;\nuse Magento\\Framework\\Registry;\n\nclass DynamicFieldHolidays extends AbstractFieldArray\n{\n    private $holidaysRenderer;\n    private $dateRenderer;\n\n    public function __construct(\n        Context $context,\n        Registry $coreRegistry,\n        array $data = []\n    ) {\n        $this->_coreRegistry = $coreRegistry;\n        parent::__construct($context, $data);\n    }\n\n    protected function _prepareToRender()\n    {\n\n        $this->addColumn(\n            'select_date',\n            [\n                'label' => __('Date'),\n                'id' => 'select_date',\n                'class' => 'daterecuring',\n                'style' => 'width:200px'\n            ]\n        );\n\n        $this->addColumn(\n            'date_title',\n            [\n                'label' => __('Content'),\n                'class' => 'required-entry',\n                'style' => 'width:300px',\n            ]\n        );\n\n        $this->_addAfter = false;\n        $this->_addButtonLabel = __('MoreAdd');\n    }\n\n    protected function _prepareArrayRow(DataObject $row): void\n    {\n        $options = [];\n        $row->setData('option_extra_attrs', $options);\n    }\n\n    protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n    {\n        $html = parent::_getElementHtml($element);\n\n        $script = '<script type=\"text\/javascript\">\n                require([\"jquery\", \"jquery\/ui\", \"mage\/calendar\"], function (jq) {\n                    jq(function(){\n                        function bindDatePicker() {\n                            setTimeout(function() {\n                                jq(\".daterecuring\").datepicker( { dateFormat: \"mm\/dd\/yy\" } );\n                            }, 50);\n                        }\n                        bindDatePicker();\n                        jq(\"button.action-add\").on(\"click\", function(e) {\n                            bindDatePicker();\n                        });\n                    });\n                });\n            <\/script>';\n        $html .= $script;\n        return $html;\n    }\n}<\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Now you know how to Add a Dynamic Field in Magento 2<\/a> Admin Using system.xml file<\/p>\n\n\n\n
Also read How to Implement Field Dependency from Different Groups in Magento 2 System.xml<\/a>\u00a0based on the selection of API providers.<\/p>\n\n\n\n
Also, do share the solution with Magento Community via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 CMS is a widely used platform to develop online stores. Owing to the flexibility of customization, the CMS is preferred to cater to…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1443","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1443"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1443\/revisions"}],"predecessor-version":[{"id":16926,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1443\/revisions\/16926"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}