Pit Viper

v2.28.1

Pit Viper

v2.28.1
v1 / v2

  • Home
  • PV Components
  • PvDatePicker

PvDatePicker

Documentation

This component requires to import usePvComponent function from PitViper. You need to import that function and use it on the root of the Vue app. Ex.

import { usePvComponents } from "@turquoisehealth/pit-viper";

const app = createApp(App);

usePvComponents(app);
app.mount("#app");

Example

Source

HTML 
<script setup lang="ts">
import { ref } from "vue";
import PvDatePicker from "@/components/base/PvDatePicker/PvDatePicker.vue";

const date = ref(new Date());
</script>

<template>
  <div class="pv-stack-16">
    PvDatePicker Input
    <div class="pv-flex">
      
      <PvDatePicker v-model:model-value="date" />
    </div>
  </div>
  <div class="pv-stack-16">
    PvDatePicker Input with Icon
    <div class="pv-flex">
      
      <PvDatePicker v-model:model-value="date" showIcon />
    </div>
  </div>
  <div class="pv-stack-16">
    Inline DatePicker
    <div class="pv-flex-vertical">
      <span>
        
      </span>
      <PvDatePicker v-model:model-value="date" inline />
    </div>
  </div>
  <div class="pv-stack-16">
    Disabled State
    <PvDatePicker v-model:model-value="date" disabled />
  </div>
  <div class="pv-stack-16">
    Read Only State
    <PvDatePicker v-model:model-value="date" readonly />
  </div>
</template>

Properties

Prop Name Type Required Default Description
modelValue Date yes

N/A

 -
appendTo "body" | "self"| undefined no

“body”

 A valid query selector or an HTMLElement to specify where the overlay gets attached.
dateFormat string? no

N/A

 Format of the date. Defaults to PrimeVue Locale configuration.
disabled boolean? no

N/A

 When present, it specifies that the component should be disabled.
disabledDates Date[]? no

N/A

 Array with dates to disable.
disabledDays number[]? no

N/A

 Array with disabled weekday numbers.
fullWidth boolean? no

N/A

 When input should take 100% width
inline boolean? no

N/A

 When enabled, displays the datepicker as inline instead of an overlay.
invalid boolean? no

N/A

 When present, it specifies that the component should have invalid state style.
manualInput boolean? no

N/A

 Whether to allow entering the date manually via typing.
maxDate Date? no

N/A

 The maximum selectable date.
maxDateCount number? no

N/A

 Maximum number of selectable dates in multiple mode.
minDate Date? no

N/A

 The minimum selectable date.
numberOfMonths number? no

N/A

 Number of months to display.
placeholder string? no

N/A

 Placeholder text for the input.
readonly boolean? no

N/A

 When present, it specifies that an input field is read-only.
selectionMode "multiple" | "range" | "single"| undefined no

N/A

 Defines the quantity of the selection.
selectOtherMonths boolean? no

N/A

 Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
showButtonBar boolean? no

N/A

 Whether to display today and clear buttons at the footer.
showIcon boolean? no

N/A

 When enabled, displays a button with icon next to input.
showWeek boolean? no

N/A

 When enabled, datepicker will show week numbers.
view "date" | "month" | "year"| undefined no

N/A

 Type of view to display.
Event Name Type Description
update:modelValue [value: Date] -