How can I set ine datePicker in french ?
5 Replies
Hi Sandra,
Greetings from Syncfusion support.
Query 1:
1/ I don't know how to do the same in french.
Is there some special json file needed?
Response:
Yes, we need to load the required cldr-data files such as “ca-gregorian.json, numbers.json, timeZoneNames.json, numberingSystems.json” with help of loadCldr method. Kindly refer the below code example.
|
<template>
<div class="control_wrapper">
<ejs-datepicker id="datepicker" locale="fr"></ejs-datepicker>
</div>
</template>
<script>
import Vue from "vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";
import { L10n , loadCldr} from "@syncfusion/ej2-base";
Vue.use(DatePickerPlugin);
loadCldr(
require('cldr-data/main/fr/numbers.json'),
require('cldr-data/main/fr/ca-gregorian.json'),
require('cldr-data/main/fr/numbers.json'),
require('cldr-data/main/fr/timeZoneNames.json'),
require('cldr-data/supplemental/weekdata.json') // To load the culture based first day of week
);
L10n.load({
fr: {
datepicker: {
"today": "Aujourd'hui",
"placeholder": "Choisissez une date"
}
}
});
export default Vue.extend({
data: function() {
return {};
}
});
</script> |
Screenshot:
If you want to get the CLDR-data for other culture means, we need to install CLDR-data with help of “npm install cldr-data --save” as mentioned in the below documentation. After run this command the above mentioned culture files will be download under the node_modules/cldr-data folder.
Query 2:
Moreover, I can I prevent the user from writting a date (or anything else) by himself in the input part of the datepicker ?
I would like to user to be only able to select a date from the datePicker calendar, not to write something on his own.
Response:
We can achieve the requested requirement by using the “allowEdit” property as false in the DatePicker component which prevents the user to enter the value in the input.
|
<ejs-datepicker id="datepicker" :allowEdit=allowEdit locale="fr"></ejs-datepicker>
export default Vue.extend({
data: function() {
return {
allowEdit:false
};
}
}); |
Query 3:
I would like to force the format to be "yyyy-mm-dd".
Response:
By default, the DatePicker will be displayed the date value in the en-US format. If we load any culture, then DatePicker will be displayed the date value in the loaded culture’s format. If you want to display the date value in own custom format, then we suggest you to define the own format in the format property.
|
<ejs-datepicker id="datepicker" :allowEdit=allowEdit locale="fr" format="yyyy-mm-dd"></ejs-datepicker> |
For your reference, we have prepared the sample and attached it below.
Query 4:
But when I type "01/01/2021" and submit it I have no validator mystake.
What did I do wrong ?
What did I do wrong ?
Response:
As per the above requested details, you want to prevent the user to type in the input of the DatePicker component. If we done this, we could not enter the value against the date format in the component. If you want the user to enter the provided format alone in the DatePicker means, we can achieve this by using mask support. Kindly refer the below demo and documentation to know more about this support.
Regards,
Berly B.C
SIGN IN To post a reply.
