Add codes

README.md

@@ -1,6 +1,7 @@
 # vue-ts-input-values-demo
+This repository demonstrates the differences of behaviors of date input tags with Vue.js for [my blog post]()
 
-## Project setup
+## Preparation
 ```
 npm install
 ```
@@ -10,15 +11,5 @@ npm install
 npm run serve
 ```
 
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Access the demo
+On your browser, please access `localhost:8080`.

src/App.vue

@@ -1,20 +1,45 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <div class="container">
+      <h3>Example1: A type of value is string</h3>
+      <input type="date" v-model="date1" />
+      <p>Time: {{ date1 }}</p>
+      <p>A type of the value is: {{ function () { return typeof date1; }() }}</p>
+    </div>
+    <div class="container">
+      <h3>Example2: Treat a value as a Date Object</h3>
+      <input type="date"
+        v-bind:value="date2"
+        v-on:input="date2 = strToDate($event.target.value)"
+      />
+      <p>{{ date2 }}</p>
+      <p>A type of the value is: {{ function () { return typeof date2;}() }}</p>
+    </div>
+    <div class="container">
+      <h3>MyDate: A component of treating a value as a Date Object.</h3>
+      <my-date v-bind:date="date3" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
+import MyDate from './components/MyDate.vue';
 
 @Component({
   components: {
-    HelloWorld,
+    MyDate,
   },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+  private date1: Date = new Date();
+  private date2: Date = new Date();
+  private date3: Date = new Date();
+
+  strToDate(date: string): Date {
+    return new Date(date);
+  }
+}
 </script>
 
 <style>
@@ -26,4 +51,13 @@ export default class App extends Vue {}
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.container {
+  min-width: 200px;
+  min-height: 300px;
+  border: solid;
+  border-color: black;
+  background-color: cadetblue;
+  margin-bottom: 10px;
+}
 </style>

src/components/MyDate.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <input type="date"
+      v-bind="date"
+      v-on:input="date = strToDate($event.target.value)"  
+    />
+    <p>{{ date }}</p>
+    <p>A type of the value is: {{ function () { return typeof date;}() }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+class MyDate extends Vue {
+  @Prop() private date!: Date;
+
+  private strToDate(str: string): Date {
+    return new Date(str);
+  }
+}
+
+export default MyDate;
+</script>