# Datepicker

Vue Datepicker renderless component based on Flatpickr with a bulma template.

Can be used outside of the Enso ecosystem.

For live examples and demos, you may visit laravel-enso.com

# Installation

Install the package:

yarn add @enso-ui/datepicker

(within Enso, remember to cd into the client folder before installing front-end assets)

Import the desired component(s):

import { Datepicker } from '@enso-ui/datepicker/bulma';

# Exports

@enso-ui/datepicker/bulma:

• Datepicker,
• EnsoDatepicker,

@enso-ui/datepicker/renderless:

• CoreDatepicker,

Note that this package has a couple of external dependencies. Read here for more info.

# Usage

import { Datepicker } from '@enso-ui/datepicker/bulma';

<datepicker v-model="birthday"
    week-numbers
    format="m-d-Y"/>

# renderless/Datepicker.vue

The component is a renderless date picker component that is meant to be built upon when creating a specific implementation, for example with a different styling.

# Props

• altInput - boolean, optional, default false, permits to show the user a readable date (as per altFormat), but return something totally different to the server
• altFormat - string, optional, default null, alternative date format, see above
• disabled - boolean, optional, default false
• disableClear - boolean, optional, default false, removes the clear button so the user cannot unselect the option
• format - string, optional, default 'd-m-Y'
• locale - string, optional, default en
• max - string, optional, default null - sets a high limit for the selected date that will be the max date that can be chosen
• min - string, optional, default null - sets a low limit for the selected date
• readonly - boolean, optional, default false
• time - boolean, optional. If set to true, the component allows choosing the time
• time12hr - boolean, optional, default false. If set to true, the time will be in 12 hour format
• timeOnly - boolean, optional, default false. If set to true, the component allows choosing ONLY the time (no date)
• value - string, null/string/date/array, required
• weekNumbers - boolean, optional, default false. If set to true, the component also shows week numbers

# Datepicker

This is the main bulma styled component and it is built upon the renderless component renderless/Datepicker.vue

# Example:

<datepicker v-model="interval.min"
    :format="format"
    :is-warning="equals"
    :locale="locale"
    :placeholder="i18n('My placeholder')"
    :max="interval.max"/>

# Props

All the props from the renderless component can be used here, and, in addition:

• placeholder - string, optional, default 'Select Date'
• isDanger - boolean, optional, default false
• isWarning - boolean, optional, default false

# EnsoDatepicker

Designed to be used within the Enso ecosystem, it uses several defaults & conventions requiring less configuration from the dev.

# Example:

<datepicker v-model="interval.min"/>

# Props

All the props from the renderless respectively the base component can be used here.

# Questions & Issues

For questions and support please use the issues functionality for this package's github repository.

Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.

Issues not conforming to the guidelines may be closed immediately.

# External Dependencies

Built around 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

ISC