Magento 2 Pattern Library -- Date & Time Selectors

Question

I would like to implement the "Horizontally Stacked Time Range Picker" from the Magento 2 Pattern Library into an admin form input

http://devdocs.magento.com/guides/v2.0/pattern-library/getting-user-input/date_time_selector/date_time_selector.html

Does anyone have any working examples of exactly how to do this? I scoured through the entire admin, but couldn't find any working examples of the date+time picker.

Answer 1

The customer grid filter has a date range option for created_at. It can be found in app/code/Magento/Customer/view/adminhtml/ui_component/customer_listing.xml and currently looks like the following.

<column name="created_at">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="label" xsi:type="string" translate="true">Customer Since</item>
            <item name="sortOrder" xsi:type="number">100</item>
        </item>
    </argument>
</column>

Now the difference between this and the date fields in forms like the add new customer form is the item named filter but this will only work of filters and not for forms.

Now there is a Range element class Magento\Ui\Component\Form\Element\Range but that is not under the DataType folder with all the other form element fields. I also cannot see it being used in the form element definition as of yet but I am sure that it is possible to extend the form definitions.xml. I just dont know yet how :(

I have just read on Magento2 dev docs that extension providers can extend these definitions but not add their own which too me seems a bit odd, unless you can take the date field and create your own based from this I see this as a big limitation.