I am working on a Payment Gateway and I have to work with the customer's date of birth with a certain payment option.
To get this, I want to load the calendar widget on a text input field (since date of birth is not required for all shops, I have to to it this way).
My component extends an 'abstract' component, which extends 'Magento_Checkout/js/view/payment/default':
Abstract renderer which serves as 'parent' (abstract.js):
define(
[
'jquery',
'Magento_Checkout/js/view/payment/default',
'Modulename_Gateway/js/action/place-order',
'Magento_Checkout/js/model/payment/additional-validators'
],
function ($, Component, placeOrderAction, additionalValidators) {
return Component.extend({
...
});
}
);
Renderer for the given payment method (directdebitsecured.js):
define(
[
'jquery',
'Modulename_Gateway/js/view/payment/method-renderer/abstract',
'Modulename_Gateway/js/action/place-order',
'Magento_Checkout/js/model/url-builder',
'mage/storage',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/quote',
'mage/calendar'
],
function ($, Component, placeOrderAction, urlBuilder, storage, additionalValidators, customer, quote) {
return Component.extend({
defaults: {},
initialize: function() {},
});
}
);
Of course, defaults and initialize function are not empty. The js/action/place-order file contains logic for the order placement.
The HTML template file is defined in the defaults object of my directdebitsecured component:
defaults: {
template: 'Modulename_Gateway/payment/modulename-directdebit-secured-form',
birthdate: ''
},
Inside that file I want to load the calendar widget, but I have no success. I've tried several ways:
Binding it to my input text field
- via data-mage-init='{"calendar": {}}' (just nothing happens)
- data-bind="mageInit: {'calendar': {}}" (throws an error in requireJs)
Calling it directly
- jQuery('#idOfMyInputField').calendar({}); (just nothing happens)
Calling it with requireJs inside of the HTML template
require(["jquery","mage/calendar"], function($){
$("#birthdate").calendar({
showTime: false,
//dateFormat: "yy-mm-dd"
});
});
Calling it inside of my compoent, which defines $ for jQuery
- $('#idOfMyInputField').calendar({}); (just nothing happens)
Anyone has a idea, why none of these ways is working?
Btw, calling
jQuery('#birthdate').calendar({});
in the console when the page is loaded works without problems.