Resolve "Translate datepicker and date format"

web-frontend/locales/en.js

@@ -269,6 +269,11 @@ export default {
     pdfBrowser: 'Open in browser',
     googleDocs: 'Open with Google Docs',
   },
+  humanDateFormat: {
+    'dd/mm/yyyy': 'dd/mm/yyyy',
+    'mm/dd/yyyy': 'mm/dd/yyyy',
+    'yyyy-mm-dd': 'yyyy-mm-dd',
+  },
   formulaFunctions: {
     upperDescription: 'Returns its argument in upper case',
     lowerDescription: 'Returns its argument in lower case',

web-frontend/locales/fr.js

@@ -273,6 +273,11 @@ export default {
     pdfBrowser: 'Ouvrir dans le navigateur',
     googleDocs: 'Ouvrir dans Google Docs',
   },
+  humanDateFormat: {
+    'dd/mm/yyyy': 'dd/mm/aaaa',
+    'mm/dd/yyyy': 'mm/dd/aaaa',
+    'yyyy-mm-dd': 'aaaa-mm-dd',
+  },
   formulaFunctions: {
     upperDescription: '@todo',
     lowerDescription: '@todo',

web-frontend/modules/database/components/row/RowEditFieldDate.vue

@@ -28,6 +28,7 @@
               :monday-first="true"
               :use-utc="true"
               :value="copy"
+              :language="datePickerLang[$i18n.locale]"
               class="datepicker"
               @input="chooseDate(field, $event)"
             ></date-picker>
@@ -73,10 +74,19 @@ import TimeSelectContext from '@baserow/modules/core/components/TimeSelectContex
 import rowEditField from '@baserow/modules/database/mixins/rowEditField'
 import rowEditFieldInput from '@baserow/modules/database/mixins/rowEditFieldInput'
 import dateField from '@baserow/modules/database/mixins/dateField'
+import { en, fr } from 'vuejs-datepicker/dist/locale'
 
 export default {
   components: { TimeSelectContext },
   mixins: [rowEditField, rowEditFieldInput, dateField],
+  data() {
+    return {
+      datePickerLang: {
+        en,
+        fr,
+      },
+    }
+  },
   methods: {
     focus(...args) {
       this.select()

web-frontend/modules/database/components/view/ViewFilterTypeDate.vue

@@ -26,6 +26,7 @@
           :monday-first="true"
           :use-utc="true"
           :value="dateObject"
+          :language="datePickerLang[$i18n.locale]"
           class="datepicker"
           @input=";[setCopy($event, 'dateObject'), delayedUpdate(copy, true)]"
         ></date-picker>
@@ -41,6 +42,7 @@ import {
   getDateHumanReadableFormat,
 } from '@baserow/modules/database/utils/date'
 import filterTypeInput from '@baserow/modules/database/mixins/filterTypeInput'
+import { en, fr } from 'vuejs-datepicker/dist/locale'
 
 export default {
   name: 'ViewFilterTypeDate',
@@ -50,6 +52,10 @@ export default {
       copy: '',
       dateString: '',
       dateObject: '',
+      datePickerLang: {
+        en,
+        fr,
+      },
     }
   },
   watch: {
@@ -96,7 +102,9 @@ export default {
       }
     },
     getDatePlaceholder(field) {
-      return getDateHumanReadableFormat(field.date_format)
+      return this.$t(
+        'humanDateFormat.' + getDateHumanReadableFormat(field.date_format)
+      )
     },
     focus() {
       this.$refs.date.focus()

web-frontend/modules/database/components/view/grid/fields/GridViewFieldDate.vue

@@ -42,6 +42,7 @@
               :monday-first="true"
               :use-utc="true"
               :value="copy"
+              :language="datePickerLang[$i18n.locale]"
               class="datepicker"
               @input="chooseDate(field, $event)"
               @selected="preventNextUnselect = true"
@@ -79,6 +80,7 @@ import { isElement } from '@baserow/modules/core/utils/dom'
 import gridField from '@baserow/modules/database/mixins/gridField'
 import gridFieldInput from '@baserow/modules/database/mixins/gridFieldInput'
 import dateField from '@baserow/modules/database/mixins/dateField'
+import { en, fr } from 'vuejs-datepicker/dist/locale'
 
 export default {
   components: { TimeSelectContext },
@@ -86,6 +88,10 @@ export default {
   data() {
     return {
       preventNextUnselect: false,
+      datePickerLang: {
+        en,
+        fr,
+      },
     }
   },
   methods: {

web-frontend/modules/database/mixins/dateField.js

@@ -134,7 +134,9 @@ export default {
      * Returns a human readable date placeholder of the format for the input.
      */
     getDatePlaceholder(field) {
-      return getDateHumanReadableFormat(field.date_format)
+      return this.$t(
+        'humanDateFormat.' + getDateHumanReadableFormat(field.date_format)
+      )
     },
     /**
      * Returns a human readable time placeholder of the format for the input.