From 5c172602f5463cbdde2cdf8e3104448483db1b79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rok=20Vetrs=CC=8Cek?= <rok.vetrsek@gmail.com>
Date: Tue, 24 Apr 2018 19:25:40 +0200
Subject: [PATCH] Make setting the width more dynamic by allowing the use of
 CSS units (Issue #71)

---
 datepicker/index.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/datepicker/index.vue b/datepicker/index.vue
index 697a64d..425828a 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mx-datepicker"
   :class="{'disabled': disabled}"
-  :style="{'width': width + 'px','min-width':range ? (type === 'datetime' ? '320px' : '210px') : '140px'}"
+  :style="{'width': computedWidth,'min-width':range ? (type === 'datetime' ? '320px' : '210px') : '140px'}"
   v-clickoutside="closePopup">
   <input name="date"
     :disabled="disabled"
@@ -209,6 +209,16 @@ export default {
         )
       }
       return ''
+    },
+    computedWidth () {
+      if (typeof this.width === 'string' && this.width.match(/(px|%|rem|em|ex)$/)) {
+        return this.width
+      }
+      if (typeof this.width === 'string') {
+        return this.width.replace(/\D/g,'') + 'px'
+      }
+      
+      return this.width + 'px'
     }
   },
   methods: {