quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/date" }, "behavior": { "$listeners": { "desc": "All native events are being propagated (you don't need the '.native' modifier)" } }, "props": { "name": { "type": "String", "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL", "examples": [ "car_id" ], "category": "behavior", "addedIn": "v1.9.0" }, "value": { "desc": "Date of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive", "category": "model", "type": "String", "required": true, "examples": [ "v-model=\"myDate\"" ] }, "landscape": { "type": "Boolean", "desc": "Display the component in landscape mode", "category": "behavior" }, "mask": { "type": "String", "desc": "Mask (formatting string) used for parsing and formatting value", "category": "model", "default": "YYYY/MM/DD", "examples": [ "YYYY-MM-DD", "MMMM Do, YYYY", "YYYY-MM-DD HH:mm:ss" ] }, "locale": { "type": "Object", "desc": "Locale formatting options", "examples": [ ":locale=\"{ monthsShort: ['Ian', 'Feb', 'Mar', '...'] }\"" ], "definition": { "days": { "type": "Array", "desc": "List of full day names (DDDD), starting with Sunday", "examples": [ "['Duminica', 'Luni', 'Marti', '...']" ] }, "daysShort": { "type": "Array", "desc": "List of short day names (DDD), starting with Sunday", "examples": [ "['Dum', 'Lun', 'Mar', '...']" ] }, "months": { "type": "Array", "desc": "List of full month names (MMMM), starting with January", "examples": [ "['Ianuarie', 'Februarie', 'Martie', '...']" ] }, "monthsShort": { "type": "Array", "desc": "List of short month names (MMM), starting with January", "examples": [ "['Ian', 'Feb', 'Mar', '...']" ] } }, "category": "model" }, "calendar": { "type": "String", "desc": "Specify calendar type", "default": "gregorian", "values": [ "gregorian", "persian" ], "category": "model" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "text-color": { "type": "String", "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "square": { "type": "Boolean", "desc": "Removes border-radius so borders are squared", "category": "style", "addedIn": "v1.1.5" }, "flat": { "type": "Boolean", "desc": "Applies a 'flat' design (no default shadow)", "category": "style", "addedIn": "v1.1.5" }, "bordered": { "type": "Boolean", "desc": "Applies a default border to the component", "category": "style", "addedIn": "v1.1.5" }, "readonly": { "type": "Boolean", "desc": "Put component in readonly mode", "category": "state" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "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" }, "emit-immediately": { "type": "Boolean", "desc": "Emit model when user browses month and year too", "category": "model" }, "default-year-month": { "type": "String", "desc": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null)", "examples": [ "1986/02" ], "category": "model" }, "default-view": { "type": "String", "desc": "The view which will be displayed by default", "default": "Calendar", "values": [ "Calendar", "Months", "Years" ], "category": "model" }, "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", "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", "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", "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" }, "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" } }, "slots": { "default": { "desc": "This is where additional buttons can go", "addedIn": "v1.2.8" } }, "events": { "input": { "desc": "Emitted when the component needs to change the model; Is also used by v-model", "params": { "value": { "type": "String", "desc": "New model value", "required": true }, "reason": { "type": "String", "desc": "Reason of the user interaction (what was picked)", "values": [ "year", "month", "day", "today", "locale", "mask" ] }, "details": { "type": "Object", "desc": "Object of properties on the new model", "definition": { "year": { "type": "Number", "desc": "The year" }, "month": { "type": "Number", "desc": "The month" }, "day": { "type": "Number", "desc": "The day of month" }, "changed": { "type": "Boolean", "desc": "Did the model change?", "addedIn": "v1.1.1" } } } } } }, "methods": { "setToday": { "desc": "Change model to today", "addedIn": "v1.1.7" }, "setView": { "desc": "Change current view", "addedIn": "v1.1.7", "params": { "view": { "type": "String", "desc": "QDate view name", "required": true, "values": [ "Calendar", "Months", "Years" ] } } }, "offsetCalendar": { "desc": "Increment or decrement calendar view's month or year", "addedIn": "v1.1.7", "params": { "type": { "type": "String", "required": true, "desc": "What to increment/decrement", "values": [ "month", "year" ] }, "descending": { "type": "Boolean", "desc": "Decrement?" } } } } }