0

I've been overriding a few files in our child theme which seems to work perfectly, however, I don't seem to be able to override JS files.

In this case, I'm trying to increase the yearRange in the formfield datepicker. I found this solution and editing this in the core file (\lib\web\jquery\ui-modules\datepicker.js) works like a charm.

Ofcourse I don't want to change this in the core file so I tried adding this in our child theme.

I copied the entire datepicker.js document to app/design/frontend/theme/child/web/js and changed the variable to my preferred settings.

I then created requirejs-config.js in app/design/frontend/theme/child with the following code:

* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

var config = {
   map: {
          '*': {
           'jquery':'js/datepicker'
       }
   }
};

However, this gives me the following error:

Failed to load resource: the server responded with a status of 404 ()
require.js:141 Uncaught Error: Script error for: js/datepicker/jquery.mobile.custom
http://requirejs.org/docs/errors.html#scripterror
   at makeError (require.js:166)
   at HTMLScriptElement.onScriptError (require.js:1681)
static/version1621499056/frontend/Olegnax/at2_child/nl_NL/js/datepicker/jquery-migrate.js:1 Failed to load resource: the server responded with a status of 404 ()
require.js:141 Uncaught Error: Script error for: js/datepicker/jquery-migrate
http://requirejs.org/docs/errors.html#scripterror
   at makeError (require.js:166)
   at HTMLScriptElement.onScriptError (require.js:1681)
static/version1621499056/frontend/Olegnax/at2_child/nl_NL/js/datepicker/jquery.cookie.js:1 Failed to load resource: the server responded with a status of 404 ()
require.js:141 Uncaught Error: Script error for: js/datepicker/jquery.cookie
http://requirejs.org/docs/errors.html#scripterror
   at makeError (require.js:166)
   at HTMLScriptElement.onScriptError (require.js:1681)

How do I do this properly?

2
  • Do you need to change year range on a specific instance of datepicker or everywhere it is used? May 20 at 12:36
  • Everywhere it is used!
    – Michiel
    May 20 at 13:46
0

The proper way to extend this would be to create a JS mixin for calendar widget and set default yearRange before initialization. However, there is a bug in Magento preventing mixins for calendar widget to work in Firefox and Safari (https://github.com/magento/magento2/issues/32260).

Overwriting the whole file is not a good practice, but I believe that here we don't have other options. To overwrite /lib/web/jquery/ui-modules/datepicker.js you should copy the file to /app/design/frontend/YourVendor/YourTheme/web/jquery/ui-modules/datepicker.js. Then you just need to "reset" static files by removing /pub/static/frontned/YourVendor/YourTheme folder.

What you did couldn't work, because your requirejs config replaces the whole jquery module with js/datepicker, which is obviously wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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