feat(input): add html input attributes autofocus/maxlength/pattern

* feat(input): add html input attributes autofocus/maxlength/pattern * docs(project): small adjustments for disabledDates
sumcumo · Jul 9, 2020 · 3dee8ee · 3dee8ee
1 parent 8acc799
commit 3dee8ee
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/docs/guide/DisabledDates/README.md b/docs/guide/DisabledDates/README.md
@@ -37,7 +37,7 @@ var state = {
   }
 }
 ```
-Every Saturday and Sunday is disabled 
+Every Saturday and Sunday is disabled
 
 ## Disable specific days of each month
 ```js
@@ -67,13 +67,16 @@ Following dates are disabled:
 2016-10-18
 
 ## Disable in given ranges
+::: tip IMPORTANT
+Both `to` and `from` properties are required to define a range of dates to highlight.
+:::
 ```js
 var state = {
   disabledDates: {
     ranges: [{
       from: new Date(2016, 11, 25),
       to: new Date(2016, 11, 30)
-    }, 
+    },
     {
       from: new Date(2017, 1, 12),
       to: new Date(2017, 2, 25)

diff --git a/docs/guide/Props/README.md b/docs/guide/Props/README.md
@@ -3,6 +3,7 @@
 
 | Prop                          | Type             | Default     | Description                                     |
 | ----------------------------- | -----------------| ----------- | ----------------------------------------------- |
+| autofocus                     | String           |             | Sets html `autofocus` attribute on input        |
 | bootstrap-styling             | Boolean          | false       | Use bootstrap v4 styling classes.               |
 | calendar-button               | Boolean          | false       | Show an icon that that can be clicked           |
 | calendar-button-icon          | String           |             | Use icon for button (ex: fa fa-calendar)        |
@@ -21,11 +22,13 @@
 | inline                        | Boolean          |             | To show the datepicker always open              |
 | input-class                   | String\|Object\|Array   |      | CSS class(es) applied to the input el           |
 | language                      | Object           | en          | Translation for days and months                 |
+| maxlength                     | String           |             | Sets html `maxlength` attribute on input        |
 | maximum-view                  | String           | 'year'      | If set, higher-level views won't show           |
 | minimum-view                  | String           | 'day'       | If set, lower-level views won't show            |
 | monday-first                  | Boolean          | false       | To start the week on Monday                     |
 | name                          | String           |             | Input name property                             |
 | open-date                     | Date\|String     |             | If set, open on that date                       |
+| pattern                       | String           |             | Sets html `pattern` attribute on input          |
 | placeholder                   | String           |             | Input placeholder text                          |
 | required                      | Boolean          | false       | Sets html required attribute on input           |
 | ref-name                      | String           |             | Sets a ref name directly on the input field     |

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
@@ -32,6 +32,9 @@
       :disabled="disabled"
       :required="required"
       :readonly="!typeable"
+      :autofocus="autofocus"
+      :maxlength="maxlength"
+      :pattern="pattern"
       :tabindex="tabindex"
       autocomplete="off"
       @click="showCalendar(false)"

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
@@ -24,6 +24,9 @@
       :calendar-button-icon-content="calendarButtonIconContent"
       :disabled="disabled"
       :required="required"
+      :autofocus="autofocus"
+      :maxlength="maxlength"
+      :pattern="pattern"
       :bootstrap-styling="bootstrapStyling"
       :use-utc="useUtc"
       :show-calendar-on-focus="showCalendarOnFocus"

diff --git a/src/mixins/inputProps.vue b/src/mixins/inputProps.vue
@@ -108,6 +108,21 @@ export default ({
       type: Boolean,
       default: false,
     },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+    maxlength: {
+      type: [
+        Number,
+        String,
+      ],
+      default: null,
+    },
+    pattern: {
+      type: String,
+      default: null,
+    },
   },
 })
 </script>