Merge pull request #31 from mazipan/master

Add demo for custom format

Author: mazipan

README.md

@@ -164,11 +164,43 @@ You can pass these below props to `<rangedate-picker :props="props"></rangedate-
 
 + **presetRanges**
 
-  *Description* : -
+  *Description* : Set of objects that will shown as quick selection of daterange
 
   *Type* : Object
 
-  *Default Value* : `{}`
+  Example Object : 
+  ```javascript
+  {
+    today: function () {
+      const n = new Date()
+      const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
+      const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)
+      return {
+        label: presetRangeLabel[i18n].today,
+        active: false,
+        dateRange: {
+          start: startToday,
+          end: endToday
+        }
+      }
+    }
+  }
+  ```
+
+  *Default Value* : 
+  ```javascript
+  {
+    today: function () {
+      return {
+        // label: 'string', active: 'boolean', dateRange: {start: date, end: end}
+      }
+    },
+    thisMonth: function () {},
+    lastMonth: function () {},
+    last7days: function () {},
+    last30days: function () {}
+  }
+  ```
 
 + **compact**
 

demo/index.html

@@ -57,14 +57,14 @@ <h2 class="subtitle">
 
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Compact Mode</p>
+            <p class="title is-4">Range Date Normal Mode</p>
             <br>
-            <p class="subtitle is-6">Start Date : {{ date1.start }}</p>
-            <p class="subtitle is-6">End Date : {{ date1.end }}</p>
+            <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
+            <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
-              <div class="compact-wrapper">
-                <rangedate-picker @selected="date1Selected" compact="true" i18n="EN">
+              <div class="daterange-wrapper">
+                <rangedate-picker @selected="onDateSelected" i18n="EN">
                 </rangedate-picker>
               </div>
             </div>
@@ -74,14 +74,14 @@ <h2 class="subtitle">
 
         <div class="column">
           <div class="card">
-            <p class="title is-4">Range Date Normal Mode</p>
+            <p class="title is-4">Range Date Custom Format</p>
             <br>
-            <p class="subtitle is-6">Start Date : {{ date2.start }}</p>
-            <p class="subtitle is-6">End Date : {{ date2.end }}</p>
+            <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
+            <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="date2Selected" i18n="EN">
+                <rangedate-picker @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
                 </rangedate-picker>
               </div>
             </div>
@@ -93,12 +93,32 @@ <h2 class="subtitle">
           <div class="card">
             <p class="title is-4">Range Date Right To Left</p>
             <br>
-            <p class="subtitle is-6">Start Date : {{ date3.start }}</p>
-            <p class="subtitle is-6">End Date : {{ date3.end }}</p>
+            <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
+            <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="date3Selected" i18n="EN" righttoleft="true">
+                <rangedate-picker @selected="onDateSelected" i18n="EN" righttoleft="true">
+                </rangedate-picker>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+      <div class="columns is-centered">
+
+        <div class="column">
+          <div class="card">
+            <p class="title is-4">Range Date Compact Mode</p>
+            <br>
+            <p class="subtitle is-6">Start Date : {{ selectedDate.start }}</p>
+            <p class="subtitle is-6">End Date : {{ selectedDate.end }}</p>
+
+            <div class="card-content">
+              <div class="compact-wrapper">
+                <rangedate-picker @selected="onDateSelected" compact="true" i18n="EN">
                 </rangedate-picker>
               </div>
             </div>

demo/src/main.js

@@ -2,29 +2,15 @@ var app = new Vue({
   el: '#app',
   data () {
     return {
-      date1: {
-        start: '',
-        end: ''
-      },
-      date2: {
-        start: '',
-        end: ''
-      },
-      date3: {
+      selectedDate: {
         start: '',
         end: ''
       }
     }
   },
   methods: {
-    date1Selected: function (daterange) {
-      this.date1 = daterange
-    },
-    date2Selected: function (daterange) {
-      this.date2 = daterange
-    },
-    date3Selected: function (daterange) {
-      this.date3 = daterange
+    onDateSelected: function (daterange) {
+      this.selectedDate = daterange
     }
   },
   components: {