Datepicker

Description

Bulma and renderless Flatpickr wrappers for Enso UI.

Installation

Install the package:

yarn add @enso-ui/datepicker

Features

• ships Bulma-styled Datepicker and EnsoDatepicker components
• exposes the renderless CoreDatepicker for custom input renderers
• wraps Flatpickr with locale switching, time/date modes, and clear-button handling

Usage

<script setup>
import { EnsoDatepicker } from '@enso-ui/datepicker/bulma';
</script>

<EnsoDatepicker v-model="date" />

API

Datepicker

Bulma-styled input wrapper around CoreDatepicker.

Import: @enso-ui/datepicker/bulma

Props:

• isDanger: boolean = false
• isSmall: boolean = false
• isWarning: boolean = false
• isSuccess: boolean = false
• placeholder: string = 'Select Date'
• readonly: boolean = false

Methods:

• clear()

EnsoDatepicker

Convenience wrapper that derives the display format and locale from Enso app preferences.

Import: @enso-ui/datepicker/bulma

Props:

• altFormat: string | null = null
• time: boolean = false

CoreDatepicker

Renderless Flatpickr wrapper.

Import: @enso-ui/datepicker/renderless

Props:

• altInput: boolean = false
• altFormat: string | null = null
• disabled: boolean = false
• disableClear: boolean = false
• format: string = 'Y-m-d'
• locale: string = 'en'
• max: string | null = null
• min: string | null = null
• readonly: boolean = false
• time: boolean = false
• time12hr: boolean = false
• timeOnly: boolean = false
• modelValue: string | Date | Array | null
• weekNumbers: boolean = false

Events:

• update:modelValue
• value-updated

Slot props:

• clearButton
• clearEvents
• inputBindings
• readonly
• timeOnly

Methods:

• clear()
• reset()

Depends On

• flatpickr

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT