[Deprecated] calendar and datepicker component with material design for Vue.js

Overview

vue-datepicker

calendar and datepicker component with material design for Vue.js

Demo

The demo page is HERE.

Screenshot

Requirements

Installation

npm

$ npm install vue-datepicker

Usage

<script>
// for Vue 1.0
import myDatepicker from 'vue-datepicker/vue-datepicker-1.vue'

// for Vue 2.0
import myDatepicker from 'vue-datepicker'

export default {
  data () {
    return {
      // for Vue 1.0
      starttime: '',
      endtime: '2016-01-19',
      testTime: '',
      multiTime: '',

      // for Vue 2.0
      startTime: {
        time: ''
      },
      endtime: {
        time: ''
      }

      option: {
        type: 'day',
        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format: 'YYYY-MM-DD',
        placeholder: 'when?',
        inputStyle: {
          'display': 'inline-block',
          'padding': '6px',
          'line-height': '22px',
          'font-size': '16px',
          'border': '2px solid #fff',
          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
          'border-radius': '2px',
          'color': '#5F5F5F'
        },
        color: {
          header: '#ccc',
          headerText: '#f00'
        },
        buttons: {
          ok: 'Ok',
          cancel: 'Cancel'
        },
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      timeoption: {
        type: 'min',
        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format: 'YYYY-MM-DD HH:mm'
      },
      multiOption: {
        type: 'multi-day',
        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format:"YYYY-MM-DD HH:mm"
      },
      limit: [{
        type: 'weekday',
        available: [1, 2, 3, 4, 5]
      },
      {
        type: 'fromto',
        from: '2016-02-01',
        to: '2016-02-20'
      }]
    }
  },
  components: {
    'date-picker': myDatepicker
  }
}
</script>
<template>
  <div class="card">

    <!-- for Vue 1.0 -->
    <div class="row">
      <span>Departure Date:</span>
      <date-picker :time.sync="starttime" :option="option" :limit="limit"></date-picker>
    </div>

    <!-- for Vue 2.0 -->
    <div class="row">
      <span>Departure Date:</span>
      <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
    </div>

  </div>
</template>

API

  • Option
  • type
  type: 'day' // 'min', 'multi-day'

  • format
format: 'YYYY-MM-DD HH:mm'
  • placeholder
placeholder: 'when?'
  • week
 week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
  • month
  month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
  • wrapperClass
wrapperClass: ''
  • inputClass
inputClass: ''
  • inputStyle
inputStyle: {
  'display': 'inline-block',
  'padding': '6px',
  'line-height': '22px',
  'font-size': '16px',
  'border': '2px solid #fff',
  'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
  'border-radius': '2px',
  'color': '#5F5F5F'
}
  • color
  color: {
    header: '#ccc',
    headerText: '#f00'
  }
  • buttons
buttons: {
  ok: 'OK',
  cancel: 'Cancel'
}
  • animate
  overlayOpacity: 0.5, // 0.5 as default
  dismissible: true // as true as default
  • limit
  • from sometime to sometime(when from/to is empty, days before/after end/start time will be available)
limit: {
  type:'fromto',
  from:'2016-01-10',
  to:'2016-01-30'
}
  • weekdays
limit:{
  type: 'weekday',
  available: [1, 2, 3, 4, 5] 
}

prop

  • Vue 1.0
time: '' // string
<date-picker :time.sync="time" :limit="limit"></date-picker>
  • Vue 2.0
date: {
  time: '' // string
}
<date-picker :date="date" :limit="limit"></date-picker>

License

The MIT License

Comments
  • Uncaught ReferenceError: exports is not defined

    Uncaught ReferenceError: exports is not defined

    vue-datepicker.vue?be3f:379 Uncaught ReferenceError: exports is not defined at eval (eval at (app.js:2512), :12:23) at Object. (app.js:2512) at webpack_require (app.js:660) at fn (app.js:86) at eval (eval at (app.js:2713), :8:3) at Object. (app.js:2713) at webpack_require (app.js:660) at fn (app.js:86) at eval (eval at (app.js:1840), :2:73) at Object. (app.js:1840)

    opened by laxiry1 7
  • Remove the default style

    Remove the default style

    I don't think you should have default styles for the input element in the component. It's great that we are able to override the styles with the component config (and you already have the styles in the documentation). But when I'm using the component with any other library the date fields will look different which is definitely not what I want.

    If you want, I can create a pull request.

    opened by Sopamo 6
  • 设置limit Bug

    设置limit Bug

    配置如下:

    limit: [{
      type: 'weekday',
      available: [1, 2, 3, 4, 5]
    }, {
      type: 'fromto',
      from: '2016-05-15'
    }]
    

    我默认不填to就是允许>= from的时间,有以下问题:

    • 只能选择2016-05-15之后一周的时间

    to设置为2017-05-15后,只有当月是正确的,其他月份比如4月、6月的日期可点

    opened by facesea 5
  • Question: Did vue-datepicker accepte range/multi-selection?

    Question: Did vue-datepicker accepte range/multi-selection?

    Hello there,

    Could you please tell me if this datepicker allow range/multi-selection? Or I'm just too dumb to find out the API? :disappointed:

    Thanks.

    H.

    opened by YanshuoH 4
  • About hours and minute

    About hours and minute

    Hi, I just downloaded the component and it works great, however I have some things to say :

    The minutes should be between 00 and 59 instead of being between 01 and 60 :It cause to have an invalid date with moment if you set the minutes to 60

    I would also suggest strongly to do the same for the hours : hours are from 00 to 23, so it doesn't cause confusion and we are getting closer to ISO 8601 https://en.wikipedia.org/wiki/ISO_8601

    Thanks !

    opened by smartpierre 4
  • Limit weekday, following month is selectable

    Limit weekday, following month is selectable

    Hi. Thank you for the great date picker!

    Sorry, I am a non-Chinese speaker. There is an issue with the limit on weekdays where you see the following month.

    If I limit the weekday like:

    {
          type: 'weekday',
          available: [1, 2, 3, 4, 5]
    }
    

    I get the correct result for the current month only.

    screen shot 2016-08-05 at 12 19 26

    Notice that this month is un selectable. In this example, we can see the start of September. This IS selectable and it shouldn't be.

    I hope that make sense. If this is a different issue, let me know and I will move this to another issue.

    Cheers - Love the datepicker - Thank you!!

    bug 
    opened by t2thec 3
  • How to catch

    How to catch "change" event from a parent component?

    Vue version: 1.0.28

    If I'm using it as a child component, how can I grab the chosen date? I did

    <date-picker v-on:change="setFromDueDate($event)" :time.sync="''" :option="datepicker.option"></date-picker>
    

    But if I log the event, it appears as undefined.

    methods: {
        setFromDueDate: function (event) {
            console.log(event);
        }
    }
    

    I see that inside the component it's using $emit to trigger events, but shouldn't it be using $dispatch instead, so that the parent can grab the event?

    opened by rcubitto 2
  • throw error: this.selectedDays.$remove is not a function

    throw error: this.selectedDays.$remove is not a function

    Used with Vue 2.0, when multi-day select one day and unselect it

    throw erro : this.selectedDays.$remove is not a function in vue-datepicker.vue at

     if (obj.checked === true) {
              obj.checked = false;
              this.selectedDays.$remove(ctime);
            }
    

    I think because in Vue 2.0 The $remove() method has been deleted

    I do't know why the demo is work fine.

    finally I modify the code to

            if (obj.checked === true) {
              obj.checked = false;
              // this.selectedDays.$remove(ctime);
              this.selectedDays.splice(this.selectedDays.indexOf(ctime), 1)
            }
    

    it work fine

    opened by bigzhu 2
  • Customize 'class' of input

    Customize 'class' of input

    Nice Component.

    While I being try to customize the style of the default <input/>, using 'inputStyle' seem a little bit complicated.

    A prop of setting 'class' of the <input/> will be very handy for customize .

    Will you accept a PR of it?

    opened by mqli 2
  • Option to set input field to read-only

    Option to set input field to read-only

    I want to prevent the user from freely typing whatever he wants, so that only viable value of this input is the date he selected.

    I don't see this option in the docs, and it would be very helpful.

    opened by kortemy 2
  • 引入该插件后项目体积剧增

    引入该插件后项目体积剧增

    我的项目本来js文件打包后只有2MB多,引入本插件后就变成4.5MB了,在node_module文件里查看,发现项目本身不大,但是引入的lodash库文件却大的吓人:2MB,我去lodash官方看了,其实下载lodash也就22kb,但不知为何到了npm中就变得如此巨大了,望优化一下,非常喜欢这个插件。

    opened by facesea 2
  • 1、增加“今天”按钮

    1、增加“今天”按钮

    2、设置限定起始日期后,不允许选择当前日后的其它日期,及限定起止日期范围外的其它日期 1, Increase the "today" button 2, Set limit after the start date, are not allowed to choose the other date in the future, and starting and ending date range limit of other dates

    opened by ekongyun 0
Owner
Awe
get on, it's no time to explain
Awe
A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/

中文 README v2-datepicker A simple datepicker component based Vue 2.x. Installation npm: npm i --save v2-datepicker or yarn yarn add v2-datepicker Ge

Pomy 90 Jul 21, 2022
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
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
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 86 Dec 1, 2022
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 56 Nov 16, 2022
A simple Vue.js date and time picker made with material design in mind

vue-material-date-time-picker A date and time picker Vue component. Compatible with Vue 2.x. Performed in material design. Demo Install Usage Props NB

Technorely Inc 8 Feb 2, 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

小小鲁班 68 Nov 12, 2022
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

小小鲁班 68 Nov 12, 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
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
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
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 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
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
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 111 Dec 17, 2022