299 lines
No EOL
7.9 KiB
JSON
299 lines
No EOL
7.9 KiB
JSON
{
|
|
"type": "component",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/time"
|
|
},
|
|
"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": "HH:mm",
|
|
"examples": [
|
|
"HH:mm:ss",
|
|
"YYYY-MM-DD HH:mm:ss",
|
|
"HH:mm MMMM Do, YYYY"
|
|
],
|
|
"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": "Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
|
|
"required": true,
|
|
"syncable": true,
|
|
"category": "model",
|
|
"type": [
|
|
"String",
|
|
"null",
|
|
"undefined"
|
|
],
|
|
"examples": [
|
|
"v-model=\"currentTime\""
|
|
]
|
|
},
|
|
"format24h": {
|
|
"type": "Boolean",
|
|
"desc": "Forces 24 hour time display instead of AM/PM system",
|
|
"default": "(based on Quasar lang language being used)",
|
|
"category": "behavior",
|
|
"required": false
|
|
},
|
|
"default-date": {
|
|
"type": "String",
|
|
"desc": "The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)",
|
|
"default": "current day",
|
|
"examples": [
|
|
"1995/02/23"
|
|
],
|
|
"category": "model",
|
|
"required": false
|
|
},
|
|
"options": {
|
|
"type": "Function",
|
|
"desc": "Optionally configure what time is the user allowed to set; Overridden by 'hour-options', 'minute-options' and 'second-options' if those are set; For best performance, reference it from your scope and do not define it inline",
|
|
"params": {
|
|
"hr": {
|
|
"type": "Number",
|
|
"desc": "Hour"
|
|
},
|
|
"min": {
|
|
"type": [
|
|
"Number",
|
|
"null"
|
|
],
|
|
"desc": "Minutes"
|
|
},
|
|
"sec": {
|
|
"type": [
|
|
"Number",
|
|
"null"
|
|
],
|
|
"desc": "Seconds"
|
|
}
|
|
},
|
|
"returns": null,
|
|
"examples": [
|
|
":options=\"(hr, min, sec) => hr <= 6\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"hour-options": {
|
|
"type": "Array",
|
|
"desc": "Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set",
|
|
"examples": [
|
|
":hour-options=\"[ 3, 6, 9 ]\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"minute-options": {
|
|
"type": "Array",
|
|
"desc": "Optionally configure what minutes is the user allowed to set; Overrides 'options' prop if that is also set",
|
|
"examples": [
|
|
":minute-options=\"[0, 15, 30, 45]\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"second-options": {
|
|
"type": "Array",
|
|
"desc": "Optionally configure what seconds is the user allowed to set; Overrides 'options' prop if that is also set",
|
|
"examples": [
|
|
":second-options=\"[0, 7, 10, 23]\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"with-seconds": {
|
|
"type": "Boolean",
|
|
"desc": "Allow the time to be set with seconds",
|
|
"category": "model|behavior"
|
|
},
|
|
"now-btn": {
|
|
"type": "Boolean",
|
|
"desc": "Display a button that selects the current time",
|
|
"category": "content"
|
|
}
|
|
},
|
|
"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",
|
|
"null"
|
|
],
|
|
"desc": "New model value",
|
|
"required": true
|
|
},
|
|
"details": {
|
|
"type": "Object",
|
|
"desc": "Object of properties on the new model",
|
|
"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 the month"
|
|
},
|
|
"hour": {
|
|
"type": "Number",
|
|
"required": true,
|
|
"desc": "The hour"
|
|
},
|
|
"minute": {
|
|
"type": "Number",
|
|
"required": true,
|
|
"desc": "The minute"
|
|
},
|
|
"second": {
|
|
"type": "Number",
|
|
"required": true,
|
|
"desc": "The second"
|
|
},
|
|
"millisecond": {
|
|
"type": "Number",
|
|
"required": true,
|
|
"desc": "The millisecond"
|
|
},
|
|
"changed": {
|
|
"type": "Boolean",
|
|
"required": true,
|
|
"desc": "Did the model change?"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"methods": {
|
|
"setNow": {
|
|
"desc": "Change model to current moment"
|
|
}
|
|
}
|
|
} |