Date field system.xml

Question

I wonder what 'date' type needs in system.xml. I keep getting the error :

system.xml (only the field):

<field id="date" translate="label" type="date" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Start sync from :</label>
</field>

error :

Exception #0 (Exception): Output format is not specified. Please specify "format" key in constructor, or set it using setFormat().

If i add a format :

        <field id="date" translate="label" type="date" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="0">
            <label>Start sync from :</label>
            <format>yyyy-MM-dd</format>
        </field>

error :

Element 'format': This element is not expected.

So what wants it? And how can i add time to it? (i need a epoch time eventually in the DB).

EDIT :

This error comes from :

\Magento\Framework\Data\Form\Element\Date : 150-158

$dateFormat = $this->getDateFormat() ?: $this->getFormat();
        $timeFormat = $this->getTimeFormat();
        if (empty($dateFormat)) {
            throw new \Exception(
                'Output format is not specified. ' .
                'Please specify "format" key in constructor, or set it using setFormat().'
            );
        }

Answer 1

There is a simple way to achieve that:

app/code/Vendor/Checkout/etc/adminhtml/system.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="mycustom" translate="label" sortOrder="450">
            <label>My Custom Setting</label>
        </tab>
        <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>My Custom Setting</label>
            <tab>mycustom</tab>
            <resource>Magento_Checkout::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Date Field</label>
                    <frontend_model>Vendor\Checkout\Block\Adminhtml\System\Config\Date</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

app/code/Vendor/Checkout/Block/Adminhtml/System/Config/Date.php

<?php

namespace Vendor\Checkout\Block\Adminhtml\System\Config;

class Date extends \Magento\Config\Block\System\Config\Form\Field
{
    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->setDateFormat(\Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT);
        $element->setTimeFormat(null);
        return parent::render($element);
    }
}

Image:

Tested on Magento 2.2.0

Edit by Swat :

If you want to add a time picker :

public function render(AbstractElement $element)
{
    $element->setDateFormat(DateTime::DATE_INTERNAL_FORMAT);
    $element->setTimeFormat('HH:mm:ss');
    $element->setShowsTime(true);
    return parent::render($element);
}