Update README

Author: spacepatate

README.md

@@ -13,13 +13,14 @@ yarn add @spacepatate/vue-space-datetime-picker
 ## Register
 
 ```
-import VueSpaceDatetimePicker from '@spacepatate/vue-space-datetime-picker';
+import { SpaceDatetimePicker, SpaceDaterangePicker }  from '@spacepatate/vue-space-datetime-picker';
 import '@spacepatate/vue-space-datetime-picker/dist/vue-space-datetime-picker.css';
 
 export default {
   name: 'App',
   components: {
-    VueSpaceDatetimePicker,
+    SpaceDatetimePicker,
+    SpaceDaterangePicker,
   },
 
 ```

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@spacepatate/vue-space-datetime-picker",
-  "version": "0.2.1",
+  "version": "0.2.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "build-bundle": "vue-cli-service build --target lib --name vue-space-datetime-picker ./src/components/SpaceDatetimePicker.vue"
+    "build-bundle": "vue-cli-service build --target lib --name vue-space-datetime-picker ./src/components/index.js"
   },
   "files": [
     "dist/*",

src/App.vue

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

src/components/HelloWorld.vue

@@ -422,6 +422,7 @@ export default {
         position: 'absolute',
         left: `${popoverPositionLeft}px`,
         top: `${popoverPositionTop}px`,
+        'z-index': 100,
       };
       e.stopPropagation();
       e.preventDefault();

src/components/SpaceDaterangePicker.vue

@@ -295,6 +295,7 @@ export default {
         position: 'absolute',
         left: `${popoverPositionLeft}px`,
         top: `${popoverPositionTop}px`,
+        'z-index': 100,
       };
       e.stopPropagation();
       e.preventDefault();

src/components/SpaceDatetimePicker.vue

@@ -0,0 +1,7 @@
+import SpaceDatetimePicker from './SpaceDatetimePicker.vue';
+import SpaceDaterangePicker from './SpaceDaterangePicker.vue';
+
+export {
+  SpaceDatetimePicker,
+  SpaceDaterangePicker,
+};