A datepicker / datetimepicker component for Vue2

Overview

vue2-datepicker

中文版

A Datepicker Component For Vue2

build:passed Badge npm MIT

Demo

https://mengxiong10.github.io/vue2-datepicker/index.html

image

Install

$ npm install vue2-datepicker --save

Usage

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        time1: null,
        time2: null,
        time3: null,
      };
    },
  };
</script>

<template>
  <div>
    <date-picker v-model="time1" valueType="format"></date-picker>
    <date-picker v-model="time2" type="datetime"></date-picker>
    <date-picker v-model="time3" range></date-picker>
  </div>
</template>

Theme

If your project uses SCSS, you can change the default style variables.

To create a scss file. e.g. datepicker.scss:

$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue2-datepicker/scss/index.scss';

Internationalization

The default language of v3.x is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.

import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';

import 'vue2-datepicker/locale/zh-cn';

You can also override some of the default locale by lang. Full config

<script>
  export default {
    data() {
      return {
        lang: {
          formatLocale: {
            firstDayOfWeek: 1,
          },
          monthBeforeYear: false,
        },
      };
    },
  };
</script>

<template>
  <date-picker :lang="lang"></date-picker>
</template>

Props

Prop Description Type Default
type select the type of picker date |datetime|year|month|time|week 'date'
range if true, pick the range date boolean false
format to set the date format. similar to moment.js token 'YYYY-MM-DD'
formatter use your own formatter, such as moment.js object -
value-type data type of the binding value value-type 'date'
default-value default date of the calendar Date new Date()
lang override the default locale object
placeholder input placeholder text string ''
editable whether the input is editable boolean true
clearable if false, don't show the clear icon boolean true
confirm if true, need click the button to change value boolean false
confirm-text the text of confirm button string 'OK'
multiple if true, multi-select date boolean false
disabled disable the component boolean false
disabled-date specify the date that cannot be selected (date) => boolean -
disabled-time specify the time that cannot be selected (date) => boolean -
append-to-body append the popup to body boolean true
inline without input boolean false
input-class input classname string 'mx-input'
input-attr input attrs(eg: { name: 'date', id: 'foo'}) object
open open state of picker boolean -
default-panel default panel of the picker year|month -
popup-style popup style object
popup-class popup classes
shortcuts set shortcuts to select Array<{text, onClick}> -
title-format format of the tooltip in calendar cell token 'YYYY-MM-DD'
partial-update whether update date when select year or month boolean false
range-separator text of range separator string ' ~ '
show-week-number determine whether show week number boolean false
hour-step interval between hours in time picker 1 - 60 1
minute-step interval between minutes in time picker 1 - 60 1
second-step interval between seconds in time picker 1 - 60 1
hour-options custom hour column Array<number> -
minute-options custom minute column Array<number> -
second-options custom second column Array<number> -
show-hour whether show hour column boolean base on format
show-minute whether show minute column boolean base on format
show-second whether show second column boolean base on format
use12h whether show ampm column boolean base on format
show-time-header whether show header of time picker boolean false
time-title-format format of the time header token 'YYYY-MM-DD'
time-picker-options set fixed time list to select time-picker-options null
prefix-class set prefix class string 'mx'
scroll-duration set the duration of scroll when hour is selected number 100

Token

Uint Token output
Year YY 70 71 ... 10 11
YYYY 1970 1971 ... 2010 2011
Y -1000 ...20 ... 1970 ... 9999 +10000
Month M 1 2 ... 11 12
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Day of Month D 1 2 ... 30 31
DD 01 02 ... 30 31
Day of Week d 0 1 ... 5 6
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 12
hh 01 02 ... 12
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
Time Zone Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Week of Year w 1 2 ... 52 53
ww 01 02 ... 52 53
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

formatter

The formatter accepts an object to customize formatting.

<date-picker :formatter="momentFormat" />
data() {
  return {
    // Use moment.js instead of the default
    momentFormat: {
      //[optional] Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      },
      //[optional]  String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      },
      //[optional] getWeekNumber
      getWeek: (date) => {
        return // a number
      }
    }
  }
}

value-type

set the format of binding value

Value Description
'date' return a Date object
'timestamp' return a timestamp number
'format' returns a string formatted using pattern of format
token(MM/DD/YYYY) returns a string formatted using this pattern

shortcuts

The shortcuts for the range picker

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];
Attribute Description
text title of the shortcut
onClick callback function , need to return a Date

time-picker-options

Set fixed time list to select;

{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
Attribute Description
start start time
step step time
end end time
format the default is same as prop format

Events

Name Description Callback Arguments
input When the value change(v-model event) date
change When the value change(same as input) date, type('date'|'hour'|'minute'|'second'|'ampm
open When panel opening event
close When panel closing
confirm When click 'confirm' button date
clear When click 'clear' button
input-error When user type a invalid Date the input text
focus When input focus
blur When input blur
pick when select date #429 date
calendar-change when change the calendar date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade')
panel-change when the calendar panel changes type('year'|'month'|'date'), oldType

Slots

Name Description
icon-calendar custom the calender icon
icon-clear custom the clear icon
input replace input
header popup header
footer popup footer
sidebar popup sidebar

ChangeLog

CHANGELOG

One-time Donations

If you find this project useful, you can buy me a coffee

Paypal Me

donate

License

MIT

Copyright (c) 2017-present xiemengxiong

Issues
  • Control the timezone

    Control the timezone

    I trying to find a way to control the timezone in the a dual date range calendar. As far as I see it, there is no obvious way to do this.

    Any suggestions?

    opened by pimvanderheijden 21
  • Clearing the date or choosing a date has no effect

    Clearing the date or choosing a date has no effect

    I just downloaded this today and using it in my project. Everything seems to work where I see it displaying my date from the v-model. However, when choosing a date, it doesn't change the value in the text box.

    Also, clicking on "x" doesn't clear the value and show placeholder

    image

    I'm displaying this text inside a client table from vue-tables-2

    opened by sam26880 19
  • [Bug] :disabled-time disables time starting from next hour

    [Bug] :disabled-time disables time starting from next hour

    Vue2-datepicker version: 3.1.1 Vue version: 2.6.10 Browser: Chrome 78

    Steps to reproduce :disabled-time="(date) => date < new Date()"

    Expected behavior Lets suppose current time is 15:33:03 User should be able to select 15:33:04 and later

    Actual behavior User can able to select 16:00:00 and later.

    opened by plakhin 18
  • Bad behaviour with not-before and time-list

    Bad behaviour with not-before and time-list

    Hi,

    I found an unexpected behaviour when using the not-before option with new Date().

    It is currently 17h57 and when the time picker is displayed, the hour 17 and minute 57 are both actived and disabled.

    Capture d’écran 2019-03-30 à 17 55 20 Capture d’écran 2019-03-30 à 17 58 19

    When I click on the minute 58 for example, the disabledclass disappear for the hour and now the actived is used (what it is expected by default).

    Capture d’écran 2019-03-30 à 17 58 41 Capture d’écran 2019-03-30 à 17 58 32

    I temporarily fixed this by using !important on properties in the actived class but this is not a long-term solution...

    I think this is a bug, what do you think about that?

    opened by HapLifeMan 16
  • confirm: value doesn't change on

    confirm: value doesn't change on "OK", if only year and/or month were changed

    The month and year of a date cannot currently be changed alone (using the UI).

    Steps to reproduce

    1. <date-picker v-model="value" confirm />
    2. Choose a date, e.g. 2019-04-07.
    3. Choose a different year, e.g. 2020, and press "OK".
    4. Date is still 2019-04-07.
    5. Choose a different month, e.g. 05, and press "OK".
    6. Date is still 2019-04-07.

    Expected result

    It should be possible to change ...

    1. the month without having to choose the day again.
    2. the year without having to choose the month (and the day) again.

    Actual result

    The changes are ignored unless day or month and day are chosen.

    opened by caugner 16
  • Setting a Min/Max time for datetime picker

    Setting a Min/Max time for datetime picker

    Hello, I am using your datetime picker component to allow users to choose the date and time for an event that should not be scheduled earlier than 1pm. With the current date time picker there doesn't seem to be an option to set a min / max time.

    This is my current implementation:

    For the example above, we'd like to hide all hours prior to 1pm from the time picker step. Second, we'd like to have the option to display non-military time with am/pm in the time step (1pm instead of 13). I appreciate any suggestions on how to accomplish this.

    Thanks in advance!

    opened by matanelhazan 16
  • Is it possible to show the popup on focus and close it on blur?

    Is it possible to show the popup on focus and close it on blur?

        <no-ssr>
            <date-picker
              :ref="datepicker"
              @focus="$refs[`datepicker`][0].showPopup()"
              @blur="$refs[`datepicker`][0].closePopup()"
              v-model="year"
              type="year"
              format="YYYY"
              placeholder="Year"
              :not-after="new Date()"
              :not-before="new Date('1970')"
            </date-picker>
          </no-ssr>
    

    The @focus and @blur method don't seem to work? I checked the events of the date-picker and found that we don't have blur and focus. Any suggestions on how to achieve it?

    opened by DineshMadanlal 15
  • Format YYYY/MM not working on IE11

    Format YYYY/MM not working on IE11

    I want to format date YYYY/MM on IE11 but it's not working. on Chrome is OK. Please help to verify it. <date-pickers v-model="model.searchYm" :elementId="'searchYm'" :type="'date'" :format="'YYYY/MM'" maxlength="7" :input-class="'datepicker'" placeholder="YYYY/MM"/>

    opened by lequy1010 14
  • Custom format function

    Custom format function

    Sometimes you need more control when formatting the Dates.

    <date-picker v-model="time" :format="customFormatter"></date-picker>
    
    methods: {
      customFormatter(date) {
        return moment(date).format('MMMM Do YYYY, h:mm:ss a');
      }
    }
    

    This functionality will be supported somehow? are PRs welcome?

    opened by saintplay 14
  • [Feature request] - Week Number Callback

    [Feature request] - Week Number Callback

    What problem does this feature solve? We use a different week numbering system for business that we would like to display. For example, Week 1 for 2021 begins on January 3rd, so the 1st and 2nd belong to week 53 of 2020.

    What does the proposed API look like? getWeekNumber(date: Date): number Essentially provide a hook that the would override the default week number based on a the user-defined week for any given date.

    opened by byronferguson 13
  • range on 2 calendars

    range on 2 calendars

    How can i select a range on 2 calendar now, as it was in 2.x.x ver? Left for start date , and right for end date

    opened by Tweeddy 1
  • [Bug] datepicker is out of viewport, when size changes

    [Bug] datepicker is out of viewport, when size changes

    Vue2-datepicker version: 3.9.0 Vue version: 2.6.13 Browser: independend

    Steps to reproduce The datepicker popup opens at the most right position of the browser's window (triggered from a button inside a sidebar) grafik

    When selecting range the new panel opens to the right and is out of the viewport grafik

    Reproduction Link or Source Code https://github.com/nextcloud/polls/tree/master/src/js/components/Options

    Expected behavior The panel should react to the width change and position the popup inside the viewport

    Actual behavior see screenshots

    opened by dartcafe 0
  • [Feature request] Open Date/Time ranges

    [Feature request] Open Date/Time ranges

    What problem does this feature solve?

    Our users need to be able to select a date/time range, which may be open-ended.

    So potential inputs that are allowed are: 2020-01-01 - 2020-12-31 (all days in 2020) 2020-01-01 - null (all days from the beginning of 2020) null - 2020-01-01 (all days until the beginning of 2020)

    What does the proposed API look like?

    A new prop boolean "open-range" prop that is only available if the range prop is set to true. In this case, people are allowed to choose open-ended date and/or time ranges. This could enable two additional buttons below the calender which can be used to select that one of the sides is an open end.

    opened by m-mohr 0
  • How I Can Set start date of range picker ?

    How I Can Set start date of range picker ?

    <date-picker
     v-model="closingRange"
     range
     valueType="format"
     :default-value="new Date()"
     :disabled-date="disabledBefore"
    ></date-picker>
    
    
    disabledBefore(date) {
     let dayBefore = this.$moment(this.firstDateIfNull).format(
                    "YYYY-MM-DD"
                );
     const beforeToday = new Date(dayBefore);
           beforeToday.setHours(0, 0, 0, 0);
      return date < beforeToday; // Assume < 25 May Not Selected
    }
    

    So, We Can auto select 26 May on start date of data range. so user just can change end of date range.

    opened by muamar-bridgenote 1
  • Question Short Cut

    Question Short Cut

    How to set lastweek in shortcuts or last month in shortcuts.

    opened by Tejareddy94 0
  • Trigger open/closed date picker inside Storybook

    Trigger open/closed date picker inside Storybook

    Hello everyone, I'm quite new to Vue.js development. Now I've implemented the datepicker inside Storybook but I really don't know how to trigger open/closed state when loading the page.

    This is my code so far:

    <template>
      <div class="box">
          <date-picker
            v-model="time1"
            format="YYYY-MM-DD"
            type="date"
            :open.sync= 'open'
            @change="handleChange"
          ></date-picker>
      </div>
    </template>
    
    <script>
    import DatePicker from 'vue2-datepicker';
    export default {
      components: { DatePicker },
      name: 'Default',
      data() {
        return {
          time1: null,
          open: false
        };
      },
      methods: {
        handleChange(value, type) {
          if (type === true) {
            this.open = true;
          }
        },
      },
    };
    

    At this point I know that when I'm changing the value of open: false to open: true inside data() function the date picker open twice, overlapping, otherwise of course just stays closed.

    The method that I've put down was just for trying something, I know that is wrong.

    Thanks everyone

    opened by tidumarco 5
  • [Bug] iOS Mobile Safari: Need to click twice when selecting time

    [Bug] iOS Mobile Safari: Need to click twice when selecting time

    Vue2-datepicker version: ^3.9.0 Vue version: ^2.6.12 Browser: Mobile Safari

    Steps to reproduce Just go to https://mengxiong10.github.io/vue2-datepicker/index.html and then choose time from the datetime picker

    Reproduction Link or Source Code https://mengxiong10.github.io/vue2-datepicker/index.html

    Expected behavior It should pick the time the moment I first clicked on it.

    Actual behavior it's just applying a 'hover' state to the time picker that I've clicked.

    opened by ejlocop 0
  • [Question] Shortcuts template

    [Question] Shortcuts template

    Hi! Is there any way to customize the shortcuts display, like we can do with v-slot:content? Currently, they are buttons, but if I want it to be a select input, how could I do that?

    opened by christianbayer 1
  • [UX Feedback] Range selection UX issue

    [UX Feedback] Range selection UX issue

    Just wanted to ping back some UX feedback of a designer, who works with our organisatoin and help to improve UX for our nextcloud app.

    Maybe suggestions for improvements are welcome. https://github.com/nextcloud/polls/issues/1577

    opened by dartcafe 1
  • [Bug] Can't properly choose time range within boundaries

    [Bug] Can't properly choose time range within boundaries

    Vue2-datepicker version: 3.9.0 Vue version:2.3.3 Browser:Electron 2.0.9

    Steps to reproduce I created a datetime picker with a range, so I need to select datetime in a specific spectre of time, from 13.11.2020 12:57:33 to 13.11.2020 13:18:31 and disable any other time, for example. When I set disabled-date (or disabled-time as well) I face some problems with disabled "ending-time" of the picker for some reason. I set default-value too, as a period [13.11.2020 12:57:33, 13.11.2020 13:18:30] (it doesn't help if I'm trying to add secong to the start and subtract second from the end just to be sure that default period inside enabled scope)

    My code for now looks like:

    <date-picker
          v-model="period"
          type="datetime"
          range
          format="DD.MM.YYYY HH:mm:ss"
          input-class="datetime"
          :default-value="periodDefault"
          :disabled-date="disableDays"
          value-type="date">
    </date-picker>
    
    disableDays(date) {
          let date0 = new Date(this.dateStart) //13.11.2020 12:57:33
          date0.setHours(0, 0, 0, 0) // need to set hours, minuts, etc in 0, otherwise picker can't display this one enabled date
          let date1 = new Date(this.dateEnd) //13.11.2020 13:18:30
          date1.setHours(0, 0, 0, 0)
    
          return date < date0 ||
            date > date1
        },
    

    Expected behavior I can choose any time aside disabled time period

    Actual behavior In the case with disabled-date only or with disabled-time too I'm facing that there is blocked hours before 13 in end-section of timepicker and after 12 in start-section (yet I should be able to choose time range inside 12 or 13 hour too).

    This one is only with disabled-date (and I want to get period 12:57 - 12:59) 321 This one with disabled-time too (and I want to get period 12:57 - 12:59 or 13:10 - 13:11) 123

    Help me, please. I've seen a lot of issues but still can't figure out how to make it works right

    opened by SilverIrbis 1
Releases(v3.9.1)
  • v3.9.1(Jun 3, 2021)

  • v3.9.0(Feb 6, 2021)

  • v3.8.1(Nov 26, 2020)

  • v3.8.0(Nov 18, 2020)

  • v3.7.0(Nov 2, 2020)

  • v3.6.3(Oct 17, 2020)

  • v3.6.2(Aug 10, 2020)

  • v3.6.1(Jul 12, 2020)

  • v3.6.0(Jun 6, 2020)

  • v3.5.0(Apr 22, 2020)

  • v3.4.0(Mar 6, 2020)

    Bug Fixes

    • fix open event fired multiple times (be26d2a)
    • mobile support for date range (#419) (3c2e00e)
    • popup doesn't reposition when scrolling in Firefox (#427) (2d50e75)

    Features

    • add calendar-change event (#432) (17d2262)
    • add pick event when date clicked (#429) (2fb9e67)
    • ignore whitespace around separator on manual range input (#416) (376a7ef)

    修复bug

    Features

    • 添加calendar-change事件 (#432) (17d2262)
    • 添加pick 事件 当时间点击的时候 (#429) (2fb9e67)
    • 手动输入的时候忽略分隔符周围的空格 (#416) (376a7ef)
    Source code(tar.gz)
    Source code(zip)
  • v3.3.1(Mar 6, 2020)

  • v3.3.0(Dec 19, 2019)

    Bug Fixes

    Features


    修复Bug

    • get-class 对于范围模式生效 (c8f7122)
    • 修复shortcut在范围选择下失效 (#400) (bb0255f)

    新功能

    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Dec 3, 2019)

  • v3.2.0(Dec 1, 2019)

  • v3.1.1(Nov 24, 2019)

  • v3.1.0(Nov 21, 2019)

  • v3.0.2(Nov 18, 2019)

    Bug Fixes

    • compatible with vue old version inject (c03632f)
    • should return [null, null] when clear a range (635631f)

    Features

    • add prop partial-update. Determine whether update date when select year or month in type='date' or type='datetime' (07f4271)

    修复 Bug

    • 兼容旧版 vue 的inject语法 (c03632f)
    • 应该返回 [null, null] 当清除范围的时候 (635631f)
    • 当年在 0 到 100 时候显示问题 (8c546cc)

    新功能

    • 添加属性 partial-update, 决定是否选择年或月的时候也更新日期 (07f4271)
    Source code(tar.gz)
    Source code(zip)
  • v3.0.1(Nov 18, 2019)

  • v2.13.3(Nov 18, 2019)

  • v2.13.2(Nov 18, 2019)

  • v2.13.1(Nov 18, 2019)

  • v3.0.0(Nov 11, 2019)

    Bug Fixes

    • localization (lang) is not used for date formatting

    Features

    • Add week picker

      <date-picer type="week" />
      
    • Add inline calendar without input

      <date-picker inline />
      
    • Add prop open to control the state of popup

    • Add select am/pm, when use12hours

    • Add event open and close

    • Add hourStep/minuteStep/secondStep/showHour/showMinute/showSecond/use12h to time picker for more configuration

    Breaking changes

    • Need to import style separately

    • Change the default language to English. And need to import file to change the language.

    • Range selection refactoring, you can select a range on one calendar now, and need to click twice to select a range each time.

    • Change slot calendar-icon to icon-calendar.

    • appendToBody default value changes from false to true.

    • Remove not-before and not-after, use disabledDate instead.

      <template>
        <date-picker :disabled-date="notBeforeToday"></date-picker>
        <date-picker :disabled-date="notAfterToday"></date-picker>
      </template>
      <script>
        export default {
          methods: {
            notBeforeToday(date) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              return date.getTime() < today.getTime();
            },
            notAfterToday(date) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              return date.getTime() > today.getTime();
            },
          },
        };
      </script>
      
    • Remove width, use style="{ width: "" }" instead.

    • modify shortcuts api.

      [
        { text: 'today', onClick: () => new Date() // return a Date }
      ];
      
      
    • Remove prop firstDayOfWeek to locale.


    修复bug

    • 修复国际化没有应用到日期的格式

    新功能

    • 添加星期选择

      <date-picer type="week" />
      
    • 添加内联模式, 没有输入框

      <date-picker inline />
      
    • 添加 open 控制弹窗的状态

    • 添加 am/pm 的选择, 当使用12小时制

    • 添加事件openclose

    • 添加 hourStep/minuteStep/secondStep/showHour/showMinute/showSecond/use12h 对时间选择更多的控制

    不兼容更新

    • 需要单独引入样式

    • 修改默认语音是英文, 可以自行引入语言包

    • 日期范围选择重构, 现在模式是可以在一个日历上面选择范围, 每次选择需要点击2次.

    • 修改 slot calendar-iconicon-calendar.

    • appendToBody 默认值修改为true.

    • 移除 not-beforenot-after, 用 disabledDate 代替.

      <template>
        <date-picker :disabled-date="notBeforeToday"></date-picker>
        <date-picker :disabled-date="notAfterToday"></date-picker>
      </template>
      <script>
        export default {
          methods: {
            notBeforeToday(date) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              return date.getTime() < today.getTime();
            },
            notAfterToday(date) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              return date.getTime() > today.getTime();
            },
          },
        };
      </script>
      
    • 移除width, 用 style="{ width: "" }" 代替.

    • 修改 shortcuts , onClick函数返回一个日期.

    • 移除firstDayOfWeek到语言包

    Source code(tar.gz)
    Source code(zip)
  • v2.13.0(Oct 13, 2019)

    Bug Fixes

    • removed stoppropagation (864ab83)
    • the clickoutside don't work sometimes (#326) (d9619f8)

    Features

    • add prop icon-day to set calendar icon day (62c3d60)

    修复Bug

    • 移除阻止的事件冒泡
    • 修复自动关闭有时不生效

    新功能

    • 添加属性icon-day设置日历图标的数字
    Source code(tar.gz)
    Source code(zip)
  • v2.11.2(May 15, 2019)

  • v2.11.0(Apr 9, 2019)

  • v2.10.3(Mar 14, 2019)

  • v2.10.2(Mar 13, 2019)

  • v2.10.0(Feb 12, 2019)

  • v2.9.2(Feb 10, 2019)

Datepicker Component For Vue

Vue Datepicker Component A Datepicker Component For VueJs (https://edisdev.github.io/vue-datepicker-ui) Props <Calendar v-model="" :range

Hatice Edis 260 Jun 3, 2021
easy datepicker of a vue 2.0 component

vue-datepicker-infinite easy datepicker of a vue 2.0 component install npm install vue2-datepicker-infinite --save how to use template: <transition

Chen Leepyng 16 Jul 28, 2020
VUE chinese-lunar date-picker component with festivals and solar terms

vue-jLunar-datePicker @JinWen Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. Online demo enjoy the de

null 50 May 21, 2021
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 478 May 26, 2021
A lightweight collection of Vue components (including molecules and organisms) to manage dates easily

vue-date-tools VueJS Date Components based on the date-fns library Click Here to Try the Live Demo Best features: Lightweight and almost no dependenci

Antoine S 14 Dec 14, 2020
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

Vincent 53 Nov 25, 2020
Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. 中文文档 ?? Live demo I

Kit 75 Apr 20, 2021
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 341 Jun 3, 2021
VueJS wrapper component for Pikaday datepicker

Vue Pikaday VueJS wrapper component for Pikaday datepicker Install npm i -D @netcz/vue-pikaday or yarn add -D @netcz/vue-pikaday Usage Please consult

Michal Szajter 39 May 11, 2021
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 2.8k Jun 12, 2021
Plugin Vue.js for error tracking with Sentry

vue2-sentry Plugin Vue.js for error tracking with Sentry Sentry If you do not already have a Sentry account, you will need to create it to gain access

Alan Ktquez 48 May 14, 2021
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic <template> <calendar></calendar> </template> <script>

Franck Freiburger 49 Mar 29, 2021
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.4k Jun 2, 2021
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 628 May 14, 2021