How to override js files in Child theme? Magento 2.4

Question

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?

Answer 1

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.