Add manual entry

src/components/calendar/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
     <span :class="containerClass">
-        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue"  />
+        <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualEntry" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" />
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
@@ -273,10 +273,6 @@ export default {
             type: Boolean,
             default: false
         },
-        keepInvalid: {
-            type: Boolean,
-            default: false
-        },
         hideOnDateTimeSelect: {
             type: Boolean,
             default: false
@@ -289,6 +285,10 @@ export default {
             type: Boolean,
             default: false
         },
+        manualEntry: {
+            type: Boolean,
+            default: true
+        },
         locale: {
             type: Object,
             default: () => {

src/views/calendar/CalendarDemo.vue

@@ -23,11 +23,11 @@
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Min-Max</h3>
-                    <Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :readonly="true" />
+                    <Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualEntry="false" />
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Disable Days</h3>
-                    <Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :readonly="true" />
+                    <Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualEntry="false" />
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Navigators</h3>
@@ -35,11 +35,11 @@
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Multiple</h3>
-                    <Calendar v-model="dates1" selectionMode="multiple" :readonly="true" />
+                    <Calendar v-model="dates1" selectionMode="multiple" :manualEntry="false" />
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Range</h3>
-                    <Calendar v-model="dates2" selectionMode="range" :readonly="true" />
+                    <Calendar v-model="dates2" selectionMode="range" :manualEntry="false" />
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Button Bar</h3>

src/views/calendar/CalendarDoc.vue

@@ -382,12 +382,6 @@ export default {
                                 <td>false</td>
                                 <td>Whether to show the seconds in time picker.</td>
                             </tr>
-                            <tr>
-                                <td>keepInvalid</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Keep invalid value when input blur.</td>
-                            </tr>
                             <tr>
                                 <td>hideOnDateTimeSelect</td>
                                 <td>boolean</td>
@@ -406,6 +400,12 @@ export default {
                                 <td>false</td>
                                 <td>When enabled, calendar will show week numbers.</td>
                             </tr>
+                            <tr>
+                                <td>manualEntry</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Wheter to allow prevents entering the date manually via typing.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>