diff --git a/README.md b/README.md
index e0d6535..e0345bd 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,7 @@ export default {
 | first-day-of-week   | Number        | 7           | set the first day of week (1-7)                     |
 | input-class         | String        | 'mx-input'  | the input class name                                |
 | input-name          | String        | 'date'      | the input name attr                                 |
+| input-attr          | Object        |             | the input attr(eg: { required: true, id: 'input'})  |
 | confirm-text        | String        | 'OK'        | the default text to display on confirm button       |
 | range-separator     | String        | '~'         | the range separator text                            |
 | date-format         | String        | ''          | format the time header and tooltip                  |
diff --git a/src/index.vue b/src/index.vue
index a035c0b..de0b95f 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -12,11 +12,12 @@
     <div class="mx-input-wrapper"
       @click="showPopup">
       <input
+        :class="inputClass"
+        :name="inputName"
+        v-bind="inputAttr"
         ref="input"
         type="text"
         autocomplete="off"
-        :class="inputClass"
-        :name="inputName"
         :disabled="disabled"
         :readonly="!editable"
         :value="text"
@@ -185,6 +186,7 @@ export default {
       type: [String, Array],
       default: 'mx-input'
     },
+    inputAttr: Object,
     appendToBody: {
       type: Boolean,
       default: false
diff --git a/test/index.spec.js b/test/index.spec.js
index ddad8fc..8341849 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -13,6 +13,17 @@ afterEach(() => {
 })
 
 describe('datepicker', () => {
+  it('prop: inputAttr', () => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        inputAttr: { required: true, id: 'input' }
+      }
+    })
+    const input = wrapper.find('input').element
+    expect(input).toHaveProperty('required', true)
+    expect(input).toHaveProperty('id', 'input')
+  })
+
   it('prop: appendToBody', () => {
     wrapper = mount(DatePicker, {
       propsData: {
@@ -366,7 +377,9 @@ describe('calendar-panel', () => {
 
   it('click: prev/next year', () => {
     wrapper = mount(CalendarPanel, {
-      value: new Date(2018, 4, 5)
+      propsData: {
+        value: new Date(2018, 4, 5)
+      }
     })
     const nextBtn = wrapper.find('.mx-icon-next-year')
     const lastBtn = wrapper.find('.mx-icon-last-year')