vueDatePicker

Template

<template>
  <div>
    <VueDatePicker
      :placeholder="placeholder"
      :format="'dd/MM/yyyy hh:mm'"
      :model-type="'dd/MM/yyyy hh:mm'"
      :disabled="disabled"
      :modelValue="value"
      :auto-apply="autoApply"
      :enable-seconds="enableSeconds"
      :is-24="is24"
      :time-picker-inline="timePickerInline"
      :enable-time-picker="enableTimePicker"
      @update:model-value="onDatePicker"
      @closed="onClose"
      @blur="onBlur"
    />
  </div>
</template>

Props

Name	Type	Default	Description
placeholder	String	-	Placeholder text for the input field.
value	Date | string	-	The selected date and time value.
customClass	String	-	Additional custom CSS classes for styling the component.
validations	Object	-	Validation rules for the input field.
disabled	Boolean	-	Disables the input field.
autoApply	Boolean	false	Automatically applies the selected date and time when changed.
listenChange	Boolean	false	Emits the onDatePicker event on change.
listenForm	Boolean	-	Emits the onDatePicker event when the form is submitted.
enableSeconds	Boolean	false	Enables selection of seconds in the time picker.
is24	Boolean	true	Sets the time picker to 24-hour format.
timePickerInline	Boolean	false	Displays the time picker inline with the date picker.
enableTimePicker	Boolean	true	Enables the time picker functionality.

Emits

Event Name	Parameters	Description
update:model-value	value: Date / string	Emits when the selected date and time value changes.
setError	value: boolean / null	Emits to set the error status of the component.
onDatePicker	value: Date	Emits when a date is selected from the date picker.