Added support for named slots

This allow the user to customize the component output adding for example a label or some description or validation messages

README.md

@@ -10,7 +10,7 @@
 > Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.
 
 **NOTICE:** This README is related to next version (1.x) of vue-datetime. For the old release 0.x, [see here](https://github.com/mariomka/vue-datetime/tree/v0.x).
- 
+
 ## Demo
 
 **[Go to demo](http://mariomka.github.io/vue-datetime)**.
@@ -98,6 +98,17 @@ Download vue, luxon, weekstart and vue-datetime or use a CDN like unpkg.
 <datetime v-model="date"></datetime>
 ```
 
+### Custom
+
+You can customize the component output using named slots and component props.
+
+```html
+<datetime v-model="date" input-id="startDate">
+  <label for="startDate" slot="before">Field Label</label>
+  <span class="description" slot="after">The field description</span>
+</datetime>
+```
+
 ## Setup
 
 ### Parameters
@@ -123,7 +134,7 @@ week-start | `Number` | auto from locale if _weekstart_ is available or `1` | Fi
 
 Input inherits all props not defined above but `style` and `class` will be inherited by root element.
 
-The component is based on [Luxon](https://github.com/moment/luxon), check out [documentation](https://moment.github.io/luxon/docs/index.html) to set [time zones](https://moment.github.io/luxon/docs/manual/zones.html) and [format](https://moment.github.io/luxon/docs/manual/formatting.html). 
+The component is based on [Luxon](https://github.com/moment/luxon), check out [documentation](https://moment.github.io/luxon/docs/index.html) to set [time zones](https://moment.github.io/luxon/docs/manual/zones.html) and [format](https://moment.github.io/luxon/docs/manual/formatting.html).
 
 ### Internationalization
 

src/Datetime.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="vdatetime">
+    <slot name="before"></slot>
     <input class="vdatetime-input"
            :class="inputClass"
            :id="inputId"
@@ -10,6 +11,7 @@
            @click="open"
            @focus="open">
     <input v-if="hiddenName" type="hidden" :name="hiddenName" :value="value">
+    <slot name="after"></slot>
     <transition-group name="vdatetime-fade" tag="div">
       <div key="overlay" v-if="isOpen" class="vdatetime-overlay" @click.self="cancel"></div>
       <datetime-popup

test/specs/Datetime.spec.js

@@ -90,6 +90,22 @@ describe('Datetime.vue', function () {
 
       expect(vm.$('.vdatetime input[type=hidden]')).to.have.attr('name', 'dt')
     })
+
+    it('should support named slots', function () {
+      const vm = createVM(this,
+        `<Datetime>
+          <label slot="before">Start Date</label>
+          <span slot="after" class="error">Invalid date</span>
+        </Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      const children = vm.$('.vdatetime').children
+      expect(children[0].nodeName).to.equal('LABEL')
+      expect(children[1].nodeName).to.equal('INPUT')
+      expect(children[2].nodeName).to.equal('SPAN')
+    })
   })
 
   describe('pass props', function () {