0

This question already has an answer here:

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.

marked as duplicate by Ben Crook, sv3n, liyakat, brentwpeterson, Moose Jul 5 '17 at 14:51

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • I am also facing same issue. Could someone help on same? – Pramod Kharade Jun 19 '17 at 5:45
  • try this one: defaults: { template: { name: 'Modulename_Gateway/payment/modulename-directdebit-secured-form', afterRender: function() { $("#birthdate").calendar({ showTime: false, //dateFormat: "yy-mm-dd" }); } }, birthdate: '' }, – Jonas Chen Aug 23 '18 at 5:32
0

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

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