Skip to content

Textfield with the 'Calendar Picker' widget type do not have their calendar translated according to the form language #6275

@llemire-exp

Description

@llemire-exp

Describe the bug
Textfield with the 'Calendar Picker' widget type do not have their calendar translated according to the form language

Version/Branch
Latest

To Reproduce

  1. Create a new form
  2. add a textfield component with the property { "widget": { "type": "calendar" } }
  3. render the form and set the language to 'fr' or any other language than english
  4. click on the textfield component

Expected behavior
The Date picker should be translated into french

Screenshots
here is the Date picker with the Date/Time component

Image

Here is the Date picker with the textfield component with a calendar widget:

Image

Additional Information

I generated the form using this form source and by setting the language this way:

    const formSource = {
	"display": "form",
	"components": [
		{
			"label": "Text Field",
			"widget": {
				"type": "calendar",
				"altInput": true,
				"allowInput": true,
				"clickOpens": true,
				"enableDate": true,
				"enableTime": true,
				"mode": "single",
				"noCalendar": false,
				"format": "yyyy-MM-dd hh:mm a",
				"dateFormat": "yyyy-MM-ddTHH:mm:ssZ",
				"useLocaleSettings": false,
				"hourIncrement": 1,
				"minuteIncrement": 5,
				"time_24hr": false,
				"saveAs": "text",
				"displayInTimezone": "viewer",
				"locale": "en"
			},
			"applyMaskOn": "change",
			"validateWhenHidden": false,
			"key": "textField",
			"type": "textfield",
			"input": true,
			"tableView": true
		},
		{
			"label": "Date / Time",
			"datePicker": {
				"disableWeekends": false,
				"disableWeekdays": false
			},
			"enableMinDateInput": false,
			"enableMaxDateInput": false,
			"validateWhenHidden": false,
			"key": "dateTime",
			"type": "datetime",
			"input": true,
			"tableView": false,
			"widget": {
				"type": "calendar",
				"displayInTimezone": "viewer",
				"locale": "en",
				"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.createForm(document.getElementById('formio'), formSource).then(function(form) {
  form.language = 'fr'
});

my js-fiddle:

index-jsfiddle-kdpz4jvn-0.html

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions