Datepicker component for Vue 3

Overview

vue3-date-time-picker

The most complete date picker solution for Vue 3

License Dependencies npm Downloads Open issues Vulnerabilities Release date

DOCUMENTATION

JSFiddle DEMO

Features

  • Single date picker
  • Range date picker
  • Time picker
  • Month picker
  • Locale support
  • Week numbers
  • Dark and light theme
  • Zero dependencies
  • SSR support
  • Highly configurable
  • Type support

Install

yarn add vue3-date-time-picker

# or

npm install vue3-date-time-picker

Import and register component

Global

import { createApp } from "vue";
import App from './App.vue';

import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'

const app = createApp(App);
app.component("Datepicker", Datepicker);

Local

<script>
    import Datepicker from 'vue3-date-time-picker';
    import 'vue3-date-time-picker/dist/main.css'
    
    export default {
        components: { Datepicker }
    }
script>

License

MIT

Comments
  • Usage inside modal not working

    Usage inside modal not working

    Hi there,

    thanks alot for your awesome datepicker!

    I just tried to use it inside a modal (tailwindui) and the input field is displayed correctly. However when I click on the input field, the date picker menu is not being opened. When I embed the datepicker the exact same way on the normal page, it works as expected.

    What am I missing here?

    bug question 
    opened by flowbru 15
  • What are the situations

    What are the situations "setMenuPosition" runs or reposition the menu

    First of all thanks for this awesome date time picker in vuejs composition API.

    Let's come to my issue I have a carousel with multiple cards each cards have time label at top right, when I click there the date picker opens i can update the date or time that works well, Because of the carousel the last card date picker menu is little bit overflow to the right not visible the select button in viewport i fixed that by calculating the free space to the right side of the browser window and move a bit to the left to adjust the position that too works well, but when I click on any day, click on next,prev Arrow ( month's ) select a tim, then the menu recalculate the position and come back to the real one, how can I fix that ? is your version 2.5 comes as responsive one then that fixes this issue by default ?

    bug 
    opened by Codefa 14
  • Position calculation bugs with relative layouts

    Position calculation bugs with relative layouts

    Describe the bug The menu has an incorrect position, when using any relative layout in a parent element. This is due to the use of offsetTop which is then the offset to its relative parent instead of the viewport.

    To Reproduce Steps to reproduce the behavior:

    1. Put the component within a container that has a relative CSS layout.
    2. Open the menu
    3. See the wrong positioning

    Expected behavior The position should be correct even within relative layouts, which is commonly used and needed in certain situations. The position calculation could be fixed with some approaches like they are presented here: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element#11396681

    Screenshots image

    Desktop (please complete the following information):

    • OS: Manjaro Linux
    • Browser: Firefox
    • Version: 92
    bug 
    opened by saibotk 14
  • Programmatically set the value of a time-picker not working

    Programmatically set the value of a time-picker not working

    Describe the bug I try to set the value programmatically to a time-picker, however the value is not visible until I click on the input.

    To Reproduce Please see the example here https://codesandbox.io/s/vue3-date-time-picker-demo-forked-7zney?file=/src/components/Demo.vue

    Expected behavior I expect that the value in the field to be updated without necessary clicking on the input.

    bug good first issue 
    opened by ekkode 8
  • Vue3 - no visible calendar, CSS doesn't seem to be importing

    Vue3 - no visible calendar, CSS doesn't seem to be importing

    Describe the bug Installed component in a Vue3 app, imported it locally along with the CSS. Component appears on page, however the CSS does not appear to be importing. No errors reported. See attached image - the left is before clicking to open, the right is when you click to open. No calendar appears.

    The CSS file exists in the node_modules folder

    To reproduce Simply installed component, imported and added to existing page. Cannot find any cause as to why it's not appearing properly.

    bug 
    opened by mdeblieck 8
  • test: Add a test for formatting using locale, ie. Japanese

    test: Add a test for formatting using locale, ie. Japanese

    I discovered that locale does not seem to affect the format output, and added a test for it.

    The root cause is not passing the component's locale down to the date-fns format function. Would you accept a PR if I modified formatDate to also accept a locale? Several components would also have to know about the locale as a result.

    This PR is just the test.

    opened by misha 7
  • altPosition not work correctly

    altPosition not work correctly

    If is enought space in the top Datepicker recalculate top position, when is enought space in the bottom Datepicker take my custom 'top' position.

    code:

                <Datepicker v-else-if="getInputType(name) == 'date'"
                  v-model="gObject[name]"
                  autoPosition="false"
                  :altPosition="() => { return { top: '80px', left: '50%', transform: 'translateX(-50%)' } }"
                  :enableTimePicker="false"
                  :placeholder="dateConvert(name, value)"
                  @closed="dateWithoutTime(gObject[name], name)"
                  :locale="$i18n.locale"
                  hideInputIcon/>
    

    Windows 10 64, Chrome 111a 111b

    bug 
    opened by nipanimaju 6
  • Reposition overlay not working for input inside scrollable container

    Reposition overlay not working for input inside scrollable container

    Describe the bug Actually I'm not sure if this is a bug or I'm just doing something wrong. My web app has static elements for header, navigation and footer. The content is inside a container with overflow-y: auto; so that it is scrollable. The calendar / time picker overlay is not scrolling when scrolling inside the scrollable container. This results in a static position of the overlay while the input field is moving up and down.

    To Reproduce https://codesandbox.io/s/vue3-date-time-picker-demo-bn8h2?file=/src/components/Demo.vue

    1. click inside one of the picker (upper: auto position, lower: altPosition)
    2. scroll inside the scrollable container (overlay not moving)
    3. scroll outside the container (overlay moving)

    Expected behavior I would expect scrolling inside the container refreshes the overlays position.

    P.S.: Sorry for all the issues I'm opening 🤭

    bug 
    opened by TheVaan 6
  • TimPicker not working as expected with maxTime and minTime

    TimPicker not working as expected with maxTime and minTime

    Describe the bug minTime prevents choosing a lower minute then minTime.minutes when the hour is higher then minTime.hours is. Same with maxTime: I can't select all minutes when hour is lower then maxTime.hours. Maybe this is made by design, but for me "minTime - Sets the minimal available time to pick" means: this represents the lowest time you can choose, where minutes and hours combined(!) are the limit and not "lowest hour and independent lowest minute". Furthermore using maxTime creates an effect of changing value as described in #38. I'm not using @update so I'm not sure why this happens.

    To Reproduce Set minTime and maxTime. https://codesandbox.io/s/vue3-date-time-picker-demo-forked-31cce?file=/src/components/Demo.vue

    Expected behavior minTime: when an higher hour then minTime.hours is set, there is no limit for the minutes. maxTime: when a lower hour then maxTime.hours is set, there is no limit for the minutes. The time should not change when clicking inside the input.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser: Chrome (96.0.4664.55), Safari (15.1)
    enhancement 
    opened by TheVaan 6
  • add stop propagation on picker element

    add stop propagation on picker element

    Describe the bug if the calendar component place inside a popup with behaviour click outside the popup. the picker will autoclose the popup without selecting any value.

    To Reproduce Steps to reproduce the behavior:

    1. Create a popup component (modal)
    2. make the modal have behaviour on autoclosing if click outside the modal
    3. put the datepicker component inside the modal
    4. open the datepicker and click on the picker
    5. See error

    Expected behavior should not closing the picker and modal, maybe add event stop propagation on the picker element?

    bug 
    opened by zynth17 6
  • scroll to move by month

    scroll to move by month

    Is your feature request related to a problem? Please describe. no

    Describe the solution you'd like it will be good to have scrolling if the date is open, what i mean by scrolling is when the calendar open, we can move the datepicker using scroll and the date will move by month, i.e : scroll up will bring the datepicker move to previous month and vice versa.

    Additional context will be usefull rather than have to click next or previous button

    enhancement 
    opened by zynth17 6
Releases(v2.8.1)
  • v2.8.1(Mar 19, 2022)

    Version lock

    ⚠️ Library name is changed to @vuepic/vue-datepicker

    ⚠️ The library is moved to the new repository https://github.com/Vuepic/vue-datepicker

    • This repository won't be updated anymore and soon will be archived, please switch to the new package
    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Mar 12, 2022)

    🚀 Features

    • Added event updateMonthYear when month or year is changed (#107)
    • multiDatesLimit - Limit selectable dates in multiDates mode (#108)
    • range mode is now compatible with month picker (#109)
    • weekPicker mode added (#110)
    • keepActionRow - Option to keep action bar when autoApply is set (#111)
    • reverseYears - Option to reverse years order (#113)

    🐛 Bug Fixes

    • Fixed issue where disabling time picker prevented flow from executing (#114)
    • Fixed issue where tab index is reset after the date is selected, preventing further keyboard navigation (#115)
    • Fixed issue with z-index in inline mode (#116)
    • Fixed issue with invalid date staying in text input when being discarded (#117)
    • Fixed issue where the same date in preset ranges blocks start time
    • Fixed issue with page scroll when opening month-picker

    🔧 Refactor

    • Code cleanup
      • Reduced overall build size
    • master branch renamed to main
    Source code(tar.gz)
    Source code(zip)
  • v2.7.0(Feb 23, 2022)

    🚀 Features

    • utc - Support for UTC zone (#88)

    🐛 Bug Fixes

    • Fixed issue causing the menu to close when using inside modals (#85)
    • Fixed issue with preventMinMaxNavigation disabling wrong arrows (#99)
    • Fixed issue where text input resets range (#101)
    • Fixed issue where you can set lower time on start date in range mode when both dates are the same date (#102)
    • Fixed issue where start/end time is changeable with fixed dates (#103)

    🔧 Refactor

    • Option to use clear-icon slot with the dp-input slot (#100)
      • onClear event added to the dp-input slot params
    • Cleaned up some redundant code
    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Feb 13, 2022)

    🚀 Features

    • multiDates - Allow selecting multiple single dates (#82)
    • presetRanges - Specify pre-defined ranges to select (#86)
    • flow - Set selecting order (#87)
    • minRange & maxRange - Set min and max range available for selection (#93)
    • fixedStart & fixedEnd - Modify only first or second date in the defined range (#93)
    • preventMinMaxNavigation - If enabled, you won't be able to navigate before or after minDate and maxDate (#94)
    • After or before months/years will now be disabled in the overlay if maxDate or minDate are provided

    🐛 Bug Fixes

    • Fixed seconds not working in range mode (#95)
    • Fixed issue with altPosition and custom function where it calls recalculate position method (#97)
    • Fixed issue when clearing range value from keyboard with autoApply (#98)
    • Fixed issue causing the menu to expand when some props are configured (locale, previewFormat ...)
    Source code(tar.gz)
    Source code(zip)
  • v2.5.0(Jan 29, 2022)

    ⚠️ Breaking changes

    • twoCalendars renamed to multiCalendars
    • twoCalendarsSolo renamed to multiCalendarsSolo

    🚀 Features

    • New CSS variable added for menu border-color (#74)
    • multiCalendars - allow adding multiple calendars (#75)
    • inlineWithInput - option to use input field with inline (#77)
    • Option to add name attribute to the input element (#80)
    • @recalculatePosition - event added when menu position is recalculated (#81)
    • Option to add autocomplete attribute to the input element (#83)
    • Option to pass a custom positioning function to the altPosition

    🐛 Bug Fixes

    • Fix scss import issues (c4e289d) (#76)
    • Fix type not recognized with vite (#78)
    • Fix browser import with script tag (#79)
    • minDate and maxDate not working in monthPicker mode (#84)
    • Fix clicking on menu causing parent click outside directive to trigger (#85)
    • Fix textInput not working in monthPicker and timePicker models (#89)
    • Initial transition not triggered when modelValue is empty
    • Fix positioning on month change when the calendar is placed on top
    • Fix issue with months filter resulting in year jump

    🔧 Refactor

    • date-fns is now bundled with .min.js build (for CDN usage in the browser, ref: #79)
    • When using multiCalendars the grid will be auto responsive depending on the screen size (#75)
    • Time picker will now stretch full width when multiCalendars are set due to support for more than 2 calendars
    Source code(tar.gz)
    Source code(zip)
  • v2.4.4(Dec 26, 2021)

    🚀 Features

    • required - Add a required flag to the input field (#72)

    🐛 Bug Fixes

    • Fixed transition if initial modelValue is set on some month other than current
    Source code(tar.gz)
    Source code(zip)
  • v2.4.3(Dec 20, 2021)

    🚀 Features

    • formatLocale - Add localized date format, (uses date-fns locale options) (#66)

    🐛 Bug Fixes

    • disabled and readonly not working in inline mode (#70)
    Source code(tar.gz)
    Source code(zip)
  • v2.4.2(Dec 14, 2021)

  • v2.4.1(Dec 13, 2021)

    🐛 Bug Fixes

    • Add back node 12 support until EOL (#65)
    • Combination with both maxTime and minTime causing wrong validation (#56)
    • Menu focus causes unwanted page scroll
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Dec 12, 2021)

    🚀 Features

    • markers - Add markers on dates with (optional) tooltips
    • transitions - Customize or turn off transitions
    • uid- Pass id to input or menu element (#45)
    • modeHeight - Adjust height when in specific mode, timePicker and monthPicker (#44)
    • New slots added, am-pm-button, time-picker-overlay (#44)
    • Add keyboard accessibility (#49)
    • enableSeconds - Add seconds in time picker (#46)
    • Access to @focus and @blur events (#49)
    • escClose - Close the menu on esc button
    • spaceConfirm - trigger select event when pressing space button
    • monthChangeOnArrows - Change months via arrows
    • @internalModelChange - Event called when internal modelValue is changed (#52)
    • Support for now button in range mode (#54)

    🐛 Bug Fixes

    • Stop propagation when using click outside directives (#51)
    • Months starting on Sunday getting the wrong calendar (#55)
    • startTime not working in time-picker mode (#58)
    • Issue where timezone dates caused inconsistency in the calendar (#62)
    • Focus border to stay when date picker menu is in the open state
    • Time not applied in range mode when only one date is selected
    • Wheel month change not changing year
    • No border-radius at the bottom when autoApply is enabled
    • Hover date border-radius stays in single-mode when range is active
    • Wrong month/year on the second calendar with a partial range in two-calendars mode

    🔧 Refactor

    • date-fns is now added as a dependency instead of bundling it with the package
    • Some code reorganization resulting in a smaller build size
    • Increased default range for yearRange prop (#50)
    • clear-icon slot has a function passed as prop called clear and will not auto clear (#53 , #64)
    • disabledDates now accepts a custom function (#60)
    • openMenuOnFocus moved from textInputOptions to general prop
    • monthChangeOnScroll extended with an option to change scroll direction (#43)
    • Now button will not auto-apply value if auto-apply is not specified
    • Timepicker improvements (#56)
      • maxTime and minTime treated as the actual time
      • disable auto time jumping to min or max (#38)
      • validation logic adjustments

    📝 Documentation

    • Due to a large number of props and slots that can be passed, they are now categorized in the documentation for easier navigation
    Source code(tar.gz)
    Source code(zip)
  • v2.3.6(Nov 19, 2021)

    🚀 Features

    • monthChangeOnScroll - Allow month change by mouse wheel scroll on the calendar, enabled by default (#43)

    🐛 Bug Fixes

    • Auto-rotate marked start date in range selection based on hover date
    • Clearing value on text-input with auto-apply not setting the date to null (#32)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.5(Nov 11, 2021)

  • v2.3.4(Nov 6, 2021)

    🚀 Features

    • --dp-hover-text-color and --dp-hover-icon-color added in theme classes (#39)
    • showNowButton and nowButtonLabel props added -> select current date and time (#40)
    • now-button slot added
    Source code(tar.gz)
    Source code(zip)
  • v2.3.3(Nov 4, 2021)

    🐛 Bug Fixes

    • Not able to clear value when text-input is enabled via enter or tab (#32)
    • Calendar being shown despite unfocus (#33)
    • Error on component import (#35)
    • CSS not importing with Vue CLI 5 (#36)
    • Programmatically set the value of a time-picker not working (#37)

    🔧 Refactor

    • auto-apply prop to auto-apply value from the text-input if enabled (#34)
    • uid prop is removed since it is not needed for multiple datepicker instances anymore
    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Oct 30, 2021)

  • v2.3.1(Oct 27, 2021)

    🐛 Bug Fixes

    • Event propagation on dropdowns and menus (#29)
    • Clearing value requires two clicks to open the menu with a custom clear icon
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Oct 25, 2021)

    🚀 Features

    • disabledWeekDays - Disable specific weekdays
    • allowedDates - Set only available dates
    • New slots added, calendar-header and dp-input
    • Improved accessibility

    🐛 Bug Fixes

    • Auto apply not applying value on month-picker mode (#27)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Oct 20, 2021)

    ⚠️ Breaking Changes

    • Some classes are changed for the calendar since the table tag is replaced with div, so if you modified something, make sure to adjust it
    • calendarClassName is now passed directly to the calendar wrapper and not the top-most parent

    🚀 Features

    • twoCalendars - Show two calendars for range picker (#20)
    • twoCalendarsSolo - Show two calendars, but both will behave independently of each other
    • hideOffsetDates - Hide days from the previous/next month in the calendar
    • autoRange - Predefine range
    • noToday - Disable today mark in the calendar
    • noHoursOverlay - Disable overlay for hours in the time picker
    • noMinutesOverlay - Disable overlay for minutes in the time picker
    • New slots added hours, minutes, hours-overlay, minutes-overlay, month, year, month-overlay, year-overlay
    • textInputOptions extended with 2 more properties, tabSubmit and openMenuOnFocus (#24)

    🐛 Bug Fixes

    • customProps not passed to child components
    • New prop altPosition added for relative positioned parent (#8)
    • Same style when using with CSS frameworks
    • Prevent calendar expanding on custom action labels
    • Correct scss import path in the documentation (#23)
    • Missing calendar dates when weekStart is changed
    • Hours glitch when going arrow down from 12 AM when is24 is disabled
    • Time validation issues with minTime and maxTime

    🔧 Refactor

    • Replaced table tag with div for calendar
    • Style wrapped in border-box for unified dimensions
    • Slightly compact size overall
    • Preselect value on month-picker and time-picker (UX)
    • Improved type support
    • hoursIncrement and minutesIncrement not to reset on 00:00
    • Range marking improved
    Source code(tar.gz)
    Source code(zip)
  • v2.1.8(Oct 8, 2021)

  • v2.1.7(Oct 4, 2021)

  • v2.1.6(Oct 3, 2021)

    🐛 Bug Fixes

    • Date picker pop up appears underneath the modal window (#15)
    • Box sizing defaults to unset because some of the CSS frameworks may use inherit or border-box, causing some elements to misplace
    Source code(tar.gz)
    Source code(zip)
  • v2.1.5(Oct 1, 2021)

    Note: This version skips one version in history due to re-publish

    🐛 Bug Fixes

    • Error on teleport target throwing not found error before render
    • Unable to select January on month picker mode
    • Error on incomplete range picker selection

    🔧 Refactor

    • Some css properties are extracted as scss variables for easier configuration (#13 )
    • scss variable $dp_cell_border_radius is changed to $dp__cell_border_radius to follow the pattern
    • state prop will set the border color as default and not on hover
    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Sep 29, 2021)

  • v2.1.2(Sep 27, 2021)

    🐛 Bug Fixes

    • Position calculation bugs with relative layouts (#8)
    • Fix arrow placement in some situations going down even if the menu is open at the bottom
    • Disable position recalculate if the menu is not open
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Sep 26, 2021)

  • v2.1.0(Sep 25, 2021)

    ⚠️ BREAKING CHANGES

    Due to the number of issues on inputmask and the size of the library, it is removed as a dependency.

    • inputmask removed
    • text-input-options are changed

    🚀 Features

    • monthYearComponent: Use a custom component in the header for month/year pick
    • timePickerComponent: Use a custom component for the time picker
    • actionRowComponent: Use a custom component for the action row

    🐛 Bug Fixes

    • Prop type correction for startTime
    • Fix reselecting with enter on text-input selects the old value

    🔧 Refactor

    • Convert to <script setup>
    • Type declaration added to package.json
    • Pack date-fns used functions with build

    📝 Chore

    • Update dependencies
    • Add documentation for custom components
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Sep 18, 2021)

    The component is fully refactored due to the recent features and the planned ones, ease of maintenance and better code organization.

    ⚠️ BREAKING CHANGES

    • format prop is now using string format with Unicode tokens instead of the Intl.DateTimeFormatOptions object

    🚀 Features

    • textInput: Allows date selection via text input
    • textInputOptions: Configure textInput prop
    • monthNameFormat: Change month names to short or long format
    • teleport: Configure teleport target
    • startDate: Set starting position of the calendar, month and year
    • startTime: Set default time in time picker
    • New emit events added 'textSubmit', 'closed', 'cleared'
    • New slots added 'clock-icon', 'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'calendar-icon', 'day', 'action-select', 'action-preview'

    🐛 Bug Fixes

    • Allowed selecting years out of the provided range
    • Month picker left arrow incrementing the year
    • Allowed selecting disabled months from the calendar
    • Allowed selecting the date out of the year range
    • Some CSS adjustments

    📝 Docs

    • Search is added
    • Better prop type and default value overview
    • Added methods and events sections
    • Playground changed to CodeSandbox
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Sep 7, 2021)

    🐛 Bug Fixes

    • Connected calendarClassName prop
    • Peer dependency set to correct version (#1)

    📝 Chore

    • Customization props on the documentation website moved to the API section and added examples
    • Highlighted the code section for the example code
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Sep 4, 2021)

    🚀 Features

    • monthPicker (Select only month and year)
    • timePicker (Select only time)
    • closeOnAutoApply (Whether to close the menu when value is selected)

    🐛 Bug Fixes

    • Not showing the selected date when autoApply is enabled
    • Disabled dates not being disabled
    • Missing scss files in build files

    🔧 Refactor

    • autoApply (Event based update, it will close the menu only on date selection)
    • Clicking clear will close the menu if opened
    • Removed unnecessary type declaration from the build files
    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Sep 2, 2021)

    🐛 Bug Fixes

    • Inline positioning when autoPosition is enabled
    • Months and years excluded with filters available for select via arrows
    • Menu auto position when there is no space on top and bottom
    Source code(tar.gz)
    Source code(zip)
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 498 Dec 4, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 706 Nov 21, 2022
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.6k Jan 3, 2023
A vue component that provides datepicker for persian developers

vue persian datepicker This is a Jalali date picker component for Vue. این برنامه یک کامپوننت انتخاب تاریخ جلالی می باشد. Demo You can see a demo and

Dyon Software Development Group 100 Oct 1, 2022
datepicker component for Vue 2.x

vue-date-picker datepicker component for Vue 2.x Screenshot Instllation $ npm install vue-date-picker --save Usage <template> <div class="demo">

8788 101 Nov 21, 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 346 Jan 3, 2023
awesome, zero dependency, performant Vue datepicker component

awesome, zero dependency, performant Vue datepicker component

mohammad S. 36 Oct 31, 2022
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 405 Jan 5, 2023
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

null 158 Dec 27, 2022
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 188 Nov 11, 2022
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 111 Dec 17, 2022
Vue draggable datepicker component

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

null 3 Feb 5, 2022
A lightweight and easy to use Vue.js datepicker component

A lightweight and easy to use Vue.js datepicker component (created for Vue 2.x)

Matt Areddia 0 Feb 5, 2019
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker 2 A datepicker Vue component. Compatible with Vue 2.x Demo Install Upgrade to 2.x+ Usage Date Formatting Props Events Disabled dates Highli

hokify 15 Jul 28, 2022
A Beautiful Datepicker Component For Vue2

vue-datepicker-local A Beautiful Datepicker Component For Vue2 Lightweight (less than 5kb minified and gzipped) Only dependencies Vue Beautiful! Demo

飞越 300 Dec 13, 2022
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Lin Masahiro 34 Dec 14, 2022
Jalaali calendar and datepicker for vue.js 2

vue-jalaali-datepicker Jalaali calendar and datepicker for vue.js 2 Demo Requirements Vue.js ^2.0.0 moment-jalaali ^0.6.0 Installation npm $ npm insta

Peyman 13 Nov 24, 2022
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 38 Dec 15, 2022