Magento 2 - Date input with time picker Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Magento 2 - How to add the DateTime UI ComponentPayflow Pro with billing agreementMagento 2 How to change the order of input fields of first name and last nameMagento 2.2.5 Soap Api time out issue for large no. of productsProblem with Magento 2.2.5 updateGet Custom input field data in order object dataMagento 2: Override Price Model with pluginMagento 2 Region list not filter for default country on billing address for first timeproduct_alert_stock out of date entriesMagento 2 Enterprise : Get Coupon code Expiration DateGet all products with their custom options in Magento 2

Does using the Inspiration rules for character defects encourage My Guy Syndrome?

Mechanism of the formation of peracetic acid

Are there existing rules/lore for MTG planeswalkers?

What's parked in Mil Moscow helicopter plant?

Raising a bilingual kid. When should we introduce the majority language?

Is there a verb for listening stealthily?

What is a good proxy for government quality?

What's the difference between using dependency injection with a container and using a service locator?

Processing ADC conversion result: DMA vs Processor Registers

Why is arima in R one time step off?

How long can a nation maintain a technological edge over the rest of the world?

Are these square matrices always diagonalisable?

Marquee sign letters

Retract an already submitted Recommendation Letter (written for an undergrad student)

Determinant of a matrix with 2 equal rows

How would it unbalance gameplay to rule that Weapon Master allows for picking a fighting style?

All ASCII characters with a given bit count

Is it accepted to use working hours to read general interest books?

Why isPrototypeOf() returns false?

Protagonist's race is hidden - should I reveal it?

Was there ever a LEGO store in Miami International Airport?

What to do with someone that cheated their way though university and a PhD program?

`FindRoot [ ]`::jsing: Encountered a singular Jacobian at a point...WHY

How was Lagrange appointed professor of mathematics so early?



Magento 2 - Date input with time picker



Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Magento 2 - How to add the DateTime UI ComponentPayflow Pro with billing agreementMagento 2 How to change the order of input fields of first name and last nameMagento 2.2.5 Soap Api time out issue for large no. of productsProblem with Magento 2.2.5 updateGet Custom input field data in order object dataMagento 2: Override Price Model with pluginMagento 2 Region list not filter for default country on billing address for first timeproduct_alert_stock out of date entriesMagento 2 Enterprise : Get Coupon code Expiration DateGet all products with their custom options in Magento 2



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








1















I am using Magento 2.2.5 to create a custom EAV model.



I managed to create the form in the admin panel using UI components, based on the catalog product implementation. However, I have seen that the UI components do not support "datetime" as input type, therefore I set "date" to all my attributes.



The problems is: How can I set the date picker to include time values too (hours and minutes)?
Instead of this



date picker without time



I want this



enter image description here










share|improve this question
























  • please shair code. You are lokking for admimnahtml form?

    – Adarsh Shukla
    Dec 3 '18 at 9:08












  • if want so refer magento.stackexchange.com/questions/130985/…

    – Adarsh Shukla
    Dec 3 '18 at 9:21











  • I am using ui component form and modifiers to generate an adminhtml form

    – Sergiu Abrudean
    Dec 3 '18 at 9:56

















1















I am using Magento 2.2.5 to create a custom EAV model.



I managed to create the form in the admin panel using UI components, based on the catalog product implementation. However, I have seen that the UI components do not support "datetime" as input type, therefore I set "date" to all my attributes.



The problems is: How can I set the date picker to include time values too (hours and minutes)?
Instead of this



date picker without time



I want this



enter image description here










share|improve this question
























  • please shair code. You are lokking for admimnahtml form?

    – Adarsh Shukla
    Dec 3 '18 at 9:08












  • if want so refer magento.stackexchange.com/questions/130985/…

    – Adarsh Shukla
    Dec 3 '18 at 9:21











  • I am using ui component form and modifiers to generate an adminhtml form

    – Sergiu Abrudean
    Dec 3 '18 at 9:56













1












1








1








I am using Magento 2.2.5 to create a custom EAV model.



I managed to create the form in the admin panel using UI components, based on the catalog product implementation. However, I have seen that the UI components do not support "datetime" as input type, therefore I set "date" to all my attributes.



The problems is: How can I set the date picker to include time values too (hours and minutes)?
Instead of this



date picker without time



I want this



enter image description here










share|improve this question
















I am using Magento 2.2.5 to create a custom EAV model.



I managed to create the form in the admin panel using UI components, based on the catalog product implementation. However, I have seen that the UI components do not support "datetime" as input type, therefore I set "date" to all my attributes.



The problems is: How can I set the date picker to include time values too (hours and minutes)?
Instead of this



date picker without time



I want this



enter image description here







magento-2.2.5






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Apr 19 at 10:40









Muhammad Anas

8091322




8091322










asked Dec 3 '18 at 9:06









Sergiu AbrudeanSergiu Abrudean

83




83












  • please shair code. You are lokking for admimnahtml form?

    – Adarsh Shukla
    Dec 3 '18 at 9:08












  • if want so refer magento.stackexchange.com/questions/130985/…

    – Adarsh Shukla
    Dec 3 '18 at 9:21











  • I am using ui component form and modifiers to generate an adminhtml form

    – Sergiu Abrudean
    Dec 3 '18 at 9:56

















  • please shair code. You are lokking for admimnahtml form?

    – Adarsh Shukla
    Dec 3 '18 at 9:08












  • if want so refer magento.stackexchange.com/questions/130985/…

    – Adarsh Shukla
    Dec 3 '18 at 9:21











  • I am using ui component form and modifiers to generate an adminhtml form

    – Sergiu Abrudean
    Dec 3 '18 at 9:56
















please shair code. You are lokking for admimnahtml form?

– Adarsh Shukla
Dec 3 '18 at 9:08






please shair code. You are lokking for admimnahtml form?

– Adarsh Shukla
Dec 3 '18 at 9:08














if want so refer magento.stackexchange.com/questions/130985/…

– Adarsh Shukla
Dec 3 '18 at 9:21





if want so refer magento.stackexchange.com/questions/130985/…

– Adarsh Shukla
Dec 3 '18 at 9:21













I am using ui component form and modifiers to generate an adminhtml form

– Sergiu Abrudean
Dec 3 '18 at 9:56





I am using ui component form and modifiers to generate an adminhtml form

– Sergiu Abrudean
Dec 3 '18 at 9:56










2 Answers
2






active

oldest

votes


















1














I hope I got your question right and you can make use of this solution.



You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder).
Create the file and copy&paste this code:



define([
'Magento_Ui/js/form/element/date'
], function(Date)
'use strict';

return Date.extend(
defaults:
options:
showsDate: true,
showsTime: true
,

);
);


When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:



<item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>


If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:



$meta['arguments']['data']['config']['component'] = 'Vendor_ComponentName/js/form/element/date';





share|improve this answer






























    1














    Try below code:



    <field name="date">
    <argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
    <item name="dataType" xsi:type="string">string</item>
    <item name="label" xsi:type="string" translate="true">Date</item>
    <item name="formElement" xsi:type="string">date</item>
    <item name="source" xsi:type="string">page</item>
    <item name="sortOrder" xsi:type="number">50</item>
    <item name="dataScope" xsi:type="string">date</item>
    <item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    </item>
    <item name="options" xsi:type="array">
    <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
    <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
    <item name="showsTime" xsi:type="boolean">true</item>
    </item>
    </item>
    </argument>
    </field>





    share|improve this answer

























    • same same magento.stackexchange.com/questions/130985/…

      – Adarsh Shukla
      Dec 3 '18 at 9:21












    Your Answer








    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "479"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: false,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: null,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f252189%2fmagento-2-date-input-with-time-picker%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    I hope I got your question right and you can make use of this solution.



    You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder).
    Create the file and copy&paste this code:



    define([
    'Magento_Ui/js/form/element/date'
    ], function(Date)
    'use strict';

    return Date.extend(
    defaults:
    options:
    showsDate: true,
    showsTime: true
    ,

    );
    );


    When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:



    <item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>


    If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:



    $meta['arguments']['data']['config']['component'] = 'Vendor_ComponentName/js/form/element/date';





    share|improve this answer



























      1














      I hope I got your question right and you can make use of this solution.



      You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder).
      Create the file and copy&paste this code:



      define([
      'Magento_Ui/js/form/element/date'
      ], function(Date)
      'use strict';

      return Date.extend(
      defaults:
      options:
      showsDate: true,
      showsTime: true
      ,

      );
      );


      When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:



      <item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>


      If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:



      $meta['arguments']['data']['config']['component'] = 'Vendor_ComponentName/js/form/element/date';





      share|improve this answer

























        1












        1








        1







        I hope I got your question right and you can make use of this solution.



        You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder).
        Create the file and copy&paste this code:



        define([
        'Magento_Ui/js/form/element/date'
        ], function(Date)
        'use strict';

        return Date.extend(
        defaults:
        options:
        showsDate: true,
        showsTime: true
        ,

        );
        );


        When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:



        <item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>


        If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:



        $meta['arguments']['data']['config']['component'] = 'Vendor_ComponentName/js/form/element/date';





        share|improve this answer













        I hope I got your question right and you can make use of this solution.



        You can make this by creating a custom js file for the datepicker. I have managed to implement this by creating a file in my module under view/adminhtml/web/js/form/element called date.js (however, the location and the naming doesn't really matter as long as it is under the web folder).
        Create the file and copy&paste this code:



        define([
        'Magento_Ui/js/form/element/date'
        ], function(Date)
        'use strict';

        return Date.extend(
        defaults:
        options:
        showsDate: true,
        showsTime: true
        ,

        );
        );


        When creating you form field, make sure to add the path to the file to the component node. That is, if you're using XML:



        <item name="component" xsi:type="string">Vendor_ComponentName/js/form/element/date</item>


        If you're building your form as in the catalog (meta arrays), do the following for your datetime eav attributes:



        $meta['arguments']['data']['config']['component'] = 'Vendor_ComponentName/js/form/element/date';






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 3 '18 at 9:28









        Rares MRares M

        262




        262























            1














            Try below code:



            <field name="date">
            <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="dataScope" xsi:type="string">date</item>
            <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
            </item>
            </item>
            </argument>
            </field>





            share|improve this answer

























            • same same magento.stackexchange.com/questions/130985/…

              – Adarsh Shukla
              Dec 3 '18 at 9:21
















            1














            Try below code:



            <field name="date">
            <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="dataScope" xsi:type="string">date</item>
            <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
            </item>
            </item>
            </argument>
            </field>





            share|improve this answer

























            • same same magento.stackexchange.com/questions/130985/…

              – Adarsh Shukla
              Dec 3 '18 at 9:21














            1












            1








            1







            Try below code:



            <field name="date">
            <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="dataScope" xsi:type="string">date</item>
            <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
            </item>
            </item>
            </argument>
            </field>





            share|improve this answer















            Try below code:



            <field name="date">
            <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="dataScope" xsi:type="string">date</item>
            <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
            </item>
            </item>
            </argument>
            </field>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Dec 3 '18 at 9:33

























            answered Dec 3 '18 at 9:15









            Himmat PaliwalHimmat Paliwal

            1,246419




            1,246419












            • same same magento.stackexchange.com/questions/130985/…

              – Adarsh Shukla
              Dec 3 '18 at 9:21


















            • same same magento.stackexchange.com/questions/130985/…

              – Adarsh Shukla
              Dec 3 '18 at 9:21

















            same same magento.stackexchange.com/questions/130985/…

            – Adarsh Shukla
            Dec 3 '18 at 9:21






            same same magento.stackexchange.com/questions/130985/…

            – Adarsh Shukla
            Dec 3 '18 at 9:21


















            draft saved

            draft discarded
















































            Thanks for contributing an answer to Magento Stack Exchange!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f252189%2fmagento-2-date-input-with-time-picker%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Sum ergo cogito? 1 nng

            419 nièngy_Soadمي 19bal1.5o_g

            Queiggey Chernihivv 9NnOo i Zw X QqKk LpB