632 lines
No EOL
18 KiB
JSON
632 lines
No EOL
18 KiB
JSON
{
|
||
"type": "component",
|
||
"meta": {
|
||
"docsUrl": "https://v2.quasar.dev/vue-components/date"
|
||
},
|
||
"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"
|
||
},
|
||
"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"
|
||
],
|
||
"required": false
|
||
},
|
||
"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",
|
||
"required": false
|
||
},
|
||
"color": {
|
||
"type": "String",
|
||
"tsType": "NamedColor",
|
||
"desc": "Color name for component from the Quasar Color Palette",
|
||
"examples": [
|
||
"primary",
|
||
"teal",
|
||
"teal-10"
|
||
],
|
||
"category": "style"
|
||
},
|
||
"text-color": {
|
||
"type": "String",
|
||
"tsType": "NamedColor",
|
||
"desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
|
||
"examples": [
|
||
"primary",
|
||
"teal",
|
||
"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"
|
||
},
|
||
"flat": {
|
||
"type": "Boolean",
|
||
"desc": "Applies a 'flat' design (no default shadow)",
|
||
"category": "style"
|
||
},
|
||
"bordered": {
|
||
"type": "Boolean",
|
||
"desc": "Applies a default border to the component",
|
||
"category": "style"
|
||
},
|
||
"readonly": {
|
||
"type": "Boolean",
|
||
"desc": "Put component in readonly mode",
|
||
"category": "state"
|
||
},
|
||
"disable": {
|
||
"type": "Boolean",
|
||
"desc": "Put component in disabled mode",
|
||
"category": "state"
|
||
},
|
||
"model-value": {
|
||
"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",
|
||
"required": true,
|
||
"syncable": true,
|
||
"category": "model",
|
||
"type": [
|
||
"String",
|
||
"Array",
|
||
"Object",
|
||
"null",
|
||
"undefined"
|
||
],
|
||
"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"
|
||
},
|
||
"default-view": {
|
||
"type": "String",
|
||
"desc": "The view which will be displayed by default",
|
||
"default": "Calendar",
|
||
"values": [
|
||
"Calendar",
|
||
"Months",
|
||
"Years"
|
||
],
|
||
"category": "model",
|
||
"required": false
|
||
},
|
||
"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",
|
||
"required": false
|
||
},
|
||
"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": {
|
||
"desc": "Emitted when the component needs to change the model; Is also used by v-model",
|
||
"params": {
|
||
"value": {
|
||
"type": [
|
||
"String",
|
||
"Array",
|
||
"Object",
|
||
"null"
|
||
],
|
||
"desc": "New model value",
|
||
"required": true
|
||
},
|
||
"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"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} |