Skip to content
Permalink
Browse files
fix(b-calendar, b-form-datepicker): minor adjustments to styling and …
…example updates (#5211)

* fix(b-calendar, b-form-datepicker): minor adjustments to styling

* Update form-datepicker.js

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
tmorehouse and jacobmllr95 committed Apr 22, 2020
1 parent 9018221 commit f0d8ffe4253079939008108fe86529a2f69553f1
Showing 3 changed files with 39 additions and 1 deletion.
@@ -37,6 +37,11 @@
// Easy rounded corners on contained elements,
// specifically the footer of the calendar grid
overflow: hidden;

.row {
// Prevent grid rows from wrapping
flex-wrap: nowrap;
}
}

.b-calendar-grid-caption {
@@ -481,6 +481,39 @@ You can use the `isRTL` scoped property to "flip" the prev vs next button conten
left-to-right to right-to-left orientation change &mdash; i.e. the previous year button will be on
the right when `isRTL` is `true`, instead of the left.

### Full width calendar dropdown

To create a full width calendar dropdown (where the width matches the input width), simply set the
`menu-class` prop to `'w-100'` and set the `calendar-width` prop to `'100%'`:

```html
<template>
<div>
<label for="datepicker-full-width">Choose a date</label>
<b-form-datepicker
id="datepicker-full-width"
v-model="value"
menu-class="w-100"
calendar-width="100%"
class="mb-2"
></b-form-datepicker>
<p>Value: '{{ value }}'</p>
</div>
</template>

<script>
export default {
data() {
return {
value: ''
}
}
}
</script>

<!-- b-form-datepicker-full-width.vue -->
```

## Internationalization

Internationalization of the date picker's calendar is provided via
@@ -530,7 +530,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
{
key: 'calendar',
ref: 'calendar',
staticClass: 'b-form-date-calendar',
staticClass: 'b-form-date-calendar w-100',
props: this.calendarProps,
on: {
selected: this.onSelected,

0 comments on commit f0d8ffe

Please sign in to comment.