Merge branch 'dev'

Author: spacepatate

README.md

@@ -25,25 +25,37 @@ export default {
 ```
 ## Usage
 
-### Minimal
+### Date picker
 
 ```
 <space-datetime-picker v-model="date"></space-datetime-picker>
 ```
 
-![minimal](./cap1.png)
+![minimal](cap1.png)
 
 #### With time
-![time select](./cap3.png)
+
+```
+<SpaceDatetimePicker v-model="datetime" format="DD/MM/YYYY HH:mm:ss" :showTime="true"></SpaceDateTimePicker>
+```
+
+![time select](cap3.png)
+
 
 #### Select months
-![month select](./cap2.png)
+![month select](cap2.png)
 
 #### Select year
-![year select](./cap4.png)
+![year select](cap4.png)
 
+### Date range picker
 
-### Parameters
+```
+<SpaceDaterangePicker v-model="rangeDatetimes"></SpaceDaterangePicker>
+```
+![range dates select](cap5.png)
+
+### SpaceDatetimePicker Parameters
 
 Parameter | Type | Default | Description
 --------- | ---- | ------- | -----------
@@ -58,6 +70,18 @@ showHome | `Boolean` | `false` | home icon button allow to return back to curren
 disabled | `Boolean` | `false` | disabled all inputs
 stardingDay | `Number` | `1` | define the first day of week, 0 is sunday, 1 for monday...
 
+### SpaceDaterangePicker parameters
+
+Parameter | Type | Default | Description
+--------- | ---- | ------- | -----------
+v-model (*required*) | `Date` Array | - | Array of Date object
+placeholder | `String` Array | - | Array of strings, ex: ['start date', 'end date']
+format | `String` | `''` | format to display in default input field, the default display format is YYYY-MM-DD
+locale | `String` | `undefined` | BCP47 locales, ex: fr-FR, en-BR, en-US...
+weekday | `String` | `narrow` | display week day in long | short | narrow
+disabled | `Boolean` | `false` | disabled all inputs
+stardingDay | `Number` | `1` | define the first day of week, 0 is sunday, 1 for monday...
+
 ### Display format
 
 A valid datetime format is combinated of 'YYYY', 'MM', 'DD' for date and 'HH', 'mm', 'ss' for a valid time

cap5.png

@@ -1,6 +1,6 @@
 {
   "name": "@spacepatate/vue-space-datetime-picker",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,18 +10,28 @@
     "lint": "vue-cli-service lint",
     "build-bundle": "vue-cli-service build --target lib --name vue-space-datetime-picker ./src/components/SpaceDatetimePicker.vue"
   },
-  "dependencies": {
-    "core-js": "^3.6.4",
-    "vue": "^2.6.11"
-  },
   "files": [
     "dist/*",
     "src/*",
     "public/*",
     "*.json",
     "*.js"
   ],
+  "keywords": [
+    "vuejs",
+    "vue",
+    "datetime",
+    "date",
+    "time",
+    "datetime-picker",
+    "timepicker",
+    "time-picker"
+  ],
   "main": "./dist/vue-space-datetime-picker.common.js",
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11"
+  },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",
     "@vue/cli-plugin-e2e-nightwatch": "^4.2.0",

package.json

@@ -1,16 +1,30 @@
 <template>
   <div id="app">
-    <SpaceDatetimePicker></SpaceDateTimePicker>
+    <SpaceDatetimePicker
+      v-model="datetime" :disabled="true"></SpaceDateTimePicker>
+    <!-- <SpaceDaterangePicker :placeholder="['start date', 'end date']"
+      v-model="rangeDatetimes" :disabled="false"></SpaceDaterangePicker> -->
+    <!-- <SpaceMonthPicker></SpaceMonthPicker> -->
   </div>
 </template>
 
 <script>
 import SpaceDatetimePicker from '@/components/SpaceDatetimePicker.vue';
+// import SpaceDaterangePicker from '@/components/SpaceDaterangePicker.vue';
+// import SpaceMonthPicker from '@/components/SpaceMonthPicker.vue';
 
 export default {
   name: 'App',
   components: {
     SpaceDatetimePicker,
+    // SpaceDaterangePicker,
+    // SpaceMonthPicker,
+  },
+  data() {
+    return {
+      datetime: null,
+      rangeDatetimes: null,
+    };
   },
 };
 </script>