bootstrap-vue
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
421 lines (420 loc) • 16.4 kB
JSON
{
"name": "@bootstrap-vue/form-datepicker",
"version": "1.0.0",
"meta": {
"title": "Form Datepicker",
"version": "2.5.0",
"slug": "form-datepicker",
"description": "BootstrapVue custom date picker input form control, which provides full WAI-ARIA accessibility (a11y) and supports internationalization (i18n).",
"components": [
{
"component": "BFormDatepicker",
"version": "2.5.0",
"description": "Custom date picker form control, supporting I18N",
"aliases": [
"BDatepicker"
],
"props": [
{
"prop": "boundary",
"description": "The boundary constraint of the menu: `'scrollParent'`, `'window'`, `'viewport'`, or a reference to an `HTMLElement`"
},
{
"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",
"description": "Sets the width of the calendar dropdown (see the `b-calendar` prop `width` for details)"
},
{
"prop": "closeButton",
"description": "When set, shows the optional close button"
},
{
"prop": "closeButtonVariant",
"description": "Button variant to use for the optional `close` button"
},
{
"prop": "dark",
"description": "When set, gives the popup calendar dialog a dark background"
},
{
"prop": "dateDisabledFn",
"description": "Set to a function reference which returns `true` if the date is disabled, or `false` if the date should be enabled. See documentation for details"
},
{
"prop": "dateFormatOptions",
"version": "2.6.0",
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
},
{
"prop": "dateInfoFn",
"version": "2.12.0",
"description": "Set to a function reference which returns a class (string), or classes (array of strings) to apply to the date cell. See calendar documentation for details. Passed through to the child calendar component"
},
{
"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": "disabled",
"description": "Places the calendar in a non-interactive disabled state"
},
{
"prop": "dropleft",
"description": "When set, positions the menu to the left of the button"
},
{
"prop": "dropright",
"description": "When set, positions the menu to the right of the button"
},
{
"prop": "dropup",
"description": "When set, positions the menu on the top of the button"
},
{
"prop": "hideHeader",
"description": "When `true`, visually hides the selected date header"
},
{
"prop": "initialDate",
"version": "2.7.0",
"description": "When a `value` is not specified, sets the initial calendar month date that will be presented to the user. Accepts a value in `YYYY-MM-DD` format or a `Date` object. Defaults to the current date (or min or max if the current date is out of range)"
},
{
"prop": "labelCalendar",
"description": "Value of the `aria-label` and `role-description` attributes applied to the calendar grid"
},
{
"prop": "labelCloseButton",
"description": "Content for the optional `Close` button"
},
{
"prop": "labelCurrentMonth",
"description": "Value of the `aria-label` and `title` attributes on the `Current Month` navigation button"
},
{
"prop": "labelHelp",
"description": "Help text that appears at the bottom of the calendar grid"
},
{
"prop": "labelNav",
"description": "Value of the `aria-label` attribute on to the calendar navigation button wrapper"
},
{
"prop": "labelNextDecade",
"version": "2.11.0",
"description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button"
},
{
"prop": "labelNextMonth",
"description": "Value of the `aria-label` and `title` attributes on the `Next Month` navigation button"
},
{
"prop": "labelNextYear",
"description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
},
{
"prop": "labelNoDateSelected",
"description": "Label to use when no date is currently selected"
},
{
"prop": "labelPrevDecade",
"version": "2.11.0",
"description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button"
},
{
"prop": "labelPrevMonth",
"description": "Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button"
},
{
"prop": "labelPrevYear",
"description": "Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button"
},
{
"prop": "labelResetButton",
"description": "Content for the optional `Reset` button"
},
{
"prop": "labelSelected",
"description": "Value of the `aria-label` attribute set on the calendar grid date button that is selected"
},
{
"prop": "labelToday",
"description": "Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date"
},
{
"prop": "labelTodayButton",
"description": "Content for the optional `Select today` button"
},
{
"prop": "locale",
"description": "Locale (or locales) for the calendar to use. When passing an array of locales, the order of the locales is from most preferred to least preferred"
},
{
"prop": "max",
"description": "The maximum date the calendar will show"
},
{
"prop": "menuClass",
"version": "2.6.0",
"description": "Class (or classes) to apply to to popup menu wrapper"
},
{
"prop": "min",
"description": "The minimum date the calendar will show"
},
{
"prop": "navButtonVariant",
"version": "2.17.0",
"description": "Theme color variant to use for the navigation buttons"
},
{
"prop": "noCloseOnSelect",
"description": "Disables closing the popup date picker when a date is clicked/selected"
},
{
"prop": "noFlip",
"description": "Prevent the menu from auto flipping positions"
},
{
"prop": "noHighlightToday",
"description": "Disabled the highlighting of todays date in the calendar"
},
{
"prop": "offset",
"description": "Specify the number of pixels to shift the menu by. Negative values supported"
},
{
"prop": "placeholder",
"description": "Text so show in the form control when no date is selected. Defaults to the `label-no-date-selected` prop value"
},
{
"prop": "popperOpts",
"description": "Additional configuration to pass to Popper.js"
},
{
"prop": "readonly",
"description": "Places the calendar in an interactive readonly state. Disables updating the v-model, while still allowing date navigation"
},
{
"prop": "required",
"description": "When set, adds the `aria-required=\"true\"` attribute on the component. Required validation needs to be handled by your application"
},
{
"prop": "resetButton",
"description": "When set, shows the optional `reset` button"
},
{
"prop": "resetButtonVariant",
"description": "Button variant to use for the optional `reset` button"
},
{
"prop": "resetValue",
"description": "When the optional `reset` button is clicked, the selected date will be set to this value. Default is to clear the selected value"
},
{
"prop": "right",
"description": "Align the right edge of the menu with the right of the button"
},
{
"prop": "selectedVariant",
"description": "Theme color variant to use for the selected date button"
},
{
"prop": "showDecadeNav",
"version": "2.11.0",
"description": "When `true`, shows the +/- decade navigation buttons"
},
{
"prop": "startWeekday",
"description": "Day of week to start the calendar. `0` for Sunday, `1` for Monday, `6` for Saturday, etc."
},
{
"prop": "todayButton",
"description": "When set, shows the optional `select today` button"
},
{
"prop": "todayButtonVariant",
"description": "Button variant to use for the optional `select today` button"
},
{
"prop": "todayVariant",
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
},
{
"prop": "value",
"description": "Initially selected date value. Accepts either a `YYYY-MM-DD` string or a `Date` object"
},
{
"prop": "valueAsDate",
"description": "Returns a `Date` object for the v-model instead of a `YYYY-MM-DD` string"
},
{
"prop": "weekdayHeaderFormat",
"version": "2.12.0",
"description": "Format to use for the calendar weekday headings. Possible values are `long`, `short` (default), or `narrow`"
}
],
"events": [
{
"event": "context",
"description": "`b-calendar` context event. Emitted when the user changes the active date via date navigation buttons or cursor control",
"args": [
{
"arg": "context",
"description": "The `b-calendar` context object. See the `b-calendar` documentaion for details",
"type": "Object"
}
]
},
{
"event": "hidden",
"version": "2.9.0",
"description": "Emitted when the picker popup has hidden"
},
{
"event": "input",
"description": "Emitted when updating the v-model",
"args": [
{
"arg": "date",
"description": "Either a string in the format of `YYYY-MM-DD` or a `Date` object (if `value-as-date` prop is `true`)",
"type": [
"String",
"Date"
]
}
]
},
{
"event": "shown",
"version": "2.9.0",
"description": "Emitted when the picker popup has shown"
}
],
"slots": [
{
"name": "button-content",
"version": "2.6.0",
"description": "Content to place in the datepicker's icon button",
"scope": [
{
"prop": "isHovered",
"type": "Boolean",
"description": "`true` if the component is hovered"
},
{
"prop": "hasFocus",
"type": "Boolean",
"description": "`true` if the datepicker icon button has focus"
},
{
"prop": "state",
"type": "Boolean",
"description": "The value of the `state` prop. `true` (valid), `false` (invalid), or `null`"
},
{
"prop": "open",
"type": "Boolean",
"description": "The visibility state of the popup. `true` if the popup is visible and `false` if not"
}
]
},
{
"name": "nav-next-decade",
"version": "2.12.0",
"description": "Used to place custom content in the next decade navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-next-month",
"version": "2.12.0",
"description": "Used to place custom content in the next month navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-next-year",
"version": "2.12.0",
"description": "Used to place custom content in the next year navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-prev-decade",
"version": "2.12.0",
"description": "Used to place custom content in the previous decade navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-prev-month",
"version": "2.12.0",
"description": "Used to place custom content in the previous month navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-prev-year",
"version": "2.12.0",
"description": "Used to place custom content in the previous year navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
},
{
"name": "nav-this-month",
"version": "2.12.0",
"description": "Used to place custom content in the this month/day navigation button",
"scope": [
{
"prop": "isRTL",
"type": "Boolean",
"description": "Will be `true` if the date navigation bar is rendered right to left"
}
]
}
]
}
]
}
}