<template>
  <div>
		<h2>Date Format</h2>
		<div style="margin-bottom:20px">
			<Label for="d1" align="top">Default Format</Label>
			<DateBox inputId="d1" v-model="value"></DateBox>
		</div>
		<div style="margin-bottom:20px">
			<Label for="d2" align="top">yyyy-MM-dd</Label>
			<DateBox inputId="d2" v-model="value" format="yyyy-MM-dd"></DateBox>
		</div>
		<p v-if="value">{{value | formatDate}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date()
    };
  },
  filters: {
    formatDate(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return [m, d, y].join("/");
    }
  }
};
</script>