Issue with Regional Configuration in my CapacitorJS + Vue.js App

Bad input, capacitor app Input i want, chrome app

I'm encountering an issue with regional configuration in my mobile application, which is built with CapacitorJS and Vue.js 2. The input type datetime-local control is displaying in a language different from the expected one, and I'm seeking guidance on how to address this problem.

Problem Description: The datetime-local control in my application, when running on a mobile device, displays the interface in a language other than Spanish (my default language). I would like to understand how I can ensure that regional configuration or language is applied correctly in my application.

On another devices the input works well.

If create a simple input and enter with google chrome works well, but if in the same page with the capacitor app, seems different.

Android Version: 12 Device: Samsung Galaxy S10+ (SM-G975F) Capacitor: @capacitor/cli": "^5.0.0"

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Form with datetime-local</title>
   </head>
   <body>

       <form action="#" method="post">
           <input type="datetime-local" id="dateTime" name="dateTime" required>
       </form>

   </body>
   </html>

In my CapacitorJS + Vue.js app, I tried checking the device's regional settings, ensuring Spanish translations in Vue.js. I expected the datetime-local control to display in Spanish, matching my OS language settings, but it's showing in a different language.

Solution

Google broke something on one of latest WebView updates, sadly there is nothing you can do until google fixes it and releases a new version.

https://bugs.chromium.org/p/chromium/issues/detail?id=1504549