chronocraft-datepicker-vue

Chronocraft DatePicker - A VueJS 3.0 Efficient DatePicker Component

The Chronocraft DatePicker is a flexible datepicker component created for Vue3

Features

• Vuejs 3.0 Based Datepicker
• Single Date Selection
• Date Range Selection

Usage of Datepicker

Using the Library as a Plugin

import { ChronoCraftDatePicker } from 'chronocraft-datepicker-vue';
    ...
app.use(ChronoCraftDatePicker)

Using seperate components of the library inside you project

When you want to import a specific component from the library into a dedicated place inside your code

import { DatePicker } from 'chronocraft-datepicker-vue';
...
components:{
DatePicker
}

Example of Component

<DatePicker :rangepicker="false" :showselecteddate="true" style="margin: 0px auto;">
</DatePicker>

Example using Input Field Slot

<DatePicker :rangepicker="true" :showselecteddate="true" style="margin: 0px auto;" @on-date-selected="OnDateSelected">
    <template v-slot:inputfield="slotProps">
        <span class="material-icons-outlined" style="cursor: pointer;">date_range</span>
    </template>
</DatePicker>

Component properties

Component slots