OcDatepicker component
Description
The OcDatepicker component can be used to enter or select a date from a calendar. The component uses the browser's native date picker when available and does not rely on any third-party libraries. As a result, the visual appearance of the date picker may vary depending on the browser.
Accessibility
The label is required and represents the name of the input.
Examples
Default
The default use case needs a label and usually has a v-model to bind the value of the date picker.
<template>
<oc-datepicker v-model="selectedDate" :label="$gettext('Expiry date')" />
<div>Selected date: {{ selectedDate }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { DateTime } from 'luxon'
const selectedDate = ref<DateTime>()
</script>Event handler
The component emits a date-changed event. Using this can be useful when you want to do some custom handling on date change (e.g. validation) or when you want to check if the input caused some errors.
In the example below, min-date is set to the current day. That means entering a date before that will result in an error.
<template>
<oc-datepicker
:label="$gettext('Expiry date')"
:min-date="DateTime.now()"
@date-changed="onExpiryDateChanged"
/>
<div>Selected date: {{ selectedDate }}</div>
<div>Input error: {{ inputError }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { DateTime } from 'luxon'
const selectedDate = ref<DateTime>()
const inputError = ref<Error>()
const onExpiryDateChanged = ({ date, error }: { date: DateTime; error: Error }) => {
selectedDate.value = date
inputError.value = error
}
</script>