Implement a very simple calendar-based datepicker

Overview

Datepicker

simple-vue-datepicker

Implement a very simple calendar-based datepicker

Derived and stripped down from https://github.com/charliekassel/vuejs-datepicker

A datepicker Vue component. Compatible with Vue 2.x

N.B. - this is in a very raw intermediate state and is not meant for general public consumption at this point. I'm working on another project and will be cleaning this up over time but for now:

  1. it's not tested except for my specific use cases
  2. the documentation is inaccurate - it has not been scrubbed
  3. it's only partially stripped down - there are lots of relics

Install

$ npm install simple-vue-datepicker --save
import Datepicker from 'simple-vue-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});

Usage

<datepicker></datepicker>

value prop sets the selectedDate. should be a Date object. defaults to null - no date selected.

<script>
var state = {
    date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

Use v-model for two-way binding

<datepicker v-model="state.date"></datepicker>

Emits events

Some of these might still work

<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction" v-on:closed="datepickerClosedFunction">

Inline always open version

<datepicker :inline="true"></datepicker>

Available props

Prop Type Default Description
value Date/String Date value of the datepicker
language String en Translation for days and months
disabled Object See below for configuration
inline Boolean To show the datepicker always open
initialViewDate Date/String value Year/month to initially show on calendar
mondayFirst Boolean false Show Monday as first day of week

Events

These events are emitted on actions in the datepicker

Event Output Description
opened The picker is opened
closed The picker is closed
selected Date|null A date has been selected
cleared Selected date has been cleared

Disabled Dates

Dates can disabled in a number of ways.

<script>
var state = {
    disabled: {
        to: new Date(2016, 0, 5), // Disable all dates up to specific date
        from: new Date(2016, 0, 26), // Disable all dates after specific date
        days: [6, 0], // Disable Saturday's and Sunday's
        dates: [ // Disable an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :disabled="state.disabled"></datepicker>

Highlight Dates

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: You can only highlight dates that aren't disabled. Note: Both to and from properties are required to define a range of dates to highlight

<script>
var state = {
    highlighted: {
        to: new Date(2016, 0, 5), // Highlight all dates up to specific date
        from: new Date(2016, 0, 26), // Highlight all dates after specific date
        days: [6, 0], // Highlight Saturday's and Sunday's
        dates: [ // Highlight an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

Translations

Contributing guide - please use appropriate code from this list as the translation property.

<datepicker language="es"></datepicker>

Available languages

Abbr Language
ar Arabic
bg Bulgarian
bs Bosnian
cs Czech
da Danish
de German
ee Estonian
en English Default
es Spanish
fi Finnish
fr French
he Hebrew
hu Hungarian
hr Croatian
id Indonesian
is Icelandic
it Italian
ja Japanese
ko Korean
lt Lithuanian
nb-no Norwegian Bokmål
nl Dutch
pl Polish
pt-br Portuguese-Brazil
ro Romanian
ru Russian
sk Slovak
sl-si Slovenian
sv Swedish
th Thai
tr Turkish
uk Ukrainian
vi Vietnamese
zh Chinese
Owner
Bruce MacNaughton
Software developer with a passion for maintainable and extensible systems and frameworks.
Bruce MacNaughton
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
[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 704 Dec 9, 2021
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 15 Aug 29, 2021
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.5k Jan 19, 2022
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Lin Masahiro 29 Dec 7, 2021
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 78 Jan 14, 2022
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 Dec 14, 2021
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

飞越 294 Jul 17, 2021
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

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

Tom 82 Jan 5, 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 100 Dec 13, 2021
A clean datepicker made with VueJs

vue-datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Props Events Date Formatting Translations Best Practices Demo To

Mathieu Stanowski 150 Jan 11, 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
awesome, zero dependency, performant Vue datepicker component

awesome, zero dependency, performant Vue datepicker component

mohammad S. 31 Jan 11, 2022
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 373 Jan 7, 2022
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

null 97 Jan 20, 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 183 Dec 15, 2021
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
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 19 Jan 16, 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 0 Jan 20, 2022