diff --git a/components/lib/datepicker/DatePicker.d.ts b/components/lib/datepicker/DatePicker.d.ts
index dd6118825..38e363fcb 100755
--- a/components/lib/datepicker/DatePicker.d.ts
+++ b/components/lib/datepicker/DatePicker.d.ts
@@ -183,11 +183,11 @@ export interface DatePickerPassThroughOptions {
     /**
      * Used to pass attributes to the view month's DOM element.
      */
-    viewMonth?: DatePickerPassThroughOptionType;
+    selectMonth?: DatePickerPassThroughOptionType;
     /**
      * Used to pass attributes to the view year's DOM element.
      */
-    viewYear?: DatePickerPassThroughOptionType;
+    selectYear?: DatePickerPassThroughOptionType;
     /**
      * Used to pass attributes to the decade's DOM element.
      */
diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
index 76fe3fcc6..67bfdf1a7 100755
--- a/components/lib/datepicker/DatePicker.vue
+++ b/components/lib/datepicker/DatePicker.vue
@@ -101,10 +101,10 @@
                                                 type="button"
                                                 @click="switchToYearView"
                                                 @keydown="onContainerButtonKeydown"
-                                                :class="cx('viewYear')"
+                                                :class="cx('selectYear')"
                                                 :disabled="switchViewButtonDisabled"
                                                 :aria-label="$primevue.config.locale.chooseYear"
-                                                v-bind="ptm('viewYear')"
+                                                v-bind="ptm('selectYear')"
                                                 data-pc-group-section="view"
                                             >
                                                 {{ getYear(month) }}
@@ -114,10 +114,10 @@
                                                 type="button"
                                                 @click="switchToMonthView"
                                                 @keydown="onContainerButtonKeydown"
-                                                :class="cx('viewMonth')"
+                                                :class="cx('selectMonth')"
                                                 :disabled="switchViewButtonDisabled"
                                                 :aria-label="$primevue.config.locale.chooseMonth"
-                                                v-bind="ptm('viewMonth')"
+                                                v-bind="ptm('selectMonth')"
                                                 data-pc-group-section="view"
                                             >
                                                 {{ getMonthName(month.month) }}
@@ -129,10 +129,10 @@
                                                 type="button"
                                                 @click="switchToMonthView"
                                                 @keydown="onContainerButtonKeydown"
-                                                :class="cx('viewMonth')"
+                                                :class="cx('selectMonth')"
                                                 :disabled="switchViewButtonDisabled"
                                                 :aria-label="$primevue.config.locale.chooseMonth"
-                                                v-bind="ptm('viewMonth')"
+                                                v-bind="ptm('selectMonth')"
                                                 data-pc-group-section="view"
                                             >
                                                 {{ getMonthName(month.month) }}
@@ -142,10 +142,10 @@
                                                 type="button"
                                                 @click="switchToYearView"
                                                 @keydown="onContainerButtonKeydown"
-                                                :class="cx('viewYear')"
+                                                :class="cx('selectYear')"
                                                 :disabled="switchViewButtonDisabled"
                                                 :aria-label="$primevue.config.locale.chooseYear"
-                                                v-bind="ptm('viewYear')"
+                                                v-bind="ptm('selectYear')"
                                                 data-pc-group-section="view"
                                             >
                                                 {{ getYear(month) }}
diff --git a/components/lib/datepicker/style/DatePickerStyle.d.ts b/components/lib/datepicker/style/DatePickerStyle.d.ts
index 180efe1b2..375b32403 100644
--- a/components/lib/datepicker/style/DatePickerStyle.d.ts
+++ b/components/lib/datepicker/style/DatePickerStyle.d.ts
@@ -55,13 +55,13 @@ export enum DatePickerClasses {
      */
     title = 'p-datepicker-title',
     /**
-     * Class name of the view month element
+     * Class name of the select month element
      */
-    viewMonth = 'p-datepicker-view-month',
+    selectMonth = 'p-datepicker-select-month',
     /**
-     * Class name of the view year element
+     * Class name of the select year element
      */
-    viewYear = 'p-datepicker-view-year',
+    selectYear = 'p-datepicker-select-year',
     /**
      * Class name of the decade element
      */
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index 3c3c91c6f..ea0e5250e 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -118,8 +118,8 @@ const theme = ({ dt }) => `
     font-weight: ${dt('datepicker.title.font.weight')};
 }
 
-.p-datepicker-view-year,
-.p-datepicker-view-month {
+.p-datepicker-select-year,
+.p-datepicker-select-month {
     border: none;
     background: transparent;
     margin: 0;
@@ -130,24 +130,24 @@ const theme = ({ dt }) => `
 )};
 }
 
-.p-datepicker-view-month {
+.p-datepicker-select-month {
     padding: ${dt('datepicker.view.month.padding')};
     color: ${dt('datepicker.view.month.color')};
     border-radius: ${dt('datepicker.view.month.border.radius')};
 }
 
-.p-datepicker-view-year {
+.p-datepicker-select-year {
     padding: ${dt('datepicker.view.year.padding')};
     color: ${dt('datepicker.view.year.color')};
     border-radius: ${dt('datepicker.view.year.border.radius')};
 }
 
-.p-datepicker-view-month:enabled:hover {
+.p-datepicker-select-month:enabled:hover {
     background: ${dt('datepicker.view.month.hover.background')};
     color: ${dt('datepicker.view.month.hover.color')};
 }
 
-.p-datepicker-view-year:enabled:hover {
+.p-datepicker-select-year:enabled:hover {
     background: ${dt('datepicker.view.year.hover.background')};
     color: ${dt('datepicker.view.year.hover.color')};
 }
@@ -203,7 +203,7 @@ const theme = ({ dt }) => `
     width: ${dt('datepicker.date.width')};
     height: ${dt('datepicker.date.height')};
     border-radius: ${dt('datepicker.date.border.radius')};
-    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, 
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')},
         box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
     border: 1px solid transparent;
     outline-color: transparent;
@@ -386,8 +386,8 @@ const classes = {
     header: 'p-datepicker-header',
     pcPrevButton: 'p-datepicker-prev-button',
     title: 'p-datepicker-title',
-    viewMonth: 'p-datepicker-view-month',
-    viewYear: 'p-datepicker-view-year',
+    selectMonth: 'p-datepicker-select-month',
+    selectYear: 'p-datepicker-select-year',
     decade: 'p-datepicker-decade',
     pcNextButton: 'p-datepicker-next-button',
     dayView: 'p-datepicker-day-view',
diff --git a/components/lib/themes/aura/datepicker/index.js b/components/lib/themes/aura/datepicker/index.js
index 0e29b442b..ada80cb3f 100644
--- a/components/lib/themes/aura/datepicker/index.js
+++ b/components/lib/themes/aura/datepicker/index.js
@@ -39,14 +39,14 @@ export default {
     inputIcon: {
         color: '{form.field.icon.color}'
     },
-    viewMonth: {
+    selectMonth: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
         padding: '0.25rem 0.5rem',
         borderRadius: '{content.border.radius}'
     },
-    viewYear: {
+    selectYear: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
diff --git a/components/lib/themes/lara/datepicker/index.js b/components/lib/themes/lara/datepicker/index.js
index 78ef38f23..6bf29d95d 100644
--- a/components/lib/themes/lara/datepicker/index.js
+++ b/components/lib/themes/lara/datepicker/index.js
@@ -37,14 +37,14 @@ export default {
     inputIcon: {
         color: '{form.field.icon.color}'
     },
-    viewMonth: {
+    selectMonth: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
         padding: '0.375rem 0.625rem',
         borderRadius: '{content.border.radius}'
     },
-    viewYear: {
+    selectYear: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
diff --git a/components/lib/themes/nora/datepicker/index.js b/components/lib/themes/nora/datepicker/index.js
index df134c9af..b4aa6c90a 100644
--- a/components/lib/themes/nora/datepicker/index.js
+++ b/components/lib/themes/nora/datepicker/index.js
@@ -43,13 +43,13 @@ export default {
     inputIcon: {
         color: '{form.field.icon.color}'
     },
-    viewMonth: {
+    selectMonth: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
         padding: '0.25rem 0.5rem'
     },
-    viewYear: {
+    selectYear: {
         hoverBackground: '{content.hover.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
diff --git a/components/lib/themes/types/datepicker/index.d.ts b/components/lib/themes/types/datepicker/index.d.ts
index 36b0444f2..a190a6ccc 100644
--- a/components/lib/themes/types/datepicker/index.d.ts
+++ b/components/lib/themes/types/datepicker/index.d.ts
@@ -239,72 +239,72 @@ export interface DatePickerDesignTokens extends ColorSchemeDesignToken<DatePicke
         color?: string;
     };
     /**
-     * Used to pass tokens of the view month section
+     * Used to pass tokens of the select month section
      */
-    viewMonth?: {
+    selectMonth?: {
         /**
-         * Hover background of view month
+         * Hover background of select month
          *
-         * @designToken datepicker.view.month.hover.background
+         * @designToken datepicker.select.month.hover.background
          */
         hoverBackground?: string;
         /**
-         * Color of view month
+         * Color of select month
          *
-         * @designToken datepicker.view.month.color
+         * @designToken datepicker.select.month.color
          */
         color?: string;
         /**
-         * Hover color of view month
+         * Hover color of select month
          *
-         * @designToken datepicker.view.month.hover.color
+         * @designToken datepicker.select.month.hover.color
          */
         hoverColor?: string;
         /**
-         * Padding of view month
+         * Padding of select month
          *
-         * @designToken datepicker.view.month.padding
+         * @designToken datepicker.select.month.padding
          */
         padding?: string;
         /**
-         * Border radius of view month
+         * Border radius of select month
          *
-         * @designToken datepicker.view.month.border.radius
+         * @designToken datepicker.select.month.border.radius
          */
         borderRadius?: string;
     };
     /**
-     * Used to pass tokens of the view year section
+     * Used to pass tokens of the select year section
      */
-    viewYear?: {
+    selectYear?: {
         /**
-         * Hover background of view year
+         * Hover background of select year
          *
-         * @designToken datepicker.view.year.hover.background
+         * @designToken datepicker.select.year.hover.background
          */
         hoverBackground?: string;
         /**
-         * Color of view year
+         * Color of select year
          *
-         * @designToken datepicker.view.year.color
+         * @designToken datepicker.select.year.color
          */
         color?: string;
         /**
-         * Hover color of view year
+         * Hover color of select year
          *
-         * @designToken datepicker.view.year.hover.color
+         * @designToken datepicker.select.year.hover.color
          */
         hoverColor?: string;
         /**
-         * Padding of view year
+         * Padding of select year
          *
-         * @designToken datepicker.view.year.padding
+         * @designToken datepicker.select.year.padding
          */
         padding?: string;
         /**
-         * Border radius of view year
+         * Border radius of select year
          *
-         * @designToken datepicker.view.year.border.radius
+         * @designToken datepicker.select.year.border.radius
          */
         borderRadius?: string;
     };
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 9508174ff..80f5fecb9 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -9687,7 +9687,7 @@
                             "description": "Used to pass attributes to the title's DOM element."
                         },
                         {
-                            "name": "viewMonth",
+                            "name": "selectMonth",
                             "optional": true,
                             "readonly": false,
                             "type": "DatePickerPassThroughOptionType",
@@ -9695,7 +9695,7 @@
                             "description": "Used to pass attributes to the view month's DOM element."
                         },
                         {
-                            "name": "viewYear",
+                            "name": "selectYear",
                             "optional": true,
                             "readonly": false,
                             "type": "DatePickerPassThroughOptionType",
@@ -26823,7 +26823,7 @@
                             "description": "Used to pass attributes to the title's DOM element."
                         },
                         {
-                            "name": "viewMonth",
+                            "name": "selectMonth",
                             "optional": true,
                             "readonly": false,
                             "type": "DatePickerPassThroughOptionType",
@@ -26831,7 +26831,7 @@
                             "description": "Used to pass attributes to the view month's DOM element."
                         },
                         {
-                            "name": "viewYear",
+                            "name": "selectYear",
                             "optional": true,
                             "readonly": false,
                             "type": "DatePickerPassThroughOptionType",
@@ -28573,18 +28573,18 @@
                             "description": "Class name of the title element"
                         },
                         {
-                            "name": "viewMonth",
+                            "name": "selectMonth",
                             "optional": false,
                             "readonly": false,
-                            "value": "\"p-datepicker-view-month\"",
-                            "description": "Class name of the view month element"
+                            "value": "\"p-datepicker-select-month\"",
+                            "description": "Class name of the select month element"
                         },
                         {
-                            "name": "viewYear",
+                            "name": "selectYear",
                             "optional": false,
                             "readonly": false,
-                            "value": "\"p-datepicker-view-year\"",
-                            "description": "Class name of the view year element"
+                            "value": "\"p-datepicker-select-year\"",
+                            "description": "Class name of the select year element"
                         },
                         {
                             "name": "decade",
@@ -81950,20 +81950,20 @@
                             "description": "Used to pass tokens of the input icon section"
                         },
                         {
-                            "name": "viewMonth",
+                            "name": "selectMonth",
                             "optional": true,
                             "readonly": false,
                             "type": "Object",
                             "default": "",
-                            "description": "Used to pass tokens of the view month section"
+                            "description": "Used to pass tokens of the select month section"
                         },
                         {
-                            "name": "viewYear",
+                            "name": "selectYear",
                             "optional": true,
                             "readonly": false,
                             "type": "Object",
                             "default": "",
-                            "description": "Used to pass tokens of the view year section"
+                            "description": "Used to pass tokens of the select year section"
                         },
                         {
                             "name": "group",
@@ -82360,94 +82360,94 @@
                             "description": "Color of input icon"
                         },
                         {
-                            "name": "viewMonth.hoverBackground",
-                            "token": "datepicker.view.month.hover.background",
+                            "name": "selectMonth.hoverBackground",
+                            "token": "datepicker.select.month.hover.background",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Hover background of view month"
+                            "description": "Hover background of select month"
                         },
                         {
-                            "name": "viewMonth.color",
-                            "token": "datepicker.view.month.color",
+                            "name": "selectMonth.color",
+                            "token": "datepicker.select.month.color",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color of view month"
+                            "description": "Color of select month"
                         },
                         {
-                            "name": "viewMonth.hoverColor",
-                            "token": "datepicker.view.month.hover.color",
+                            "name": "selectMonth.hoverColor",
+                            "token": "datepicker.select.month.hover.color",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Hover color of view month"
+                            "description": "Hover color of select month"
                         },
                         {
-                            "name": "viewMonth.padding",
-                            "token": "datepicker.view.month.padding",
+                            "name": "selectMonth.padding",
+                            "token": "datepicker.select.month.padding",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Padding of view month"
+                            "description": "Padding of select month"
                         },
                         {
-                            "name": "viewMonth.borderRadius",
-                            "token": "datepicker.view.month.border.radius",
+                            "name": "selectMonth.borderRadius",
+                            "token": "datepicker.select.month.border.radius",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Border radius of view month"
+                            "description": "Border radius of select month"
                         },
                         {
-                            "name": "viewYear.hoverBackground",
-                            "token": "datepicker.view.year.hover.background",
+                            "name": "selectYear.hoverBackground",
+                            "token": "datepicker.select.year.hover.background",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Hover background of view year"
+                            "description": "Hover background of select year"
                         },
                         {
-                            "name": "viewYear.color",
-                            "token": "datepicker.view.year.color",
+                            "name": "selectYear.color",
+                            "token": "datepicker.select.year.color",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color of view year"
+                            "description": "Color of select year"
                         },
                         {
-                            "name": "viewYear.hoverColor",
-                            "token": "datepicker.view.year.hover.color",
+                            "name": "selectYear.hoverColor",
+                            "token": "datepicker.select.year.hover.color",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Hover color of view year"
+                            "description": "Hover color of select year"
                         },
                         {
-                            "name": "viewYear.padding",
-                            "token": "datepicker.view.year.padding",
+                            "name": "selectYear.padding",
+                            "token": "datepicker.select.year.padding",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Padding of view year"
+                            "description": "Padding of select year"
                         },
                         {
-                            "name": "viewYear.borderRadius",
-                            "token": "datepicker.view.year.border.radius",
+                            "name": "selectYear.borderRadius",
+                            "token": "datepicker.select.year.border.radius",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Border radius of view year"
+                            "description": "Border radius of select year"
                         },
                         {
                             "name": "group.borderColor",