Datepicker with typeable and mask options or as icon-button

First of all: thank you for datepicker component. Got tired of using broken 3rd party datepickers.

Is your feature request related to a problem? Please describe…

Sometimes user needs to select dates between 1950-2050 quickly. Clicking through datepicker takes too many clicks, faster option is to type date manually.

Describe the solution you’d like

If there could be a prop to switch datepicker into typeable mode. User can type date manually, without clicking through datepicker. Masked input is also welcome. For example only digits in format DD.MM.YYYY are allowed. Dots can be auto-prefilled. Paste option.

Easier solution could be: add prop to display datepicker as an “icon button” without date display field. Then datepicker can be appended/prepended into input-group next to b-form-input. Logic of handling masking and typing is left to developer in this case.

<b-input-group>
  <b-form-input v-model="someDate" @change="maskValue"></b-form-input>
  <template v-slot:append>
    <b-datepicker v-model="someDate" icon-only /> // datepicker as icon (no date text)
  </template>
</b-input-group>

Something similar done in “eonasdan bootstrap datepicker”: https://eonasdan.github.io/bootstrap-datetimepicker/

[tmorehouse]

We’ll see if we can make an “icon button” only option for both the <b-form-datepicker> and <b-form-timepicker> components, which could then be placed as needed (i.e. in an input group append/prepend)

[tmorehouse]

We probably won’t add directly in an option for typing a date in, as there are so many formats (and locales) for date formats, and Date.parse(...) is notorious for being inconsistent across browsers (and also not supporting locale overrides).

But we will be making a “button” only version to allow users to provide their own input or other entry option.