Date Picker
Basic usage
2026-06-14
Pick a date
1989-12-18 - 1989-12-21
<script setup lang="ts">
import { NmorphDatePicker } from "@nmorph/nmorph-ui-kit";
const date = ref(new Date());
const dates = ref([]);
const date1 = new Date(1989, 11, 18);
const date2 = new Date(1989, 11, 21);
const range = ref([date1, date2]);
</script><template>
<div class="date-picker-basic-usage-overview">
<div class="date-picker-basic-usage-overview__element">
<NmorphDatePicker v-model="date" />
</div>
<div class="date-picker-basic-usage-overview__element">
<NmorphDatePicker v-model="dates" type="dates" :initial-date="date" />
</div>
<div class="date-picker-basic-usage-overview__element">
<NmorphDatePicker
v-model="range"
type="daterange"
:initial-date="date1"
/>
</div>
</div>
</template>Thickness
Sets the thickness of the date picker field.
2026-06-14
2026-06-14
2026-06-14
<script setup lang="ts">
import { NmorphComponentThickness, NmorphDatePicker } from "@nmorph/nmorph-ui-kit";
const value = ref(new Date());
const thicknesses = Object.keys(NmorphComponentThickness) as Array<
keyof typeof NmorphComponentThickness
>;
</script><template>
<div class="date-picker-thickness-overview">
<NmorphDatePicker
v-for="thickness in thicknesses"
:key="thickness"
:thickness="thickness"
v-model="value"
/>
</div>
</template>Disabled
Disables date selection if set to true.
2026-06-14
<script setup lang="ts">
import { NmorphDatePicker } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="date-picker-disabled-overview">
<NmorphDatePicker :model-value="new Date()" disabled />
</div>
</template>NmorphDatePicker Api
Attributes
Events
Translations i18n
Use these keys to configure custom text for languages that the library does not support out of the box.