feat: added moment and date-fns examples (#650)

* feat: added moment and date-fns examples

fixes #218

* yarn.lock, lint

* clearable, current date by default

package.json

@@ -26,11 +26,13 @@
     "compression": "^1.7.2",
     "cookie-parser": "^1.4.3",
     "cross-env": "^5.2.0",
+    "date-fns": "^1.29.0",
     "dotenv": "^5.0.1",
     "es6-promise": "^4.2.4",
     "express": "^4.16.3",
     "lru-cache": "^4.1.3",
     "memory-fs": "^0.4.1",
+    "moment": "^2.22.2",
     "node-fetch": "^2.1.2",
     "route-cache": "^0.4.4",
     "serialize-javascript": "^1.5.0",

src/data/components.json

@@ -200,6 +200,7 @@
       "dateColorable",
       "dateDialogAndMenu",
       "dateFormatting",
+      "dateFormattingMomentDatefns",
       "dateAllowedDates",
       { "file": "dateMultiple", "newIn": "1.2" },
       "dateWidth",

src/examples/date-pickers/dateFormattingMomentDatefns.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-container grid-list-md>
+    <v-layout row wrap>
+      <v-flex xs12 lg6>
+        <v-menu
+          v-model="menu1"
+          :close-on-content-click="false"
+          full-width
+          max-width="290"
+        >
+          <v-text-field
+            slot="activator"
+            :value="computedDateFormattedMomentjs"
+            clearable
+            label="Formatted with Moment.js"
+            readonly
+          ></v-text-field>
+          <v-date-picker
+            v-model="date"
+            @change="menu1 = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-flex>
+
+      <v-flex xs12 lg6>
+        <v-menu
+          v-model="menu2"
+          :close-on-content-click="false"
+          full-width
+          max-width="290"
+        >
+          <v-text-field
+            slot="activator"
+            :value="computedDateFormattedDatefns"
+            clearable
+            label="Formatted with datefns"
+            readonly
+          ></v-text-field>
+          <v-date-picker
+            v-model="date"
+            @change="menu2 = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+  import moment from 'moment'
+  import format from 'date-fns/format'
+
+  export default {
+    data: () => ({
+      date: new Date().toISOString().substr(0, 10),
+      menu1: false,
+      menu2: false
+    }),
+
+    computed: {
+      computedDateFormattedMomentjs () {
+        return this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : ''
+      },
+      computedDateFormattedDatefns () {
+        return this.date ? format(this.date, 'dddd, MMMM Do YYYY') : ''
+      }
+    }
+  }
+</script>
+
+<codepen-resources lang="json">
+  {
+    "js": [
+      "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js",
+      "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.29.0/date_fns.min.js"
+    ]
+  }
+</codepen-resources>

src/lang/en/components/DatePickers.json

@@ -18,6 +18,10 @@
       "header": "Date pickers - formatting date",
       "desc": "If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function."
     },
+    "dateFormattingMomentDatefns": {
+      "header": "Date pickers - formatting date using external libs",
+      "desc": "Formatting dates is possible also with external libs such as Moment.js or date-fns"
+    },
     "dateAllowedDates": {
       "header": "Date pickers - Allowed dates",
       "desc": "You can specify allowed dates using arrays, objects, and functions."

yarn.lock

@@ -2475,7 +2475,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-date-fns@^1.23.0, date-fns@^1.27.2:
+date-fns@^1.23.0, date-fns@^1.27.2, date-fns@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
   integrity sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==
@@ -5651,6 +5651,11 @@ [email protected], [email protected], mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+  integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"