{"id":18907,"date":"2025-07-22T12:38:23","date_gmt":"2025-07-22T07:08:23","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=18907"},"modified":"2025-07-22T12:38:24","modified_gmt":"2025-07-22T07:08:24","slug":"magento-2-add-date-time-picker-in-admin-system-configuration","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/magento-2-add-date-time-picker-in-admin-system-configuration\/","title":{"rendered":"Magento 2 Add Date & Time Picker in Admin System Configuration: Steps"},"content":{"rendered":"\n

By default, Magento provides a date and time picker in certain areas such as Cart Price Rules and Catalog Price Rules, allowing users to set \u201cFrom\u201d and \u201cTo\u201d dates. <\/p>\n\n\n\n

However, Magento does not offer a built-in date and time picker UI for system configuration via system.xml. <\/p>\n\n\n\n

Therefore, when there is a requirement to select dates or time ranges in the admin panel, custom code must be implemented to enable this functionality.<\/p>\n\n\n\n

While developing custom features for Magento store owners, it\u2019s common to require date and time input from the admin for specific business logic.<\/p>\n\n\n\n

For example, a custom module might need to capture periods for license expiry, promotional rule duration, or a discount\u2019s active time frame.<\/p>\n\n\n

\n
\"Date<\/figure>\n<\/div>\n\n\n

In such cases, the solution provided here will help you integrate a date and time picker in the Magento 2 admin system configuration.<\/p>\n\n\n\n

Magento 2 add Date & Time Picker in admin system Configuration<\/h1>\n\n\n\n

Step 1:<\/strong> Add Code in The system.xml File <\/h3>\n\n\n\n

Use the below code at your existing module’s sytem.xml<\/strong> file. It would be like app\\code[Vendor][Module]\\etc\\adminhtml\\system.xml<\/strong><\/p>\n\n\n\n

<field id=\"dateIdName\" translate=\"label comment\" sortOrder=\"10\" type=\"date\" showInDefault=\"1\" showInStore=\"1\" >\n<label>Date Time Picker<\/label>\n<frontend_model>Vendor\\Module\\Block\\System\\Config\\DatePicker<\/frontend_model>\n<\/field>\n<\/pre>\n\n\n\n
Step 2: Create DatePicker.php File<\/h3>\n\n\n\n
Now, create the DatePicker.php<\/strong> file at the location app\\code[Vendor][Module]\\Block\\System\\Config<\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\System\\Config;\n\nuse Magento\\Framework\\Registry;\nuse Magento\\Backend\\Block\\Template\\Context;\n\nclass DatePicker extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field\n{\nprotected $_coreRegistry;\n\npublic function __construct(\nContext $context,\nRegistry $coreRegistry,\narray $data = []\n){\n$this->_coreRegistry = $coreRegistry;\nparent::__construct($context, $data);\n}\n\npublic function render(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element)\n{\n\/\/ for only date option\n$element->setDateFormat(\\Magento\\Framework\\Stdlib\\DateTime::DATE_INTERNAL_FORMAT);\n\n\/\/ For Date & time option\n\/\/ $element->setDateFormat(\\Magento\\Framework\\Stdlib\\DateTime::DATETIME_INTERNAL_FORMAT);\n\n\/\/$element->setDateFormat(\"dd-mm-Y\");\n\n\/\/ For set max date or disabled future date\n$element->setMaxDate(date('Y-m-d'));\n\n\/\/ For set Min date or disabled previous date\n$element->setMaxDate('2022-04-01');\nreturn parent::render($element);\n}\n}\n<\/pre>\n\n\n\n
That\u2019s it. <\/p>\n\n\n\n
Then, you will be able to view the date and time picker to streamline your Magento backend tasks with our custom solutions.<\/p>\n\n\n\n
If you\u2019re looking to build tailored features or need custom extension development for your store, feel free to get in touch<\/a> \u2014 we\u2019re here to bring your ideas to life. <\/p>\n","protected":false},"excerpt":{"rendered":"
By default, Magento provides a date and time picker in certain areas such as Cart Price Rules and Catalog Price Rules, allowing users to set…<\/p>\n","protected":false},"author":5,"featured_media":18918,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-18907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/18907","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=18907"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/18907\/revisions"}],"predecessor-version":[{"id":18921,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/18907\/revisions\/18921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/18918"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=18907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=18907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=18907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}