Fixed #4871 - Calendar: new iconDisplay property

components/lib/calendar/BaseCalendar.vue

@@ -31,6 +31,10 @@ export default {
             type: Boolean,
             default: false
         },
+        iconDisplay: {
+            type: String,
+            default: 'button'
+        },
         icon: {
             type: String,
             default: undefined

components/lib/calendar/Calendar.d.ts

@@ -479,6 +479,11 @@ export interface CalendarProps {
      * @defaultValue false
      */
     showIcon?: boolean | undefined;
+    /**
+     * Icon position of the component. This only applies if the showIcon option is set to true.
+     * @defaultValue 'button'
+     */
+    iconDisplay?: 'button' | 'input' | undefined;
     /**
      * Icon of the calendar button.
      * @deprecated since v3.27.0. Use 'dropdownicon' slot.
@@ -784,6 +789,16 @@ export interface CalendarSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom input icon template.
+     * @param {Object} scope - input icon slot's params.
+     */
+    inputicon(scope: {
+        /**
+         * Style class of the input icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom previous icon template.
      * @param {Object} scope - previous icon slot's params.

components/lib/calendar/Calendar.vue

@@ -28,7 +28,7 @@
             v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <CalendarButton
-            v-if="showIcon"
+            v-if="showIcon && iconDisplay === 'button'"
             :class="cx('dropdownButton')"
             :disabled="disabled"
             @click="onButtonClick"
@@ -47,6 +47,11 @@
                 </slot>
             </template>
         </CalendarButton>
+        <template v-else-if="showIcon && iconDisplay === 'input'">
+            <slot name="inputicon" :class="cx('inputIcon')">
+                <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
+            </slot>
+        </template>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
                 <div

components/lib/calendar/style/CalendarStyle.js

@@ -22,6 +22,10 @@ const css = `
         border-bottom-left-radius: 0;
     }
 
+    .p-calendar .p-datepicker-trigger-icon {
+        cursor: pointer;
+    }
+
     /* Fluid */
     .p-fluid .p-calendar {
         display: flex;
@@ -158,7 +162,8 @@ const classes = {
     root: ({ props, state }) => [
         'p-calendar p-component p-inputwrapper',
         {
-            'p-calendar-w-btn': props.showIcon,
+            'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
+            'p-input-icon-right': props.showIcon && props.iconDisplay === 'input',
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-inputwrapper-filled': props.modelValue,
@@ -168,6 +173,7 @@ const classes = {
     ],
     input: 'p-inputtext p-component',
     dropdownButton: 'p-datepicker-trigger',
+    inputIcon: 'p-datepicker-trigger-icon',
     panel: ({ instance, props, state }) => [
         'p-datepicker p-component',
         {