diff --git a/app/javascript/application.js b/app/javascript/application.js
index 2eaba9c4..55bc69b1 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -97,6 +97,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
this.app = createApp(TemplateBuilder, {
template: reactive(JSON.parse(this.dataset.template)),
backgroundColor: '#faf7f5',
+ locale: this.dataset.locale,
withPhone: this.dataset.withPhone === 'true',
withLogo: this.dataset.withLogo !== 'false',
editable: this.dataset.editable !== 'false',
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 6d782b66..343f0673 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -435,6 +435,7 @@ export default {
save: this.save,
t: this.t,
currencies: this.currencies,
+ locale: this.locale,
baseFetch: this.baseFetch,
fieldTypes: this.fieldTypes,
backgroundColor: this.backgroundColor,
@@ -468,6 +469,11 @@ export default {
required: false,
default: ''
},
+ locale: {
+ type: String,
+ required: false,
+ default: ''
+ },
editable: {
type: Boolean,
required: false,
@@ -649,6 +655,20 @@ export default {
computed: {
selectedAreaRef: () => ref(),
fieldsDragFieldRef: () => ref(),
+ defaultDateFormat () {
+ const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
+ const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)
+
+ return this.localeDateFormats[this.locale] || ((isUsBrowser || isUsTimezone) ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+ },
+ localeDateFormats () {
+ return {
+ 'de-DE': 'DD.MM.YYYY',
+ 'fr-FR': 'DD/MM/YYYY',
+ 'it-IT': 'DD/MM/YYYY',
+ 'es-ES': 'DD/MM/YYYY'
+ }
+ },
fieldAreasIndex () {
const areas = {}
@@ -768,7 +788,7 @@ export default {
if (type === 'date') {
field.preferences = {
- format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+ format: this.defaultDateFormat
}
}
@@ -801,7 +821,7 @@ export default {
if (type === 'date') {
field.preferences = {
- format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+ format: this.defaultDateFormat
}
}
@@ -1138,7 +1158,7 @@ export default {
if (field.type === 'date') {
field.preferences = {
- format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+ format: this.defaultDateFormat
}
}
}
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 3cbde2da..94ba721c 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -281,7 +281,7 @@ export default {
IconMathFunction,
FieldType
},
- inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
+ inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'locale'],
props: {
field: {
type: Object,
@@ -341,7 +341,7 @@ export default {
if (this.field.type === 'date') {
this.field.preferences.format ||=
- (Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+ ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
}
},
methods: {
diff --git a/app/views/templates/edit.html.erb b/app/views/templates/edit.html.erb
index 32d18f89..c95e9f31 100644
--- a/app/views/templates/edit.html.erb
+++ b/app/views/templates/edit.html.erb
@@ -1 +1 @@
-
+