Date Inputs

PInput

PInput also covers date and time fields. The browser keeps its native picker, and Vue gets a plain string v-model.

Date Inputs

Date

vue

<p-field label="Date">
  <p-input v-model="date" type="date" name="date" />
</p-field>

Datetime local

vue

<p-field label="Datetime local">
  <p-input v-model="datetimeLocal" type="datetime-local" name="datetime-local" />
</p-field>

Month

vue

<p-field label="Month">
  <p-input v-model="month" type="month" name="month" />
</p-field>

Time

vue

<p-field label="Time">
  <p-input v-model="time" type="time" name="time" />
</p-field>

States & Tooltips

Readonly date

Blocked date

Due dateChoose a due date.

vue

<p-field label="Readonly date">
  <p-input v-model="readonlyDate" type="date" name="readonly-date" readonly />
</p-field>

<p-field label="Blocked date" disabled>
  <p-input v-model="blockedDate" type="date" name="blocked-date" />
</p-field>

<p-field label="Due date" error="Choose a due date.">
  <p-input
    v-model="dueDate"
    type="date"
    name="due-date"
    tooltip="Use the browser's date picker"
    tooltip-placement="bottom"
  />
</p-field>

API

PInput Date/Time Props

Name	Type	Default	Description
`v-model`	`string`	-	Native date/time input value.
`type`	`'date' \| 'datetime-local' \| 'month' \| 'time'`	-	Date/time input types supported by PInput.
`disabled`	`boolean`	false	Disables the input. Inherits from PField when present.
`readonly`	`boolean`	false	Renders a readonly input.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Events

Name	Type	Default	Description
`update:modelValue`	`string`	-	Emitted by v-model when the native input changes.