quasar/src/components/time/QTime.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "mixins": ["components/date/use-datetime"],

  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/time"
  },

  "props": {
    "model-value": {
      "extends": "model-value",
      "type": ["String", "null", "undefined"],
      "desc": "Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
      "examples": ["# v-model=\"currentTime\""]
    },

    "format24h": {
      "type": ["Boolean", "null"],
      "default": "null",
      "desc": "Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used",
      "category": "behavior"
    },

    "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",
      "__runtimeDefault": true,
      "examples": ["'1995/02/23'"],
      "category": "model"
    },

    "mask": {
      "type": ["String", "null"],
      "default": "'HH:mm'",
      "__runtimeDefault": true,
      "examples": [
        "'HH:mm:ss'",
        "'YYYY-MM-DD HH:mm:ss'",
        "'HH:mm MMMM Do, YYYY'"
      ]
    },

    "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": {
        "type": ["Boolean", "null", "undefined"],
        "desc": "Is the user allowed to set the specified time?"
      },
      "examples": ["(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": ["[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": ["[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": ["[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": {
      "extends": "update:model-value",
      "params": {
        "value": {
          "type": ["String", "null"]
        },
        "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",
      "params": null,
      "returns": null
    }
  }
}