Skip to content
Permalink
Browse files
feat(b-form-datepicker, b-form-timepicker): add support for icon butt…
…on only mode (closes #4888) (#4915)

Co-authored-by: Jacob Müller
  • Loading branch information
tmorehouse committed Mar 10, 2020
1 parent 1d957eb commit 13660c3ad02f6c692d306ec95f0d2b19212f9423
Showing 9 changed files with 283 additions and 10 deletions.
@@ -313,6 +313,58 @@ component's value.
Want a fancy popup with a dark background instead of a light background? Set the `dark` prop to
`true` to enable the dark background.

### Button only mode

<span class="badge badge-info small">v2.7.0+</span>

Fancy just a button that launches the date picker dialog, or want to provide your own optional text
input field? Use the `button-only` prop to render the datepicker as a dropdown button. The formatted
date label will be rendered with the class `sr-only` (available only to screen readers).

In the following simple example, we are placing the datepicker (button only mode) as an append to a
`<b-input-group>`:

```html
<template>
<div>
<label for="example-input">Choose a date</label>
<b-input-group class="mb-3">
<b-form-input
id="example-input"
v-model="value"
type="text"
placeholder="YYYY-MM-DD"
></b-form-input>
<b-input-group-append>
<b-form-datepicker
v-model="value"
button-only
right
locale="en-US"
aria-controls="example-input"
></b-form-datepicker>
</b-input-group-append">
</b-input-group>
<p>Value: '{{ value }}'</p>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>
<!-- b-form-datepicker-button-only.vue -->
```
Control the size of the button via the `size` prop, and the button variant via the `button-variant`
prop.
### Date string format
<span class="badge badge-info small">v2.6.0+</span>
@@ -331,7 +383,8 @@ properties for the `Intl.DateTimeFormat` object (see also
:date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
locale="en"
></b-form-datepicker>
<label for="datepicker-dateformat2">Short date format</label>
<label class="mt-3" for="datepicker-dateformat2">Short date format</label>
<b-form-datepicker
id="datepicker-dateformat2"
:date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
@@ -108,6 +108,15 @@ const propsMixin = {
type: String,
default: null
},
buttonOnly: {
type: Boolean,
default: false
},
buttonVariant: {
// Applicable in button only mode
type: String,
default: 'secondary'
},
calendarWidth: {
// Width of the calendar dropdown
type: String,
@@ -310,7 +319,10 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
this.localYMD = formatYMD(newVal) || ''
},
localYMD(newVal) {
this.$emit('input', this.valueAsDate ? parseYMD(newVal) || null : newVal || '')
// We only update the v-model when the datepicker is open
if (this.isVisible) {
this.$emit('input', this.valueAsDate ? parseYMD(newVal) || null : newVal || '')
}
},
calendarYM(newVal, oldVal) /* istanbul ignore next */ {
// Displayed calendar month has changed
@@ -42,9 +42,11 @@ describe('form-date', () => {
await waitRAF()

expect(wrapper.classes()).toContain('b-form-datepicker')
expect(wrapper.classes()).toContain('b-form-btn-label-control')
expect(wrapper.classes()).toContain('form-control')
expect(wrapper.classes()).toContain('dropdown')
expect(wrapper.classes()).not.toContain('show')
expect(wrapper.classes()).not.toContain('btn-group')
expect(wrapper.attributes('role')).toEqual('group')

expect(wrapper.find('.dropdown-menu').exists()).toBe(true)
@@ -54,6 +56,7 @@ describe('form-date', () => {

expect(wrapper.find('label.form-control').exists()).toBe(true)
expect(wrapper.find('label.form-control').attributes('for')).toEqual('test-base')
expect(wrapper.find('label.form-control').classes()).not.toContain('sr-only')

expect(wrapper.find('input[type="hidden"]').exists()).toBe(false)

@@ -66,6 +69,48 @@ describe('form-date', () => {
wrapper.destroy()
})

it('has expected base structure in button-only mode', async () => {
const wrapper = mount(BFormDatepicker, {
attachToDocument: true,
propsData: {
id: 'test-button-only',
buttonOnly: true
}
})

expect(wrapper.isVueInstance()).toBe(true)
expect(wrapper.is('div')).toBe(true)
await waitNT(wrapper.vm)
await waitRAF()

expect(wrapper.classes()).toContain('b-form-datepicker')
expect(wrapper.classes()).not.toContain('b-form-btn-label-control')
expect(wrapper.classes()).not.toContain('form-control')
expect(wrapper.classes()).toContain('dropdown')
expect(wrapper.classes()).not.toContain('show')
expect(wrapper.classes()).toContain('btn-group')
expect(wrapper.attributes('role')).not.toEqual('group')

expect(wrapper.find('.dropdown-menu').exists()).toBe(true)
expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
expect(wrapper.find('.dropdown-menu').attributes('role')).toEqual('dialog')
expect(wrapper.find('.dropdown-menu').attributes('aria-modal')).toEqual('false')

expect(wrapper.find('label.form-control').exists()).toBe(true)
expect(wrapper.find('label.form-control').attributes('for')).toEqual('test-button-only')
expect(wrapper.find('label.form-control').classes()).toContain('sr-only')

expect(wrapper.find('input[type="hidden"]').exists()).toBe(false)

const $btn = wrapper.find('button#test-button-only')
expect($btn.exists()).toBe(true)
expect($btn.attributes('aria-haspopup')).toEqual('dialog')
expect($btn.attributes('aria-expanded')).toEqual('false')
expect($btn.find('svg.bi-calendar').exists()).toBe(true)

wrapper.destroy()
})

it('renders hidden input when name prop is set', async () => {
const wrapper = mount(BFormDatepicker, {
attachToDocument: true,
@@ -69,6 +69,16 @@
"prop": "direction",
"description": "Set to the string 'rtl' or 'ltr' to explicitly force the calendar to render in right-to-left or left-ro-right (respectively) mode. Defaults to the resolved locale's directionality"
},
{
"prop": "buttonOnly",
"version": "2.7.0",
"description": "Renders the datepicker as a dropdown button instead of a form-control"
},
{
"prop": "buttonVariant",
"version": "2.7.0",
"description": "The button variant to use when in `button-only` mode. Has no effect if prop `button-only` is not set"
},
{
"prop": "calendarWidth",
"version": "2.6.0",
@@ -208,6 +208,60 @@ control the positioning of the popup calendar.
Refer to the [`<b-dropdown>` documentation](/docs/components/dropdown) for details on the effects
and usage of these props.

### Button only mode

<span class="badge badge-info small">v2.7.0+</span>

Fancy just a button that launches the timepicker dialog, or want to provide your own optional text
input field? Use the `button-only` prop to render the timepicker as a dropdown button. The formatted
time label will be rendered with the class `sr-only` (available only to screen readers).

In the following simple example, we are placing the timepicker (button only mode) as an append to a
`<b-input-group>`:

```html
<template>
<div>
<label for="example-input">Choose a time</label>
<b-input-group class="mb-3">
<b-form-input
id="example-input"
v-model="value"
type="text"
placeholder="HH:mm:ss"
></b-form-input>
<b-input-group-append>
<b-form-timepicker
v-model="value"
button-only
right
show-seconds
:hour12="false"
locale="en-US"
aria-controls="example-input"
></b-form-timepicker>
</b-input-group-append">
</b-input-group>
<p>Value: '{{ value }}'</p>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>
<!-- b-form-timepicker-button-only.vue -->
```
Control the size of the button via the `size` prop, and the button variant via the `button-variant`
prop.
## Internationalization
Internationalization of the time interface is provided via
@@ -90,6 +90,15 @@ const propsMixin = {
type: [Number, String],
default: 1
},
buttonOnly: {
type: Boolean,
default: false
},
buttonVariant: {
// Applicable in button only mode
type: String,
default: 'secondary'
},
nowButton: {
type: Boolean,
default: false
@@ -240,7 +249,12 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
this.localHMS = newVal || ''
},
localHMS(newVal) {
this.$emit('input', newVal || '')
// We only update hte v-model value when the timepicker
// is open, to prevent cursor jumps when bound to a
// text input in button only mode
if (this.isVisible) {
this.$emit('input', newVal || '')
}
}
},
methods: {
@@ -41,9 +41,11 @@ describe('form-timepicker', () => {
await waitRAF()

expect(wrapper.classes()).toContain('b-form-timepicker')
expect(wrapper.classes()).toContain('b-form-btn-label-control')
expect(wrapper.classes()).toContain('form-control')
expect(wrapper.classes()).toContain('dropdown')
expect(wrapper.classes()).not.toContain('show')
expect(wrapper.classes()).not.toContain('btn-group')
expect(wrapper.attributes('role')).toEqual('group')

expect(wrapper.find('.dropdown-menu').exists()).toBe(true)
@@ -66,6 +68,49 @@ describe('form-timepicker', () => {
wrapper.destroy()
})

it('has expected default structure when button-only is true', async () => {
const wrapper = mount(BFormTimepicker, {
attachToDocument: true,
propsData: {
id: 'test-button-only',
buttonOnly: true
}
})

expect(wrapper.isVueInstance()).toBe(true)
expect(wrapper.is('div')).toBe(true)
await waitNT(wrapper.vm)
await waitRAF()

expect(wrapper.classes()).toContain('b-form-timepicker')
expect(wrapper.classes()).not.toContain('b-form-btn-label-control')
expect(wrapper.classes()).not.toContain('form-control')
expect(wrapper.classes()).toContain('dropdown')
expect(wrapper.classes()).not.toContain('show')
expect(wrapper.classes()).toContain('btn-group')
expect(wrapper.attributes('role')).not.toEqual('group')

expect(wrapper.find('.dropdown-menu').exists()).toBe(true)
expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
expect(wrapper.find('.dropdown-menu').attributes('role')).toEqual('dialog')
expect(wrapper.find('.dropdown-menu').attributes('aria-modal')).toEqual('false')

expect(wrapper.find('label.form-control').exists()).toBe(true)
expect(wrapper.find('label.form-control').attributes('for')).toEqual('test-button-only')
expect(wrapper.find('label.form-control').text()).toContain('No time selected')
expect(wrapper.find('label.form-control').classes()).toContain('sr-only')

expect(wrapper.find('input[type="hidden"]').exists()).toBe(false)

const $btn = wrapper.find('button#test-button-only')
expect($btn.exists()).toBe(true)
expect($btn.attributes('aria-haspopup')).toEqual('dialog')
expect($btn.attributes('aria-expanded')).toEqual('false')
expect($btn.find('svg.bi-clock').exists()).toBe(true)

wrapper.destroy()
})

it('renders hidden input when name prop is set', async () => {
const wrapper = mount(BFormTimepicker, {
attachToDocument: true,
@@ -62,6 +62,16 @@
"prop": "hideHeader",
"description": "When set, visually hides the selected date header"
},
{
"prop": "buttonOnly",
"version": "2.7.0",
"description": "Renders the datepicker as a dropdown button instead of a form-control"
},
{
"prop": "buttonVariant",
"version": "2.7.0",
"description": "The button variant to use when in `button-only` mode. Has no effect if prop `button-only` is not set"
},
{
"prop": "menuClass",
"description": "Class (or classes) to apply to to popup menu wrapper"

0 comments on commit 13660c3

Please sign in to comment.