A Vue Date picker component to select date.

Overview

Vue Date picker component

A Vue Date picker component to select date.

Table of contents

Browser Support

Chrome Firefox Safari Edge IE
83.0 77.0 13.1.1 83.0 11.9

Demo


Getting started

Install the npm package:

npm install vue-weblineindia-date-picker 
# OR 
yarn add vue-weblineindia-date-picker

Usage

Use the <vue-weblineindia-date-picker> component:

<template>
  <div>
   <Datepicker 
    id="date"
    v-model="date"
    selection-mode="single"
    placeholder="Date picker"
    :showIcon="true"
     />
  </div>
</template>

<script>
// import vue-weblineindia-date-picker
import Datepicker from 'vue-weblineindia-date-picker'
export default {
  components: {
    Datepicker

  },
  data(){
    return{
      date:""
    }
  },
</script>

Available Props

Prop Type default Description
value any null Value of the component.
selectionMode string single Defines the quantity of the selection, valid values are "single", "multiple" and "range".
placeholder String 'Date picker' Placeholder text for the date picker
locale string en Localization for different languages and formats is defined by binding the locale.
dateFormat string mm/dd/yy EFormat of the date.
showIcon boolean false When enabled, displays a button with icon next to input.
icon string pi pi-calendar Icon of the calendar button.
monthNavigator boolean false Whether the month should be rendered as a dropdown instead of text.
yearNavigator boolean false Whether the year should be rendered as a dropdown instead of text.
minDate Date null The minimum selectable date.
maxDate Date null The maximum selectable date.
disabledDates array null Array with dates to disable.
disabledDays array null Array with disabled weekday numbers.
inline boolean false When enabled, displays the calendar as inline instead of an overlay.
showOtherMonths boolean false Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
selectOtherMonths boolean Array with disabled weekday numbers. Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
numberOfMonths number 1 Number of months to display.
view string date Type of view to display, valid valids are "date" for datepicker and "month" for month picker.
touchUI boolean false When enabled, calendar overlay is displayed as optimized for touch devices.
yearRange string 1960:2050 The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
panelClass string null Style class of the datetimepicker panel.
panelStyle string null Inline style of the datetimepicker panel.
maxDateCount number null Maximum number of selectable dates in multiple mode.
showOnFocus boolean true When disabled, datepicker will not be visible with input focus.
autoZIndex boolean true Whether to automatically manage layering.
baseZIndex number 0 Base zIndex value to use in layering.
showButtonBar boolean false Whether to display today and clear buttons at the footer
shortYearCutoff string +10 The cutoff year for determining the century for a date.
hideOnDateTimeSelect boolean false Whether to hide the overlay on date selection when showTime is enabled.
showWeek boolean false When enabled, calendar will show week numbers.
manualInput boolean false Wheter to allow prevents entering the date manually via typing.
ariaLabelledBy string null Establishes relationships between the component and label(s) where its value should be one or more element IDs.
appendTo string null Id of the element or "body" for document where the overlay should be appended to.
isDarkTheme boolean false Change theme of the date picker.

Methods

Name Parameters Description
date-select value: Selected value Callback to invoke when a date is selected.
show - Callback to invoke when datepicker panel is shown.
hide - Callback to invoke when datepicker panel is hidden.
today-click date: Today as a date instance Callback to invoke when today button is clicked.
clear-click event: Click event Callback to invoke when clear button is clicked.
month-change event.month: New month event.year: New year Callback to invoke when a month is changed using the navigators.
year-change event.month: New month event.year: New year Callback to invoke when a year is changed using the navigators.

Want to Contribute?

  • Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
  • Fork it.
  • Create new branch to contribute your changes.
  • Commit all your changes to your branch.
  • Submit a pull request.

Need Help?

We also provide a free, basic support for all users who want to use this VueJS Datepicker in their software project. In case you want to customize this Datepicker to suit your software development needs, then feel free to contact our VueJS developers.


Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.


Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-datepicker is inspired by primevue.

License

MIT

Keywords

vue-weblineindia-datepicker,calendar,date-picker,datepicker, vue components, vuejs, vuejs component

Owner
WeblineIndia
An Offshore Custom Software Development Company providing Next-Gen Solutions, Web and Mobile App Development Solutions since 1999 with 150+ skilled developers.
WeblineIndia
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 57 Nov 6, 2021
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

Krystal Campioni 724 Jan 24, 2022
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 199 Jan 20, 2022
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juárez 984 Jan 6, 2022
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

小小鲁班 67 Oct 27, 2021
A Vue project - single date picker

A Vue project - single date picker

null 16 Jun 11, 2021
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

小小鲁班 67 Oct 27, 2021
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 230 Jan 10, 2022
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Dec 15, 2021
VueJS component to select dates & time, including a range mode

VueCtkDateTimePicker A vue component for select dates (range mode available) & time This documentation is for v2.*. Find v1 documentation here Dark mo

Chronotruck 790 Jan 16, 2022
Vue.js component for Flatpickr datetime picker :calendar:

Vue FlatPickr Component Vue.js component for Flatpickr date-time picker. Demo or JSFiddle Version matrix Vue.js version Package version Branch 2.x 8.x

Ankur Kumar 842 Jan 13, 2022
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction 简介 This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

null 0 Dec 7, 2021
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 63 Jan 2, 2022
Fast, powerful and easy to use component datetime picker for VueJS

Vue Datetime Picker Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable dat

Vladyslav Shchepotin 29 Sep 22, 2021
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Timepicker ?? Dead repo recharged ?? A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. Demo You can see

Phoenix Wong 419 Jan 15, 2022
🕒 Simply customizable powerful time picker for Vue.js

vue-timeselector ?? Simple customizable Vue.js timepicker component vue-timeselector is a Vue (2.x) component that gives you ability to select a time

Alexis Colin 40 Oct 27, 2021
Vue time picker!

Vue Time Picker DEMO Simple, no nonsense time picker built and optimized for Vue. Installation Yarn yarn add -D @tygr/vue-time-picker import TimePick

Tyler Grinn 6 Oct 28, 2020
A dead simple and elegant month picker for Vue

vue-month-picker A lightweight month picker for Vue.js with no dependencies. Install npm npm install --save vue-month-picker yarn yarn add --save vue-

Andreas Rein 32 Jan 14, 2022