@coreui/vue-pro
Version:
UI Components Library for Vue.js
392 lines (388 loc) • 11.6 kB
JavaScript
'use strict';
var vue = require('vue');
var CDateRangePicker = require('../date-range-picker/CDateRangePicker.js');
var props = require('../props.js');
const CDatePicker = vue.defineComponent({
name: 'CDatePicker',
props: {
/**
* A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
*
* @since 5.4.0
*/
ariaNavNextMonthLabel: {
type: String,
default: 'Next month',
},
/**
* A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
*
* @since 5.4.0
*/
ariaNavNextYearLabel: {
type: String,
default: 'Next year',
},
/**
* A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
*
* @since 5.4.0
*/
ariaNavPrevMonthLabel: {
type: String,
default: 'Previous month',
},
/**
* A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
*
* @since 5.4.0
*/
ariaNavPrevYearLabel: {
type: String,
default: 'Previous year',
},
/**
* Default date of the component
*/
calendarDate: {
type: [Date, String],
},
/**
* Toggle visibility or set the content of cancel button.
*/
cancelButton: {
type: [Boolean, String],
default: 'Cancel',
},
/**
* Sets the color context of the cancel button to one of CoreUI’s themed colors.
*
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
*/
cancelButtonColor: {
...props.Color,
default: 'primary',
},
/**
* Size the cancel button small or large.
*
* @values 'sm', 'lg'
*/
cancelButtonSize: {
type: String,
default: 'sm',
validator: (value) => {
return ['sm', 'lg'].includes(value);
},
},
/**
* Set the cancel button variant to an outlined button or a ghost button.
*
* @values 'ghost', 'outline'
*/
cancelButtonVariant: {
type: String,
default: 'ghost',
validator: (value) => {
return ['ghost', 'outline'].includes(value);
},
},
/**
* Toggle visibility of the cleaner button.
*/
cleaner: {
type: Boolean,
default: true,
},
/**
* Toggle visibility or set the content of confirm button.
*/
confirmButton: {
type: [Boolean, String],
default: 'OK',
},
/**
* Sets the color context of the confirm button to one of CoreUI’s themed colors.
*
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
*/
confirmButtonColor: {
...props.Color,
default: 'primary',
},
/**
* Size the confirm button small or large.
*
* @values 'sm', 'lg'
*/
confirmButtonSize: {
type: String,
default: 'sm',
validator: (value) => {
return ['sm', 'lg'].includes(value);
},
},
/**
* Set the confirm button variant to an outlined button or a ghost button.
*
* @values 'ghost', 'outline'
*/
confirmButtonVariant: {
type: String,
validator: (value) => {
return ['ghost', 'outline'].includes(value);
},
},
/**
* Set the format of day name.
*
* @default 'numeric'
* @since 4.6.0
*/
dayFormat: {
type: [Function, String],
default: 'numeric',
required: false,
validator: (value) => {
if (typeof value === 'string') {
return ['numeric', '2-digit'].includes(value);
}
if (typeof value === 'function') {
return true;
}
if (typeof value === 'function') {
return true;
}
return false;
},
},
/**
* Toggle the disabled state for the component.
*/
disabled: Boolean,
/**
* Specify the list of dates that cannot be selected.
*/
disabledDates: {
type: Array,
},
/**
* Initial selected date.
*/
date: {
type: [Date, String],
required: false,
},
/**
* Sets the day of start week.
* - 0 - Sunday,
* - 1 - Monday,
* - 2 - Tuesday,
* - 3 - Wednesday,
* - 4 - Thursday,
* - 5 - Friday,
* - 6 - Saturday,
*/
firstDayOfWeek: {
type: Number,
default: 1,
},
/**
* Set date format.
* We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
*/
format: String,
/**
* Toggle visibility of footer element or set the content of footer.
*/
footer: Boolean,
/**
* The id global attribute defines an identifier (ID) that must be unique in the whole document.
*
* **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.:
* - \{id\}-date
*/
id: String,
/**
* Toggle visibility or set the content of the input indicator.
*/
indicator: {
type: Boolean,
default: true,
},
/**
* Toggle the readonly state for the component.
*/
inputReadOnly: Boolean,
/**
* Custom function to format the selected date into a string according to a custom format.
*
* @since 5.0.0
*/
inputDateFormat: Function,
/**
* Custom function to parse the input value into a valid Date object.
*
* @since 5.0.0
*/
inputDateParse: Function,
/**
* Defines the delay (in milliseconds) for the input field's onChange event.
*
* @since 5.0.0
*/
inputOnChangeDelay: {
type: Number,
default: 750,
},
/**
* Sets the default locale for components. If not set, it is inherited from the navigator.language.
*/
locale: {
type: String,
default: 'default',
},
/**
* Max selectable date.
*/
maxDate: {
type: [Date, String],
},
/**
* Min selectable date.
*/
minDate: {
type: [Date, String],
},
/**
* The name attribute for the input element.
*
* @since 5.3.0
*/
name: String,
/**
* Show arrows navigation.
*/
navigation: {
type: Boolean,
default: true,
},
/**
* Reorder year-month navigation, and render year first.
*
* @since 4.6.0
*/
navYearFirst: Boolean,
/**
* Specifies a short hint that is visible in the input.
*/
placeholder: {
type: String,
default: 'Select date',
},
/**
* Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
*
* @since 4.9.0
*/
selectAdjacementDays: Boolean,
/**
* Specify the type of date selection as day, week, month, or year.
*
* @since 5.0.0
*/
selectionType: {
type: String,
default: 'day',
validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
},
/**
* Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
*
* @since 4.9.0
*/
showAdjacementDays: {
type: Boolean,
default: true,
},
/**
* Set whether to display week numbers in the calendar.
*
* @since 5.0.0
*/
showWeekNumber: Boolean,
/**
* Size the component small or large.
*
* @values 'sm', 'lg'
*/
size: {
type: String,
required: false,
validator: (value) => {
return ['sm', 'lg'].includes(value);
},
},
/**
* Provide an additional time selection by adding select boxes to choose times.
*/
timepicker: Boolean,
/**
* Set length or format of day name.
*
* @type number | 'long' | 'narrow' | 'short'
*/
weekdayFormat: {
type: [Function, Number, String],
default: 2,
validator: (value) => {
if (typeof value === 'string') {
return ['long', 'narrow', 'short'].includes(value);
}
if (typeof value === 'number') {
return true;
}
if (typeof value === 'function') {
return true;
}
return false;
},
},
/**
* Label displayed over week numbers in the calendar.
*
* @since 5.0.0
*/
weekNumbersLabel: String,
},
emits: [
/**
* Callback fired when the date changed.
*
* @property {Date} date - date object
* @property {string} formatedDate - formated date
*/
'date-change',
/**
* Callback fired when the date changed.
*
* @property {Date | null} date - date object
* @since 4.7.0
*/
'update:date',
],
setup(props, { emit }) {
return () => vue.h(CDateRangePicker.CDateRangePicker, {
calendars: 1,
onStartDateChange: (date, formatedDate) => {
emit('date-change', date, formatedDate);
emit('update:date', date);
},
range: false,
startDate: props.date,
...props,
});
},
});
exports.CDatePicker = CDatePicker;
//# sourceMappingURL=CDatePicker.js.map