Question

I've added a custom field to the shipping address in checkout:

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['date'] = [
            'component' => '<vendor>_<module>/js/shipping-provider',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => '<vendor>_<module>/date',
                'options' => [],
                'id' => 'date'
            ],
            'dataScope' => 'shippingAddress.date',
            'label' => __('Date'),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => true
            ],
            'sortOrder' => 200,
            'id' => 'date'
        ];

As you can see I set required-entry to true for validation purposes. But now I always get that the field is a required field error message even though the field has a value set.

Here is the field:

<input class="input-text" type="text" data-bind="
    hasFocus: focused,
    datepicker: { storage: value, options: options },
    attr: {
        value: value,
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        disabled: disabled
    }" readonly/>

Any idea on this?

Update Here is the shipping-provider.js

define([
    'Magento_Ui/js/form/element/abstract',
    'jquery',
    'mage/calendar'
], function (Abstract, $, calendar) {
    'use strict';

    $.extend(true, $, {
        calendarConfig: {
            onSelect: function (date, datepicker) {
                // do stuff
            }
        }
    });

    return Abstract.extend(Abstract, calendar);
});
Was it helpful?

Solution

So extending from abstract has proven to be not working. I have to extend from date (makes sense). So this is working just fine:

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

    return date;
});

Problem is now I need to extend the calendar itself and if I do so it is not working again:

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

    $.extend(true, $, {
        calendarConfig: {
            onSelect: function (date, datepicker) {
                // do stuff
            }
        }
    });

    return date;
});

The problem is that onSelect interferes with internal Magento functions. Extending with changing other values like minDate works. So I have to do this:

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

    $.extend(true, $, {
        calendarConfig: {
            minDate: getMinDate()
        }
    });

    return date.extend({
        onValueChange: function (value) {
            // do stuff here instead
        }
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top