refactor(MdDatepicker): Better flow (#1698)

VdustR · Samuell1 · commit 8a438aee8eaf · 2018-06-19T10:40:22.000+02:00
* refactor(MdDatepicker): computed locale options * style(MdDatepicker): fix style * refactor(MdDatepicker): Better flow for datepicker BREAKING CHANGE: upgrade date-fns to 2.0.0-alpha.7 fix #1689 * feat(MdDatepicker): new props md-model-type * fix(MdDatepicker): fix warn message template literals * docs(Datepicker): fix props md-model-type * style(MdDatepicker): lint * fix(MdDatepicker): mdModelType validator name * feat(MdDatepicker): dynamic date format supported * docs(Datepicker): date format example * docs(Configuration): * docs(Configuration): better description
diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
@@ -27,6 +27,12 @@ export default {
     installation: 'Installation',
     npmOrYarn: 'NPM or Yarn'
   },
+  configuration: {
+    title: 'Configuration',
+    viaVueGlobalObject: 'Via Vue global object',
+    inVueComponents: 'In Vue components',
+    options: 'Options',
+  },
   themes: {
     title: 'Themes'
   },
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -1,5 +1,6 @@
 <example src="./examples/BasicDatepicker.vue" />
 <example src="./examples/LabeledDatepicker.vue" />
+<example src="./examples/MultiTypesDatepicker.vue" />
 <example src="./examples/CancelOpenDatepicker.vue" />
 <example src="./examples/CloseOnSelectDatepicker.vue" />
 <example src="./examples/DisabledDatesDatepicker.vue" />
@@ -18,6 +19,12 @@
       <code-example title="Labeled Example" :component="examples['labeled-datepicker']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Model Types</h2>
+      <p>Vue Material datepicker supports multiple types of <code>v-model</code>, whiches default is <code>Date</code>. If you want to communicate with other services without timezone problems, you could use <code>String</code> to avoid them:</p>
+      <code-example title="With different type binding" :component="examples['multi-types-datepicker']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Cancel open on focus</h2>
       <p>By default Datepicker component open on focus to it's input. This will make the input useless and the user will not be able to type the date manually. You can disable this behavior:</p>
@@ -57,10 +64,16 @@
         props: [
           {
             name: 'v-model',
-            type: 'Date',
+            type: 'Date|Number|String',
             description: 'The model variable to bind the selected date',
             defaults: 'null'
           },
+          {
+            name: 'md-model-type',
+            type: 'Constructor',
+            description: 'Model type. This props will be overwritten by <code>typeof v-model</code>. It could be <code>Date</code>, <code>Number</code> or <code>String</code>.',
+            defaults: 'Date'
+          },
           {
             name: 'md-disabled-dates',
             type: 'Array|Function',
diff --git a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
@@ -9,6 +9,16 @@
       </md-select>
       <span class="md-helper-text">This config is global.</span>
     </md-field>
+    <md-field>
+      <label for="movie">Date format</label>
+      <md-select v-model="dateFormat">
+        <md-option value="YYYY-MM-DD">default</md-option>
+        <md-option value="YYYY/MM/DD">YYYY/MM/DD</md-option>
+        <md-option value="DD/MM/YYYY">DD/MM/YYYY</md-option>
+        <md-option value="MM/DD/YYYY">MM/DD/YYYY</md-option>
+      </md-select>
+      <span class="md-helper-text">This config is global.</span>
+    </md-field>
   </div>
 </template>
 
@@ -26,6 +36,14 @@
         set (val) {
           this.$material.locale.firstDayOfAWeek = val
         }
+      },
+      dateFormat: {
+        get () {
+          return this.$material.locale.dateFormat
+        },
+        set (val) {
+          this.$material.locale.dateFormat = val
+        }
       }
     }
   }
diff --git a/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <div class="block">
+      <h3>Date</h3>
+      <md-datepicker v-model="date" />
+      <div class="value">value: {{date}}</div>
+    </div>
+    <md-divider />
+    <div class="block">
+      <h3>String</h3>
+      <md-datepicker v-model="string" />
+      <div class="value">value: {{string}}</div>
+    </div>
+    <md-divider />
+    <div class="block">
+      <h3>Number</h3>
+      <md-datepicker v-model="number" />
+      <div class="value">value: {{number}}</div>
+    </div>
+    <md-divider />
+    <div class="block">
+      <h3>Dynamic By Model</h3>
+      <md-radio :model="type" value="date" @change="toDate">Date</md-radio>
+      <md-radio :model="type" value="string" @change="toString">String</md-radio>
+      <md-radio :model="type" value="number" @change="toNumber">Number</md-radio>
+      <md-datepicker v-model="dynamicByModel" />
+      <div class="value">value: {{dynamicByModel}}</div>
+    </div>
+    <md-divider />
+    <div class="block">
+      <h3>Dynamic By <code>:md-model-type</code></h3>
+      <md-radio v-model="mdTypeValue" value="date">Date</md-radio>
+      <md-radio v-model="mdTypeValue" value="string">String</md-radio>
+      <md-radio v-model="mdTypeValue" value="number">Number</md-radio>
+      <md-datepicker v-model="dynamicByMdType" :md-model-type="mdType" />
+      <div class="value">value: {{dynamicByMdType}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import parse from 'date-fns/parse'
+  import format from 'date-fns/format'
+  import isValid from 'date-fns/isValid'
+
+  export default {
+    name: 'MultiTypesDatepicker',
+    data () {
+      let dateFormat = this.$material.locale.dateFormat || 'YYYY-MM-DD'
+      let now = new Date()
+
+      return {
+        date: now,
+        string: format(now, dateFormat),
+        number: Number(now),
+        dynamicByModel: now,
+        mdTypeValue: 'date',
+        dynamicByMdType: now
+      }
+    },
+    computed: {
+      firstDayOfAWeek: {
+        get () {
+          return this.$material.locale.firstDayOfAWeek
+        },
+        set (val) {
+          this.$material.locale.firstDayOfAWeek = val
+        }
+      },
+      // eslint-disable-next-line
+      type () {
+        if (typeof this.dynamicByModel === 'object' && this.dynamicByModel instanceof Date && isValid(this.dynamicByModel)) {
+          return 'date'
+        } else if (typeof this.dynamicByModel === 'string') {
+          return 'string'
+        } else if (Number.isInteger(this.dynamicByModel) && this.dynamicByModel >= 0) {
+          return 'number'
+        } else if (this.model === null || this.model === undefined) {
+          return 'null'
+        } else {
+          throw new Error('Type error')
+        }
+      },
+      dateFormat () {
+        return this.$material.locale.dateFormat || 'YYYY-MM-DD'
+      },
+      mdType () {
+        switch (this.mdTypeValue) {
+        case 'date':
+          return Date
+        case 'string':
+          return String
+        case 'number':
+          return Number
+        }
+      }
+    },
+    methods: {
+      toDate () {
+        switch (this.type) {
+        case 'null':
+          this.dynamicByModel = null
+          break
+
+        case 'string':
+          this.dynamicByModel = parse(this.dynamicByModel, this.dateFormat, new Date())
+          break
+
+        case 'number':
+          this.dynamicByModel = new Date(this.dynamicByModel)
+          break
+        }
+      },
+      toString () {
+        this.toDate()
+        this.dynamicByModel = this.dynamicByModel && format(this.dynamicByModel, this.dateFormat)
+      },
+      toNumber () {
+        this.toDate()
+        this.dynamicByModel = this.dynamicByModel && Number(this.dynamicByModel)
+      }
+    }
+  }
+</script>
diff --git a/docs/app/pages/Configuration.vue b/docs/app/pages/Configuration.vue
@@ -0,0 +1,78 @@
+<template>
+  <page-container centered :title="$t('pages.configuration.title')">
+    <div class="page-container-section">
+      <h2 class="md-headline">Global configuration</h2>
+
+      <p>Vue Material is providing some global options for customization. These options are reactive, you can change it anytime, anywhere:</p>
+      <code-example :title="$t('pages.configuration.viaVueGlobalObject')">
+        import Vue from 'vue'
+
+        // change single option
+        Vue.material.locale.dateFormat = 'DD/MM/YYYY'
+
+        // change multiple options
+        Vue.material = {
+          ...Vue.material,
+          locale: {
+            ...Vue.material.locale,
+            dateFormat: 'DD/MM/YYYY',
+            firstDayOfAWeek: 1
+          }
+        }
+      </code-example>
+      <p>or you can change it via <code>this.$material</code> in a vue component:</p>
+      <code-example :title="$t('pages.configuration.inVueComponents')">
+        export default {
+          name: 'ChangeDateFormat',
+          computed: {
+            dateFormat: {
+              get () {
+                return this.$material.locale.dateFormat
+              },
+              set (val) {
+                this.$material.locale.dateFormat = val
+              }
+            }
+          }
+        }
+      </code-example>
+
+      <p>Here are options Vue Material provide for customization:</p>
+
+      <code-example :title="$t('pages.configuration.options')">
+        {
+          // activeness of ripple effect
+          ripple: true,
+
+          theming: {},
+          locale: {
+            // range for datepicker
+            startYear: 1900,
+            endYear: 2099,
+
+            // date format for date picker
+            dateFormat: 'YYYY-MM-DD',
+
+            // i18n strings
+            days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+            shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+            shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+            shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
+
+            // `0` stand for Sunday, `1` stand for Monday
+            firstDayOfAWeek: 0
+          }
+        }
+      </code-example>
+    </div>
+
+  </page-container>
+</template>
+
+<script>
+  export default {
+    name: 'Configuration'
+  }
+</script>
diff --git a/docs/app/routes.js b/docs/app/routes.js
@@ -114,6 +114,11 @@ export const routes = [
     name: 'getting-started',
     page: 'GettingStarted.vue'
   },
+  {
+    path: '/configuration',
+    name: 'configuration',
+    page: 'Configuration.vue'
+  },
   {
     path: '/themes',
     name: 'themes',
diff --git a/docs/app/template/MainNavContent.vue b/docs/app/template/MainNavContent.vue
@@ -2,6 +2,9 @@
   <div class="main-nav-content">
     <router-link to="/" exact>{{ $t('pages.home.title') }}</router-link>
     <router-link to="/getting-started">{{ $t('pages.gettingStarted.title') }}</router-link>
+    <div class="main-nav-level">
+      <router-link to="/configuration">{{ $t('pages.configuration.title') }}</router-link>
+    </div>
 
     <router-link to="/themes">{{ $t('pages.themes.title') }}</router-link>
     <div class="main-nav-level">
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "css-loader": "^0.28.9",
     "css-mqpacker": "^6.0.2",
     "cz-conventional-changelog": "^2.1.0",
-    "date-fns": "^1.29.0",
+    "date-fns": "^2.0.0-alpha.7",
     "deepmerge": "^2.0.1",
     "eslint": "^4.16.0",
     "eslint-config-standard": "^11.0.0-beta.0",
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
diff --git a/yarn.lock b/yarn.lock
