Translation of months and days in the datetime component #4878
Replies: 11 comments
-
|
These are translatable. You can see the raw values here: https://github.com/formio/formio.js/blob/master/src/components/day/Day.js#L94-L106 |
Beta Was this translation helpful? Give feedback.
-
|
Thank's for you reply. However I need to translate the different months when I call the component, like in this example: http://formio.github.io/formio.js/app/examples/language.html I cannot modify directly the file Day.js |
Beta Was this translation helpful? Give feedback.
-
|
You can use the values wrapped in t('') to translate the months. You shouldn't modify that file directly. What I was pointing out is the strings that are available to translate using the translation mechanism. |
Beta Was this translation helpful? Give feedback.
-
|
After trying different ways I cannot translate the months name in the datetime component. Could you please give me a whole example of form creating with a datetime component and different labels for the months? Thanks by advance, Best regards, |
Beta Was this translation helpful? Give feedback.
-
|
Hello dcoevoet51, Jordan here with Form.io Support Team. We appreciate your interest and use of Form.io. We would be happy to help you create a working example of form creation with a datetime component and different labels as you desire under a Support Package . We offer Support Packages to help you make the most of Form.io. This will give you one-on-one time with one of our Senior Developers in minimum one hour increments for training or development services. Let me know if you would like me to provide you with pricing by emailing: |
Beta Was this translation helpful? Give feedback.
-
|
I know it is been a while since you posted but I hope this help some people in the future. I have done a basic example on fiddle (just keep in mind this solution has the form.io 3x since that one was using flatpickr Basically I am setting the language on the flatpickr, then calling redraw to reload the screen. includes: html: Js: cheers, |
Beta Was this translation helpful? Give feedback.
-
|
I got However, why doesn't the Also I got an error: So basically I added / imported... <script src="/formio/static/installed/4.13.2/formio.full.min.js"</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/nl.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/pt.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/default.js"></script>Problem below - the Formio.createForm(document.getElementById('formio_form'), self.schema, self.options).then(function(form) {
// Language
if ('language' in self.options) {
form.language = self.options['language'];
}
window.setLanguage = function(lang) {
// https://github.com/formio/formio.js/issues/1014
// flatpickr.localize(flatpickr.l10ns[lang]);
flatpickr.localize(flatpickr.l10ns.pt);
form.redraw();
form.language = lang;
};
.... // events etc |
Beta Was this translation helpful? Give feedback.
-
|
@chaseven, @randallknutson any clue or suggestion why my example doesn't work yet? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @bobslee , sorry it took me so long to reply. Before we start just want to let you know that I am not a formIO specialist, so maybe my solution is not the best option but worked fine for me. First, regarding the flatpickr location I know it is "frustrating" having to add this but I got say it would suck if it were any other way. Imagine including by default 100 languages and not even using any of that because your application runs only on one language? That would be a waste of resource, so I am glad they didn't add that into the min.js Second, on my tests one trick thing was the order of the includes, since the flatpickr is included inside the formio.min.js you need to add the language include after that otherwise you will get a flatpickr not defined. From the look iof your code you are doing this correctly but I just want to emphasise this in case your includes are in a different order on your final project. Third, the script you posted looks quite different form my example on fiddle. On your code you are setting the initial locale inside of your "create", however on my example my initial locale is defined outside my create if you set the locale after the form is created is already too late (unless you refresh or redraw, but it is a waste of resource doing so, since you can simple set before creating). By doing that when formio api runs it will build the components using the correct/selected language. On my code the only reason I put that redraw and the function "window.setLanguage = function(lang)" inside the create is because I was testing the buttons to change the language on the fly, but on my final project I am not doing that because I also have other elements on my UI that are not part of formIO that also needs to be reloaded with the new language. Additionally your "if ('language' in self.options)" is quite redundant, from my tests if you simple provide the language on the create constructor the api will handle everything here is an example of the "options" parameter including the default keys from formIO (version 3.x) I hope this all helps you. Cheers, |
Beta Was this translation helpful? Give feedback.
-
|
Hello For datetime field Formio use Flatpickr. Flatpickr options added to field Example of Flatpickr localization options https://flatpickr.js.org/localization/#using-modules Example form scheme with localisation datetime field: |
Beta Was this translation helpful? Give feedback.
-
|
Why not to use this way? |
Beta Was this translation helpful? Give feedback.
-
Hello,
I would like to translate the months and days in the datetime component but I don't know how to do this and if it's possible.
In this example days and months are not translated: http://formio.github.io/formio.js/app/examples/language.html
I have tried this code for the datetime component but it does not translate the month:
{
type: 'datetime',
key: 'firstName',
label: 'First Name',
placeholder: 'Nom à renseigner',
input: true,
january: 'Janvier',
format: 'Format',
},
Thanks by advance,
Best regards,
Beta Was this translation helpful? Give feedback.
All reactions