How to Add Date & Time Picker in Magento System Configuration

Sometimes Magento Store owners require setting date and time in Magento backend to show countdown timer in frontend or run a cron on a specific frequency. Recently, while working on a custom development project, we came across with a requirement to add custom date and time picker in the Magento admin configuration page that let store owners easily pick their convenient date and time and making selections as per need. There is no direct method that can be called to add the date picker in Magento. Here, I’m sharing simple code to fulfill the requirement.

To add date & time picker, first of all you need to create date.php file at following location in your custom extension
[Vendor]\[ModuleName]\ Block\Adminhtml\System\Config
After creating file, you need to add the following code.

As shown above, there are four different types of format exists that you can use as per your convenience in Magento.

1. FORMAT_TYPE_FULL –> Friday, March 17, 2017 11:59:10 AM Europe/Helsinki
2. FORMAT_TYPE_LONG –> March 17, 2017 11:59:10 AM EET
3. FORMAT_TYPE_MEDIUM –> Mar 17, 2017 11:59:10 AM
4. FORMAT_TYPE_SHORT –> 3/17/2017 11:59 AM

Once you have created date.php file, you have to add below code in System.xml file.

             Offer Start Date
                                                                                                notificationbar/adminhtml_system_config_date
150
1
1
1


Offer Start Time
 time
152
1
1
 1

Once you add both the code in the right place, refresh your admin configuration page and your date picker will start displaying at the position you have placed. Simply change the code according to your requirements and test again. I hope this code has helped you! Rate the blog and comment down below if you are looking for any help regarding this code.
Cheers!