formio
Calendar picker (Flatpickr) does not work properly in Arabic
Describe the bug Hi guys, thanks for the wonderful library. I’ve found an issue that may be a potential bug. The value in the date/time picker is not properly retained on blur when using Arabic.
Version/Branch Latest CDN: https://cdn.form.io/formiojs/formio.full.min.js
To Reproduce CodeSandbox Steps to reproduce the behavior:
- Create form...
- Add component...
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.form.io/formiojs/formio.full.min.css"
/>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
</head>
<body class="container px-1 pt-2">
<div id="app"></div>
<script src="src/index.js"></script>
<script>
window.addEventListener("load", () => {
const form = {
display: "wizard",
components: [
{
label: "Date / Time",
tableView: false,
datePicker: {
disableWeekends: false,
disableWeekdays: false,
},
enableMinDateInput: false,
enableMaxDateInput: false,
validateWhenHidden: false,
key: "dateTime",
type: "datetime",
input: true,
widget: {
type: "calendar",
displayInTimezone: "viewer",
locale: "ar",
useLocaleSettings: false,
allowInput: true,
mode: "single",
enableTime: true,
noCalendar: false,
format: "yyyy-MM-dd hh:mm a",
hourIncrement: 1,
minuteIncrement: 1,
time_24hr: false,
minDate: null,
disableWeekends: false,
disableWeekdays: false,
maxDate: null,
},
},
],
};
Formio.builder(document.getElementById("app"), form, {
language: "ar",
});
});
</script>
</body>
</html>
- Select date and time
- When selecting the period (AM/PM), the value is reset on blur but it will retain the value properly when hitting
Return/Enter
Expected behavior It should retain the value correctly on blur.
Screenshots
https://github.com/user-attachments/assets/96f666c5-3062-4f28-a814-9863228b822f
Additional context Please help to take a look. Thank you
I am not able to reproduce this issue on our latest version of formiojs. You may want to try using our latest version of formiojs and see if that fixes your issue. Below is the script tag for the cdn
<script src="https://cdn.form.io/js/formio.embed.js"></script>
I am not able to reproduce this issue on our latest version of formiojs. You may want to try using our latest version of formiojs and see if that fixes your issue. Below is the script tag for the cdn
<script src="https://cdn.form.io/js/formio.embed.js"></script>
Hi @ZenMasterJacob20011, Thanks for your reply. You can see the issue in the CodeSandbox URL that I mentioned in the issue description.
By the way, if I use the embed script you provided, <script src="https://cdn.form.io/js/formio.embed.js"></script>, the Calendar renders in English instead of Arabic. Here is the Codesandbox URL
Code
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.form.io/formiojs/formio.full.min.css"
/>
<script src="https://cdn.form.io/js/formio.embed.js"></script>
</head>
<body class="container px-1 pt-2">
<div id="app"></div>
<script src="src/index.js"></script>
<script>
window.addEventListener("load", () => {
const form = {
display: "wizard",
components: [
{
label: "Date / Time",
tableView: false,
datePicker: {
disableWeekends: false,
disableWeekdays: false,
},
enableMinDateInput: false,
enableMaxDateInput: false,
validateWhenHidden: false,
key: "dateTime",
type: "datetime",
input: true,
widget: {
type: "calendar",
displayInTimezone: "viewer",
locale: "ar",
useLocaleSettings: false,
allowInput: true,
mode: "single",
enableTime: true,
noCalendar: false,
format: "yyyy-MM-dd hh:mm a",
hourIncrement: 1,
minuteIncrement: 1,
time_24hr: false,
minDate: null,
disableWeekends: false,
disableWeekdays: false,
maxDate: null,
},
},
],
};
Formio.builder(document.getElementById("app"), form, {
language: "ar",
});
});
</script>
</body>
</html>
Did you make sure that you imported the correct locale scripts before you loaded the renderer with this locale? Try to add the arabic local in a similar way to the docs here.
https://flatpickr.js.org/localization/
Hi @travist, do we need to do that? As I saw in the code, it should import automatically (please correct me if I’m wrong). I also tried importing the Flatpickr localization via a script tag, but it didn’t work. CodeSandbox
The code from "requireLibrary" only works if the locale already exists within our CDN. I would inspect the network of your form when it is rendered and if there is a network error trying to load a file that does not exist, then this means that your locale is not included. Our recommendation of loading your own locale puts the control back to you where you can explicitly provide the locales you need without having to rely on our inclusion of it in our cdn.
Thanks! I’ll add it myself, @travist. However, isn’t the Flatpickr Arabic locale already included in the FormIO CDN? Here’s the link: https://cdn.form.io/flatpickr-formio/4.6.13-formio.3/l10n/flatpickr-ar.js
It does seem to be, but you will need to inspect the network traffic of your browser to determine if it properly loads this file if AR is used as the language. It is possible that it is pulling from a path that is not defined.
The issue is that when I use the CDN https://cdn.form.io/formiojs/formio.full.min.js, the calendar is rendered correctly in Arabic, but it has the problem described in the issue. However, if I use https://cdn.form.io/js/formio.embed.js, the calendar doesn’t render in Arabic, which is confusing.
Are there any assets that get loaded (by looking at Network tab), or API's that fire when you use the "full" vs the "embed" script?