1

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);
});
3
  • Can you post your js component? <vendor>_<module>/js/shipping-provider Commented May 23, 2017 at 6:23
  • Hi, thanks for your reply. Doesn't matter. It's the same behaviour with the abstract provider 'component' => 'Magento_Ui/js/form/element/abstract'. The problem is just the 'required-entry' => true line. If I comment that, everything works as expected. Data is transferred to the quote and then saved to the order.
    – steros
    Commented May 23, 2017 at 7:11
  • 1
    damn...I checked again just to be 100% sure and it seems I ran into a caching problem. It really is the shipping-provider :O I'll attach a stub.
    – steros
    Commented May 23, 2017 at 7:18

1 Answer 1

1

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
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.