Adding ability to define classes for both input and its wrapper

hilongjw · Dec 31, 2016 · a234e97 · a234e97
1 parent 003cd58
commit a234e97
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,17 @@ placeholder: 'when?'
   month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
 ```
 
+* wrapperClass
+
+```
+wrapperClass: ''
+```
+
+* inputClass
+
+```
+inputClass: ''
+```
 * inputStyle
 
 ```

diff --git a/vue-datepicker-1.vue b/vue-datepicker-1.vue
@@ -366,13 +366,13 @@ table {
 }
 </style>
 <template>
-  <div class="cov-vue-date">
+  <div :class="option.wrapperClass">
     <div class="datepickbox">
-      <input 
-        type="text" 
-        title="input date" 
-        :class="option.inputClass" 
-        readonly="readonly" 
+      <input
+        type="text"
+        title="input date"
+        :class="option.inputClass"
+        readonly="readonly"
         :placeholder="option.placeholder" v-model="time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle" />
     </div>
     <div class="datepicker-overlay" v-if="showInfo.check" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
@@ -474,6 +474,7 @@ exports.default = {
             'border-radius': '2px',
             'color': '#5F5F5F'
           },
+          wrapperClass: 'cov-vue-date',
           inputClass: 'cov-datepicker',
           placeholder: 'when?',
           buttons: {

diff --git a/vue-datepicker-es6.vue b/vue-datepicker-es6.vue
@@ -314,9 +314,9 @@ table {
 }
 </style>
 <template>
-  <div class="cov-vue-date">
+  <div class="cov-vue-date" :class="option.wrapperClass ? option.wrapperClass : {}">
     <div class="datepickbox">
-      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" />
+      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" :class="option.inputClass ? option.inputClass : {}" />
     </div>
     <div class="datepicker-overlay" v-if="showInfo.check" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
       <div class="cov-date-body" :style="{'background-color': option.color ? option.color.header : '#3f51b5'}">
@@ -396,6 +396,8 @@ export default {
             header: '#3f51b5',
             headerText: '#fff'
           },
+          wrapperClass: '',
+          inputClass: '',
           inputStyle: {
             'display': 'inline-block',
             'padding': '6px',

diff --git a/vue-datepicker.es6-1.vue b/vue-datepicker.es6-1.vue
@@ -366,9 +366,9 @@ table {
 }
 </style>
 <template>
-  <div class="cov-vue-date">
+  <div class="cov-vue-date" :class="option.wrapperClass ? option.wrapperClass : {}">
     <div class="datepickbox">
-      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle" />
+      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle" :class="option.inputClass ? option.inputClass : {}" />
     </div>
     <div class="datepicker-overlay" v-if="showInfo.check" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
       <div class="cov-date-body" :style="{'background-color': option.color ? option.color.header : '#3f51b5'}">
@@ -448,6 +448,8 @@ export default {
             header: '#3f51b5',
             headerText: '#fff'
           },
+          wrapperClass: '',
+          inputClass: '',
           inputStyle: {
             'display': 'inline-block',
             'padding': '6px',

diff --git a/vue-datepicker.vue b/vue-datepicker.vue
@@ -314,9 +314,9 @@ table {
 }
 </style>
 <template>
-  <div class="cov-vue-date">
+  <div class="cov-vue-date" :class="option.wrapperClass ? option.wrapperClass : {}">
     <div class="datepickbox">
-      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" />
+      <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :placeholder="option.placeholder" v-model="date.time" :required="required" @click="showCheck" @foucus="showCheck" :style="option.inputStyle ? option.inputStyle : {}" :class="option.inputClass ? option.inputClass : {}"/>
     </div>
     <div class="datepicker-overlay" v-if="showInfo.check" @click="dismiss($event)" v-bind:style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
       <div class="cov-date-body" :style="{'background-color': option.color ? option.color.header : '#3f51b5'}">
@@ -407,6 +407,8 @@ exports.default = {
             header: '#3f51b5',
             headerText: '#fff'
           },
+          wrapperClass: '',
+          inputClass: '',
           inputStyle: {
             'display': 'inline-block',
             'padding': '6px',