Fixed #1824 - New calendar styple props for v2

primefaces · Nov 23, 2021 · e5a1f7f · e5a1f7f
1 parent 32d77a0
commit e5a1f7f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js
@@ -227,6 +227,30 @@ const CalendarProps = [
         type: "string",
         default: "null",
         description: 'Id of the element or "body" for document where the overlay should be appended to.'
+    },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
+    },
+    {
+        name: "inputClass",
+        type: "string",
+        default: "null",
+        description: "Style class of the input field."
+    },
+    {
+        name: "class",
+        type: "string",
+        default: "null",
+        description: "Style class of the component."
+    },
+    {
+        name: "style",
+        type: "any",
+        default: "null",
+        description: "Inline style of the component."
     }
 ];
 

diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
@@ -55,6 +55,10 @@ declare class Calendar extends Vue {
     locale?: LocaleSettings;
     ariaLabelledBy?: string;
     appendTo?: string;
+    inputStyle?: any;
+    inputClass?: string;
+    style?: any;
+    class?: string;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $emit(eventName: 'month-change', e: { month: number, year: number }): this;

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -1,6 +1,7 @@
 <template>
-    <span :class="containerClass">
-        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
+    <span :class="containerClass" :style="styles">
+        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none"
+            :class="inputClass" :style="inputStyle" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
             <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
@@ -299,7 +300,11 @@ export default {
         appendTo: {
             type: String,
             default: null
-        }
+        },
+        inputClass: null,
+        inputStyle: null,
+        className: null,
+        styles: null
     },
     navigationState: null,
     scrollHandler: null,
@@ -2205,7 +2210,7 @@ export default {
         },
         containerClass() {
             return [
-                'p-calendar p-component p-inputwrapper',
+                'p-calendar p-component p-inputwrapper', this.className,
                 {
                     'p-calendar-w-btn': this.showIcon,
                     'p-calendar-timeonly': this.timeOnly,

diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
@@ -432,6 +432,30 @@ export default {
                                 <td>null</td>
                                 <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                             </tr>
+                            <tr>
+                                <td>inputStyle</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Inline style of the input field.</td>
+                            </tr>
+                            <tr>
+                                <td>inputClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the input field.</td>
+                            </tr>
+                            <tr>
+                                <td>styles</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Inline style of the component.</td>
+                            </tr>
+                            <tr>
+                                <td>className</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the component.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>