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, defaultfalse
, permits to show the user a readable date (as per altFormat), but return something totally different to the serveraltFormat
-string
, optional, defaultnull
, alternative date format, see abovedisabled
-boolean
, optional, defaultfalse
disableClear
-boolean
, optional, defaultfalse
, removes the clear button so the user cannot unselect the optionformat
-string
, optional, default 'd-m-Y'locale
-string
, optional, defaulten
max
-string
, optional, defaultnull
- sets a high limit for the selected date that will be the max date that can be chosenmin
-string
, optional, defaultnull
- sets a low limit for the selected datereadonly
-boolean
, optional, defaultfalse
time
-boolean
, optional. If set to true, the component allows choosing the timetime12hr
-boolean
, optional, defaultfalse
. If set to true, the time will be in 12 hour formattimeOnly
-boolean
, optional, defaultfalse
. If set to true, the component allows choosing ONLY the time (no date)value
-string
, null/string/date/array, requiredweekNumbers
-boolean
, optional, defaultfalse
. If set to true, the component also shows week numbers
Tip
The renderless component can be used to build a custom layout
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, defaultfalse
isWarning
-boolean
, optional, defaultfalse
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!