🌐 AI搜索 & 代理 主页
Skip to content

fix(b-calendar, b-form-datepicker): minor adjustments to styling and example updates #5211

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.

Sign up for GitHub

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

Merged
jacobmllr95 merged 5 commits into from
Apr 22, 2020
Merged

fix(b-calendar, b-form-datepicker): minor adjustments to styling and example updates #5211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d0710e1
fix(b-calendar, b-form-datepicker): minor adjustments to styling
tmorehouse Apr 21, 2020
856b87e
Update form-datepicker.js
tmorehouse Apr 21, 2020
2d7bcbb
Update README.md
tmorehouse Apr 21, 2020
f59c44b
Merge branch 'dev' into calendar-style
tmorehouse Apr 21, 2020
d5a1352
Merge branch 'dev' into calendar-style
jacobmllr95 Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/calendar/_calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
33 changes: 33 additions & 0 deletions src/components/form-datepicker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 — 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
Expand Down
2 changes: 1 addition & 1 deletion src/components/form-datepicker/form-datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down