bootstrap-vue
Version:
BootstrapVue, with more than 85 custom components, over 45 plugins, several custom directives, and over 300 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated W
432 lines (431 loc) • 16.7 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": "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": "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": "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": "disabled",
"description": "Places the calendar in a non-interactive disabled state"
},
{
"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": "selectedVariant",
"description": "Theme color variant to use for the selected date button"
},
{
"prop": "todayVariant",
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `variant` prop"
},
{
"prop": "noHighlightToday",
"description": "Disabled the highlighting of todays date in the calendar"
},
{
"prop": "startWeekday",
"description": "Day of week to start the calendar. `0` for Sunday, `1` for Monday, `6` for Saturday, etc."
},
{
"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": "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",
"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"
},
{
"prop": "max",
"description": "The maximum date the calendar will show"
},
{
"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": "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": "hideHeader",
"description": "When `true`, visually hides the selected date header"
},
{
"prop": "showDecadeNav",
"version": "2.11.0",
"description": "When `true`, shows the +/- decade navigation buttons"
},
{
"prop": "menuClass",
"version": "2.6.0",
"description": "Class (or classes) to apply to to popup menu wrapper"
},
{
"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": "resetButton",
"description": "When set, shows the optional `reset` button"
},
{
"prop": "resetButtonVariant",
"description": "Button variant to use for the optional `reset` button"
},
{
"prop": "closeButton",
"description": "When set, shows the optional close button"
},
{
"prop": "closeButtonVariant",
"description": "Button variant to use for the optional `close` button"
},
{
"prop": "noCloseOnSelect",
"description": "Disables closing the popup date picker when a date is clicked/selected"
},
{
"prop": "dropup",
"description": "When set, positions the menu on the top of the button"
},
{
"prop": "dropright",
"description": "When set, positions the menu to the right of the button"
},
{
"prop": "dropleft",
"description": "When set, positions the menu to the left of the button"
},
{
"prop": "right",
"description": "Align the right edge of the menu with the right of the button"
},
{
"prop": "noFlip",
"description": "Prevent the menu from auto flipping positions"
},
{
"prop": "offset",
"description": "Specify the number of pixels to shift the menu by. Negative values supported"
},
{
"prop": "popperOpts",
"description": "Additional configuration to pass to Popper.js"
},
{
"prop": "boundary",
"description": "The boundary constraint of the menu: `'scrollParent'`, `'window'`, `'viewport'`, or a reference to an `HTMLElement`"
},
{
"prop": "dark",
"description": "When set, gives the popup calendar dialog a dark background"
},
{
"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": "labelPrevDecade",
"version": "2.11.0",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button"
},
{
"prop": "labelPrevYear",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button"
},
{
"prop": "labelPrevMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button"
},
{
"prop": "labelCurrentMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Current Month` navigation button"
},
{
"prop": "labelNextMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Next Month` navigation button"
},
{
"prop": "labelNextYear",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
},
{
"prop": "labelNextDecade",
"version": "2.11.0",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button"
},
{
"prop": "labelSelected",
"settings": true,
"description": "Value of the `aria-label` attribute set on the calendar grid date button that is selected"
},
{
"prop": "labelToday",
"settings": true,
"description": "Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date"
},
{
"prop": "labelNoDateSelected",
"settings": true,
"description": "Label to use when no date is currently selected"
},
{
"prop": "labelCalendar",
"settings": true,
"description": "Value of the `aria-label` and `role-description` attributes applied to the calendar grid"
},
{
"prop": "labelNav",
"settings": true,
"description": "Value of the `aria-label` attribute on to the calendar navigation button wrapper"
},
{
"prop": "labelHelp",
"settings": true,
"description": "help text that appears at the bottom of the calendar grid"
},
{
"prop": "labelTodayButton",
"settings": true,
"description": "Content for the optional `Select today` button"
},
{
"prop": "labelResetButton",
"settings": true,
"description": "Content for the optional `Reset` button"
},
{
"prop": "labelCloseButton",
"settings": true,
"description": "Content for the optional `Close` button"
},
{
"prop": "dateFormatOptions",
"version": "2.6.0",
"description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`"
},
{
"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": "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": "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": "shown",
"version": "2.9.0",
"description": "Emitted when the picker popup has shown"
},
{
"event": "hidden",
"version": "2.9.0",
"description": "Emitted when the picker popup has hidden"
}
],
"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-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-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-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-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"
}
]
},
{
"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-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"
}
]
}
]
}
]
}
}