Magento 2 Add Datetime picker in system.xml

Question

I want to add date picker with time in configuration section in my custom module.

I followed Webkul link

webkul link

But from this I can only able to see date picker time picker is not appearing. How I will add time picker?

The correct answer you can find here : https://magento.stackexchange.com/questions/202487/date-field-system-xml/202493#202493 — CompactCode, Nov 21 '17 at 09:03

score 3 · Accepted Answer · answered Dec 22 '16 at 13:54

3

You should use the datetimepicker like this:

$html .= '<script type="text/javascript">
        require(["jquery", "jquery/ui"], function (jq) {
            jq(document).ready(function () {
                jq("#' . $element->getHtmlId() . '").datetimepicker( { dateFormat: "dd/mm/yy" } );
                jq(".ui-datepicker-trigger").removeAttr("style");
                jq(".ui-datepicker-trigger").click(function(){
                    jq("#' . $element->getHtmlId() . '").focus();
                });
            });
        });
        </script>';
// return datetime picker element

Result:

answered Dec 22 '16 at 13:54

Siarhey Uchukhlebau

15,957
11
54
83

in my case it's not working i am use same code from webkul and replace script from above script still i can't get time in datepicker. – Sanjay Gohil Aug 22 '17 at 13:15
@SanjayGohil try to clean a cache – Siarhey Uchukhlebau Aug 22 '17 at 13:30
http://prntscr.com/gbmw68 check this screen shot i am doing anything wrong ? – Sanjay Gohil Aug 22 '17 at 13:37
@SanjayGohil Seems that all is ok. Could you share a complete module somewhere on github or bitbucket? – Siarhey Uchukhlebau Aug 22 '17 at 14:11
Hi @SiarheyUchukhlebau its working perfectly i need to know about if i want to set am and pm format what need to be done thanks ? – Vinod Kumar Sep 01 '17 at 11:06
@Vinodkumar Here you can find an answer. Just add ampm: true option and it should work. – Siarhey Uchukhlebau Sep 01 '17 at 13:30
@Vinodkumar It should looks like this: .datetimepicker( { dateFormat: "dd/mm/yy", ampm: true } ) – Siarhey Uchukhlebau Sep 01 '17 at 13:31
@SiarheyUchukhlebau still It is showing in 24hrs format, I am using following code: $("#endtime").datetimepicker( { dateFormat: "yy-mm-dd", ampm: true} ); $(".ui-datepicker-trigger").removeAttr("style"); $(".ui-datepicker-trigger").click(function(){ $("#endtime").focus(); }); – Vinod Kumar Sep 06 '17 at 05:46
@Vinodkumar I will try to reproduce it and then write to you. – Siarhey Uchukhlebau Sep 06 '17 at 06:24
4

adding mage/calendar to the DI array of requirejs make it working in magento 2.2 – Dariel Pratama Jan 12 '18 at 04:38

Magento 2 Add Datetime picker in system.xml

1 Answers1