quasar

{ "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", "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" }, "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" } } }