Add title property. Based on #118

README.md

@@ -113,6 +113,7 @@ max-datetime | ISO 8601 `String` | `null` | Maximum datetime.
 auto | `Boolean` | `false` | Auto continue/close on select.
 week-start | `Number` | auto from locale if _weekstart_ is available or `1` | First day of the week. 1 is Monday and 7 is Sunday.
 flow | `Array` | Depends of *type* | Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
+title | `String` | `''` | Popup title.
 
 Input inherits all props not defined above but `style` and `class` will be inherited by root element. [See inheritAttrs option](https://vuejs.org/v2/api/#inheritAttrs)
 

src/Datetime.vue

@@ -30,7 +30,8 @@
           @cancel="cancel"
           :auto="auto"
           :week-start="weekStart"
-          :flow="flow">
+          :flow="flow"
+          :title="title">
         <template slot="button-cancel__internal" slot-scope="scope">
           <slot name="button-cancel" v-bind:step="scope.step">{{ phrases.cancel }}</slot>
         </template>
@@ -130,6 +131,9 @@ export default {
     },
     flow: {
       type: Array
+    },
+    title: {
+      type: String
     }
   },
 

src/DatetimePopup.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="vdatetime-popup">
     <div class="vdatetime-popup__header">
+      <div class="vdatetime-popup__title" v-if="title">{{ title }}</div>
       <div class="vdatetime-popup__year" @click="showYear" v-if="type !== 'time'">{{ year }}</div>
       <div class="vdatetime-popup__date" @click="showMonth" v-if="type !== 'time'">{{ dateFormatted }}</div>
     </div>
@@ -118,6 +119,9 @@ export default {
     },
     flow: {
       type: Array
+    },
+    title: {
+      type: String
     }
   },
 
@@ -301,6 +305,12 @@ export default {
   font-size: 32px;
 }
 
+.vdatetime-popup__title {
+  margin-bottom: 8px;
+  font-size: 21px;
+  font-weight: 300;
+}
+
 .vdatetime-popup__year {
   font-weight: 300;
   font-size: 14px;

test/specs/Datetime.spec.js

@@ -316,6 +316,21 @@ describe('Datetime.vue', function () {
         done()
       })
     })
+
+    it('should pass title to popup', function (done) {
+      const vm = createVM(this,
+        `<Datetime type="datetime" title="Select your birthday"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$findChild('.vdatetime-popup').title).to.be.equal('Select your birthday')
+        done()
+      })
+    })
   })
 
   describe('types', function () {

test/specs/DatetimePopup.spec.js

@@ -246,6 +246,21 @@ describe('DatetimePopup.vue', function () {
         })
       })
     })
+
+    it('should render the title', function () {
+      const vm = createVM(this,
+        `<DatetimePopup :datetime="datetime" title="Select your birthday"></DatetimePopup>`,
+        {
+          components: { DatetimePopup },
+          data () {
+            return {
+              datetime: LuxonDatetime.local()
+            }
+          }
+        })
+
+      expect(vm.$('.vdatetime-popup__title')).to.have.text('Select your birthday')
+    })
   })
 
   describe('pass props', function () {