Fix Datepicker localization

src/components/Shared/DatePicker.vue

@@ -84,8 +84,6 @@
 import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
 import Popover from '@nextcloud/vue/dist/Components/Popover'
 import {
-	getDayNamesMin,
-	getMonthNamesShort,
 	getFirstDay,
 } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
@@ -95,6 +93,7 @@ import {
 } from '@nextcloud/dialogs'
 
 import TimezoneSelect from './TimezoneSelect'
+import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
 
 export default {
 	name: 'DatePicker',
@@ -139,13 +138,6 @@ export default {
 	},
 	data() {
 		return {
-			lang: {
-				days: getDayNamesMin(),
-				months: getMonthNamesShort(),
-				placeholder: {
-					date: this.$t('calendar', 'Select Date'),
-				},
-			},
 			firstDay: getFirstDay() === 0 ? 7 : getFirstDay(),
 			showTimezonePopover: false,
 			format: {
@@ -160,6 +152,14 @@ export default {
 			locale: (state) => state.settings.momentLocale,
 			showWeekNumbers: (state) => state.settings.showWeekNumbers,
 		}),
+		/**
+		 * Returns the lang config for vue2-datepicker
+		 *
+		 * @returns {Object}
+		 */
+		lang() {
+			return getLangConfigForVue2DatePicker(this.locale)
+		},
 		/**
 		 * Whether or not to highlight the timezone-icon.
 		 * The icon is highlighted when the selected timezone

src/components/Shared/TimePicker.vue

@@ -41,10 +41,9 @@ import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
 import moment from '@nextcloud/moment'
 import { mapState } from 'vuex'
 import {
-	getDayNamesMin,
 	getFirstDay,
-	getMonthNamesShort,
 } from '@nextcloud/l10n'
+import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
 
 export default {
 	name: 'TimePicker',
@@ -59,13 +58,6 @@ export default {
 	},
 	data() {
 		return {
-			lang: {
-				days: getDayNamesMin(),
-				months: getMonthNamesShort(),
-				placeholder: {
-					date: this.$t('calendar', 'Select Date'),
-				},
-			},
 			firstDay: getFirstDay() === 0 ? 7 : getFirstDay(),
 			format: {
 				stringify: this.stringify,
@@ -77,6 +69,14 @@ export default {
 		...mapState({
 			locale: (state) => state.settings.momentLocale,
 		}),
+		/**
+		 * Returns the lang config for vue2-datepicker
+		 *
+		 * @returns {Object}
+		 */
+		lang() {
+			return getLangConfigForVue2DatePicker(this.locale)
+		},
 		/**
 		 * Whether or not to offer am/pm in the timepicker
 		 *

src/utils/localization.js

@@ -0,0 +1,65 @@
+/**
+ * @copyright Copyright (c) 2020 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import moment from '@nextcloud/moment'
+import {
+	getDayNames,
+	getDayNamesMin,
+	getDayNamesShort,
+	getMonthNames,
+	getMonthNamesShort,
+} from '@nextcloud/l10n'
+
+/**
+ * Maps a moment locale to a vue2-datepicker locale
+ *
+ * See https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md
+ *
+ * @param {String} momentLocale Name of the moment locale
+ * @returns {Object} The vue2-datepicker lang object
+ */
+const getLangConfigForVue2DatePicker = (momentLocale) => {
+	const dateFormat = moment.localeData(momentLocale)
+		.longDateFormat('L')
+		.toUpperCase()
+
+	return {
+		formatLocale: {
+			months: getMonthNames(),
+			monthsShort: getMonthNamesShort(),
+			weekdays: getDayNames(),
+			weekdaysShort: getDayNamesShort(),
+			weekdaysMin: getDayNamesMin(),
+			firstDayOfWeek: moment.localeData(momentLocale).firstDayOfWeek(),
+			firstWeekContainsDate: moment.localeData(momentLocale).firstDayOfYear(),
+			meridiem: moment.localeData(momentLocale).meridiem,
+			meridiemParse: moment.localeData(momentLocale).meridiemParse,
+			isPM: moment.localeData(momentLocale).isPM,
+		},
+		yearFormat: 'YYYY',
+		monthFormat: 'MMM',
+		monthBeforeYear: dateFormat.indexOf('M') < dateFormat.indexOf('Y'),
+	}
+}
+
+export {
+	getLangConfigForVue2DatePicker,
+}