Datepicker

The Datepicker is used to allow the user to select a date, and to display that date in the specified format.

Examples

Datepicker

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  date: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-datepicker v-model="form.date" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  date1: '',
  date2: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-datepicker
      v-model="form.date1"
      label="Date"
      layout="vertical"
      description="Vertical Layout"
    />
    <base-datepicker
      v-model="form.date2"
      label="Date"
      layout="horizontal"
      description="Horizontal Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  date: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-datepicker v-model="form.date" label="Without Border" border="none" />
    <base-datepicker v-model="form.date" label="Simple Border" border="simple" />
    <base-datepicker v-model="form.date" label="Full Border" border="full" />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  date: ''
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <base-datepicker v-model="form.date" label="Date" required />
    <base-datepicker v-model="form.date" label="Date" description="Description Example" />
    <base-datepicker v-model="form.date" label="Date" :helpers="['Helper Example']" />
    <base-datepicker v-model="form.date" label="Date" v-model:errors="errors" />
    <base-datepicker v-model="form.date" label="Date" description="Disabled" disabled />
  </form>
</template>

Datepicker API

Types

export type BaseDatepickerBorderType = 'simple' | 'full' | 'none'
export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
border	BaseDatepickerBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true datepicker is required.
disabled	boolean	false	if true datepicker is disabled.
helpers	string[]		Input helper message.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-datepicker> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I type "2025-01-01" into "form-date"

Step Definition

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const agreement = ref()
</script>

<template>
  <base-datepicker v-model="agreement" data-testid="form-date" />
</template>