Skip to content
Permalink
Browse files
feat(b-form-datepicker): add calendar-width prop (closes #4817) (#4822)
  • Loading branch information
tmorehouse committed Feb 24, 2020
1 parent 4bafce4 commit 91b77bc9a6b1a4796698ce3185c0b354156ce563
Showing 4 changed files with 18 additions and 1 deletion.
@@ -1,6 +1,11 @@
// BCalendar custom styles

.b-calendar {
.b-calendar-inner {
// Prevent calendar from going below this width
min-width: 250px;
}

output.readonly {
background-color: $input-disabled-bg;
opacity: 1;
@@ -855,7 +855,7 @@ export const BCalendar = Vue.extend({
'small',
{
key: idx,
staticClass: 'col',
staticClass: 'col text-truncate',
class: { 'text-muted': this.disabled },
attrs: {
title: d.label === d.text ? null : d.label,
@@ -997,6 +997,7 @@ export const BCalendar = Vue.extend({
const $widget = h(
'div',
{
staticClass: 'b-calendar-inner',
class: this.block ? 'd-block' : 'd-inline-block',
style: this.block ? {} : { width: this.width },
attrs: {
@@ -102,6 +102,11 @@ const propsMixin = {
type: String,
default: null
},
calendarWidth: {
// Width of the calendar dropdown
type: String,
default: '270px'
},
selectedVariant: {
// Variant color to use for the selected date
type: String,
@@ -260,6 +265,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
locale: self.locale,
startWeekday: self.startWeekday,
direction: self.direction,
width: self.calendarWidth,
dateDisabledFn: self.dateDisabledFn,
selectedVariant: self.selectedVariant,
todayVariant: self.todayVariant,
@@ -64,6 +64,11 @@
"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": "calendarWidth",
"version": "2.6.0",
"description": "Sets the width of the calendar dropdown (see the `b-calendar` prop `width` for details)"
},
{
"prop": "min",
"description": "The minimum date the calendar will show"

0 comments on commit 91b77bc

Please sign in to comment.