<template>
  <div>
		<h2>Disable Date</h2>
		<p>Only the Monday and Tuesday can be selected.</p>
		<Calendar :selection="value" :validator="validator" @selectionChange="value=$event" style="width:250px;height:250px"></Calendar>
		<p v-if="value">{{value | formatDate}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      validator: date => {
        if (date.getDay() == 1 || date.getDay() == 2) {
          return true;
        }
        return false;
      }
    };
  },
  filters: {
    formatDate(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return [m, d, y].join("/");
    }
  }
};
</script>