Magento 2: Initialize calendar widget inside payment uiComponent [duplicate]

Question

This question already has an answer here:

• Magento 2 - Adding calendar to custom frontend form 2 answers

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.

Answer 1

Have you tried using the require method inside a JS file rather than the template, I don't see why this wouldn't work providing you've added the x-magento-init tag correctly and cleared all caches and var/view_preprocessed, pub/static/frontend and pub/static/_requirejs.

require(["jquery","mage/calendar"], function($){
    $("#birthdate").calendar({
        showTime: false,
        //dateFormat: "yy-mm-dd"
    });
});