Skip to content

Datepicker with typeable and mask options or as icon-button #4888

@fretfan

Description

@fretfan

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>

image
Something similar done in "eonasdan bootstrap datepicker": https://eonasdan.github.io/bootstrap-datetimepicker/

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions