In this article, we are going to understand the process for the integration of date picker in the VueJS 3.0 application using the 'vue3-datepicker-lite' plugin.
An Overview On vue3-datepicker-lite Plugin:
The key features of the 'vue3-datepicker-lite' plugin are as follow:
- value - This property to capture the selected date value or to set the default selected value.
- class - The class property to add a custom design to the date picker.
- id - The id property added to the HTML rendered date picker element.
- locale - The 'locale' property is a javascript object literal, where we can configure buttons and date picker days labels.
- value-changed - This event gets triggers on date value selection.
Create A Sample VueJS 3.0 App:
Command To Install Vue CLI Globally On Your System:
npm run -g @vue/cli
Command To Create Vue App:
vue create your_application_name
After creating a sample application run the following command to start the application.
Command To Run Vue App:
npm run serve
Install vue3-datepicker-lite NPM Package:
Command To Install DatePicker Package:
npm i vue3-datepicker-lite --save
Load DatePicker Component:
As a first step let's do an import date picker component on to the Vue component as below.
src/components/HelloWorld.vue:
<template> <div> <datepicker-lite ></datepicker-lite> </div> </template> <script> import DatepickerLite from 'vue3-datepicker-lite'; export default { name: 'HelloWorld', components:{ DatepickerLite } } </script>
- (Line: 3) Render the date picker component Html
- (Line: 8) Importing 'DatePickerLite' from 'vue3-datepicker-lite' plugin.
- (Line: 13) Configure the 'DatepickerLite' component into our Vue component.
Value Property:
The 'value' property is for date picker selection value. To define the default selected value for pickers can also use this same 'value' property.
src/components/HelloWorld.vue:(Script Part)
<script> import DatepickerLite from 'vue3-datepicker-lite'; export default { name: 'HelloWorld', components:{ DatepickerLite }, data(){ return{ pickerConfig:{ value : '2020/10/22' } } } } </script>(Line: 11) The 'value' property is used for date picker selection. Here we set the default value '2020/10/22' for the date picker.
src/components/HelloWorld.vue:(Html Part)
<template> <div> <datepicker-lite :value-attr="pickerConfig.value"></datepicker-lite> </div> </template>
- (Line: 4) The ':value-attr' assigned with 'value' property in the component.
Locale Property:
Date picker 'locale' property is used to configure the 'weekdays' labels and 'button' labels.
src/components/HelloWorld.vue:(Script Part)
data() { return { pickerConfig: { value: "2020/10/22", locale: { weekday: ["S", "M", "T", "W", "T", "F", "S"], todayBtn: "Current Day", clearBtn: "Clear Date", closeBtn: "Dismiss" } } }; }
- (Line: 6) Changing the 'weekday' names on the date picker.
- (Line: 7-9) Changing the button labels on 'todayBtn', 'clearBtn', 'closeBtn'
<datepicker-lite :value-attr="pickerConfig.value" :locale="pickerConfig.locale"> </datepicker-lite>
@value-changed Event:
The date picker provides us value selection event as '@value-changed'. We need to assign a call back method to this '@value-changed' event.
src/components/HelloWorld.vue:(Script Part)
methods:{ pickerSelection(value){ alert(value); } }
- Callback method for the '@value-changed' event, this callback method receives a selected date from the picker.
<datepicker-lite :value-attr="pickerConfig.value" :locale="pickerConfig.locale" @value-changed="pickerSelection"></datepicker-lite>That's all about the 'vue3-datepicker-lite' plugin integration in VueJS 3.0 application.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on the vue3-datepicker-lite plugin to integrate into the VueJs application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment