quasar

{ "mixins": [ "components/date/use-datetime" ], "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/date" }, "props": { "model-value": { "extends": "model-value", "type": [ "String", "Array", "Object", "null", "undefined" ], "desc": "Date(s) of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive", "examples": [ "v-model=\"myDate\"", "v-model=\"[myDate1, myDate2]\"", "v-model=\"[{ from: myDateFrom, to: myDateTo }]\"", "v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\"" ] }, "title": { "type": "String", "desc": "When specified, it overrides the default header title; Makes sense when not in 'minimal' mode", "examples": [ "Birthday" ], "category": "content" }, "subtitle": { "type": "String", "desc": "When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode", "examples": [ "John Doe" ], "category": "content" }, "default-year-month": { "type": "String", "desc": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)", "examples": [ "1986/02" ], "category": "model" }, "mask": { "default": "YYYY/MM/DD", "examples": [ "YYYY-MM-DD", "MMMM Do, YYYY", "YYYY-MM-DD HH:mm:ss" ] }, "default-view": { "type": "String", "desc": "The view which will be displayed by default", "default": "Calendar", "values": [ "Calendar", "Months", "Years" ], "category": "model" }, "years-in-month-view": { "type": "Boolean", "desc": "Show the years selector in months view", "category": "behavior" }, "events": { "type": [ "Array", "Function" ], "desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline", "params": { "date": { "type": "String", "desc": "The current date being processed.", "examples": [ "2018/11/05", "2021/10/25" ] } }, "returns": { "type": "Boolean", "desc": "If true, the current date will be highlighted" }, "examples": [ ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"", ":events=\"date => date[9] % 3 === 0\"" ], "category": "model" }, "event-color": { "type": [ "String", "Function" ], "desc": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline", "params": { "date": { "type": "String", "desc": "The current date being processed.", "examples": [ "2018/11/05", "2021/10/25" ] } }, "returns": { "type": "String", "desc": "Color for the current date.", "examples": [ "teal", "orange" ] }, "examples": [ "teal-10", ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\"" ], "category": "style" }, "options": { "type": [ "Array", "Function" ], "desc": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with 'range' prop", "params": { "date": { "type": "String", "desc": "The current date being processed.", "examples": [ "2018/11/05", "2021/10/25" ] } }, "returns": { "type": "Boolean", "desc": "If true, the current date will be made available for selection" }, "examples": [ ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"", ":options=\"date => date[9] % 3 === 0\"", ":options=\"date => date >= '2018/11/03' && date <= '2018/11/15'\"" ], "category": "model" }, "navigation-min-year-month": { "type": "String", "desc": "Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop", "examples": [ "2020/07" ], "category": "selection" }, "navigation-max-year-month": { "type": "String", "desc": "Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop", "examples": [ "2020/10" ], "category": "selection" }, "no-unset": { "type": "Boolean", "desc": "Remove ability to unselect a date; It does not apply to selecting a range over already selected dates", "category": "selection" }, "first-day-of-week": { "type": [ "String", "Number" ], "desc": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar", "default": "(based on configured Quasar lang language)", "examples": [ "first-day-of-week=\"1\"", ":first-day-of-week=\"selectedFirstDayOfTheWeek\"" ], "category": "model" }, "today-btn": { "type": "Boolean", "desc": "Display a button that selects the current day", "category": "content" }, "minimal": { "type": "Boolean", "desc": "Don’t display the header", "category": "content" }, "multiple": { "type": "Boolean", "desc": "Allow multiple selection; Model must be Array", "category": "model|selection" }, "range": { "type": "Boolean", "desc": "Allow range selection; Partial compatibility with 'options' prop: selected ranges might also include 'unselectable' days", "category": "model|selection" }, "emit-immediately": { "type": "Boolean", "desc": "Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)", "category": "model" } }, "slots": { "default": { "desc": "This is where additional buttons can go" } }, "events": { "update:model-value": { "extends": "update:model-value", "params": { "value": { "type": [ "String", "Array", "Object", "null" ] }, "reason": { "type": "String", "desc": "Reason of the user interaction (what was picked)", "values": [ "add-day", "remove-day", "add-range", "remove-range", "mask", "locale", "year", "month" ] }, "details": { "type": "Object", "desc": "Object of properties on the new model", "definition": { "year": { "type": "Number", "required": true, "desc": "The year of the date that the user has clicked/tapped on" }, "month": { "type": "Number", "required": true, "desc": "The month of the date that the user has clicked/tapped on" }, "day": { "type": "Number", "required": true, "desc": "The day of the month that the user has clicked/tapped on" }, "from": { "type": "Object", "required": false, "desc": "Object of properties of the range starting point (only if range)", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" }, "day": { "type": "Number", "required": true, "desc": "The day of month" } } }, "to": { "type": "Object", "required": false, "desc": "Object of properties of the range ending point (only if range)", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" }, "day": { "type": "Number", "required": true, "desc": "The day of month" } } } } } } }, "navigation": { "desc": "Emitted when user navigates to a different month or year (and even when the model changes from an outside source)", "params": { "view": { "type": "Object", "desc": "Definition of the current view (year, month)", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" } } } } }, "range-start": { "desc": "User has started a range selection", "params": { "from": { "type": "Object", "desc": "Definition of date from where the range begins", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" }, "day": { "type": "Number", "required": true, "desc": "The day of month" } } } } }, "range-end": { "desc": "User has ended a range selection", "params": { "range": { "type": "Object", "desc": "Definition of the range", "definition": { "from": { "type": "Object", "required": true, "desc": "Definition of date from where the range begins", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" }, "day": { "type": "Number", "required": true, "desc": "The day of month" } } }, "to": { "type": "Object", "required": true, "desc": "Definition of date to where the range ends", "definition": { "year": { "type": "Number", "required": true, "desc": "The year" }, "month": { "type": "Number", "required": true, "desc": "The month" }, "day": { "type": "Number", "required": true, "desc": "The day of month" } } } } } } } }, "methods": { "setToday": { "desc": "Change model to today" }, "setView": { "desc": "Change current view", "params": { "view": { "type": "String", "required": true, "desc": "QDate view name", "values": [ "Calendar", "Months", "Years" ] } } }, "offsetCalendar": { "desc": "Increment or decrement calendar view's month or year", "params": { "type": { "type": "String", "required": true, "desc": "What to increment/decrement", "values": [ "month", "year" ] }, "descending": { "type": "Boolean", "desc": "Decrement?" } } }, "setCalendarTo": { "desc": "Change current year and month of the Calendar view; It gets corrected if using navigation-min/max-year-month and sets the current view to Calendar", "params": { "year": { "type": "Number", "desc": "The year" }, "month": { "type": "Number", "desc": "The month" } } }, "setEditingRange": { "desc": "Configure the current editing range", "params": { "from": { "type": "Object", "desc": "Definition of date from where the range begins", "definition": { "year": { "type": "Number", "desc": "The year" }, "month": { "type": "Number", "desc": "The month" }, "day": { "type": "Number", "desc": "The day of month" } } }, "to": { "type": "Object", "desc": "Definition of date to where the range ends", "definition": { "year": { "type": "Number", "desc": "The year" }, "month": { "type": "Number", "desc": "The month" }, "day": { "type": "Number", "desc": "The day of month" } } } } } } }