tmorehouse/vue-datepicker-aria

Datepicker component with ARIA support for Vue.js 2.x

vue-datepicker-aria

ARIA compliant Datepicker component for Vue.js 2.2.x

Note: This repo is currently in development and is not complete!

Based on https://github.com/hilongjw/vue-datepicker

Demo

The demo page is HERE.

Requirements

• Vue.js ^2.2.0
• moment ^2.11.1

Installation

npm

$ npm install vue-datepicker-aria

Usage

<script>
// for Vue 2.0
import myDatepicker from 'vue-datepicker-aria'

export default {
  data () {
    return {
      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',
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      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 2.0 -->
    <div class="row">
      <span>Departure Date：</span>
      <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
    </div>

  </div>
</template>

API

• Option

• format

format: 'YYYY-MM-DD HH:mm'

Note HH:mm will lways be zero

• week

 week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 weekLong: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

• month

  month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']

• wrapperClass

wrapperClass: ''

• 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:'2017-01-30'
}

• weekdays

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

prop

• Vue 2.0

date: {
  time: '' // string
}

<date-picker :date="date" :limit="limit"></date-picker>

License

The MIT License