[a11y] Accessible Calendar and Datepicker Component for Vue

a11y-calendar is a Vue.js datepicker calendar component to deliver a responsive, dynamic, multilingual, month-based calendar on the app. It also comes with a Datepicker component to create an easy-to-use date picker on the app.

vue datepicker, vue2 datepicker disable past dates, vue datepicker next, vue2 datepicker set date, vue3 datepicker example, livelybonevue datepicker, how to use datepicker in vuejs

How to make use of it:

Install and download:

# NPM
$ npm install vue-a11y-calendar --save

1. In addition to the required configuration for Sass Loader, it is recommended to include the following configuration:

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir) // Change this to resolve to the root of your project
}
const config = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    mainFiles: ['index', 'index.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), // Replace `src` with the path to your source files from the root of your project
      '~': resolve('node_modules'),
    },
  },
};

Datepicker

The Datepicker component provides a dynamic, accessible, localized (using Date.prototype.toLocaleString()) month-based date picker.

Props

• {string} locale - Any valid single locale for Date.prototype.toLocaleString()
• {string} label - A string for the label of the input field. Defaults to Choose a date.
• {object} microcopy - Translatable strings for the microcopy for the calendar. All properties must be present to be valid.
  • {string} microcopy.today - String representation of Today: {date}. Must include, which will be replaced with the localized date.
  • {string} microcopy.next - String representation of Next Month.
  • {string} microcopy.previous - String representation of Previous Month.
  • {string} microcopy.open - String representation of Open Calendar.
  • {string} microcopy.cancel - String representation of Cancel.
• {object} inputs - Input names (so multiple datepickers can be used in the same form).
  • {string} inputs.local - Input name and ID for the visible, read-only input field. Defaults to date-local.
  • {string} inputs.month - Input name for the hidden numeric day input. Defaults to date-day.
  • {string} inputs.month - Input name for the hidden numeric month input. Defaults to date-month.
  • {string} inputs.year - Input name for the hidden numeric year input. Defaults to date-year.

accessible & multilingual calendar component, Vue A11Y Calendar Plugin/Github, vuejs datepicker highlight today

See Demo And Download

Official Website(IBM): Click Here

This superior jQuery/javascript plugin is developed by IBM. For extra advanced usage, please go to the official website.