custom shipping address date field validation
-
09-10-2020 - |
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);
});
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