diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index d6b24f47..85222575 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -37,6 +37,9 @@
                     <template #month-overlay-value="{ text }">
                         {{ getMonthShortName(text) }}
                     </template>
+                    <template #am-pm-button="{ toggle, value }">
+                        <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ $t(`datetime.${value}.content`) }}</button>
+                    </template>
                 </vue-date-picker>
             </v-card-text>
             <v-card-text class="overflow-y-visible">
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index 3f9b9436..a1791034 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -34,6 +34,9 @@
                     <template #month-overlay-value="{ text }">
                         {{ getMonthShortName(text) }}
                     </template>
+                    <template #am-pm-button="{ toggle, value }">
+                        <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ $t(`datetime.${value}.content`) }}</button>
+                    </template>
                 </vue-date-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index f3cce431..9a349e48 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -29,6 +29,9 @@
                 <template #month-overlay-value="{ text }">
                     {{ getMonthShortName(text) }}
                 </template>
+                <template #am-pm-button="{ toggle, value }">
+                    <button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ $t(`datetime.${value}.content`) }}</button>
+                </template>
             </vue-date-picker>
         </f7-page-content>
     </f7-sheet>
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index f84d435c..ad73e13e 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1079,9 +1079,9 @@ function setLanguage(i18nGlobal, locale, force) {
         weekdaysMin : getAllMinWeekdayNames(i18nGlobal.t),
         meridiem: function (hours) {
             if (hours > 11) {
-                return i18nGlobal.t('datetime.PM.upperCase');
+                return i18nGlobal.t('datetime.PM.content');
             } else {
-                return i18nGlobal.t('datetime.AM.upperCase');
+                return i18nGlobal.t('datetime.AM.content');
             }
         }
     });
diff --git a/src/locales/en.js b/src/locales/en.js
index e78ea18c..15a97a18 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -81,10 +81,10 @@ export default {
     },
     'datetime': {
         'AM': {
-            'upperCase': 'AM'
+            'content': 'AM'
         },
         'PM': {
-            'upperCase': 'PM'
+            'content': 'PM'
         },
         'Monday': {
             'min': 'Mo',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index a70aba84..71b6da5b 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -81,10 +81,10 @@ export default {
     },
     'datetime': {
         'AM': {
-            'upperCase': '上午'
+            'content': '上午'
         },
         'PM': {
-            'upperCase': '下午'
+            'content': '下午'
         },
         'Monday': {
             'min': '一',