Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Assignees

Comments

@fretfan
Copy link

@fretfan fretfan commented Mar 5, 2020

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/

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

As an interim workaround, you could create an input group that has a dropdown appended, and place a <b-calendar> component as the only item in the dropdown (just place the <b-calendar> in a <b-dropdown-form> child element) and then add a bit of logic to link the v-model of the calendar to the input v-model (I would avoid using a date type input so that the user isn't presented with two datepickers (native, if present, and the BootstrapVue picker)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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 tmorehouse self-assigned this Mar 5, 2020
@fdelameli
Copy link

@fdelameli fdelameli commented Mar 5, 2020

Type date manually will be great.

@Tiiinky
Copy link

@Tiiinky Tiiinky commented Mar 9, 2020

i second @fretfan
without this feature i cannot use the component, will try your suggestion for now @tmorehouse

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 9, 2020

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.

tmorehouse added a commit that referenced this issue Mar 10, 2020
@tmorehouse tmorehouse added this to To do in 2.7.0 via automation Mar 10, 2020
2.7.0 automation moved this from To do to Done Mar 10, 2020
tmorehouse added a commit that referenced this issue Mar 10, 2020
…on only mode (closes #4888) (#4915)

Co-authored-by: Jacob Müller
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment