diff --git a/src/components/datetime-view/index.vue b/src/components/datetime-view/index.vue
new file mode 100644
index 000000000..eaf77209a
--- /dev/null
+++ b/src/components/datetime-view/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import Datetime from '../datetime'
+import Picker from '../datetime/datetimepicker'
+import objectAssign from 'object-assign'
+
+export default {
+  extends: Datetime,
+  methods: {
+    render () {
+      this.$nextTick(() => {
+        this.picker && this.picker.destroy()
+        this.picker = new Picker(objectAssign(this.pickerOptions, {
+          renderInline: true
+        }))
+        this.picker.show()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/datetime-view/metas.yml b/src/components/datetime-view/metas.yml
new file mode 100644
index 000000000..7d505f155
--- /dev/null
+++ b/src/components/datetime-view/metas.yml
@@ -0,0 +1,12 @@
+icon: '&#xe60a;'
+methods:
+  render:
+    version: next
+    en: re-render component
+    zh-CN: 强制重新渲染组件，当主动修改值或者其他非响应属性时需要调用该方法
+changes:
+  next:
+    en:
+      - '[feature] new component'
+    zh-CN:
+      - '[feature] 新组件 DatetimeView'
\ No newline at end of file
diff --git a/src/components/datetime/datetimepicker.js b/src/components/datetime/datetimepicker.js
index 09d7d2010..b53448b28 100755
--- a/src/components/datetime/datetimepicker.js
+++ b/src/components/datetime/datetimepicker.js
@@ -65,7 +65,8 @@ const DEFAULT_CONFIG = {
   confirmText: 'ok',
   clearText: '',
   cancelText: 'cancel',
-  destroyOnHide: false
+  destroyOnHide: false,
+  renderInline: false
 }
 
 function renderScroller (el, data, value, fn) {
@@ -117,6 +118,8 @@ function DatetimePicker (config) {
     self.config[key] = config[key] || val
   })
 
+  this.renderInline = self.config.renderInline
+
   if (config.defaultSelectedValue && !config.value) {
     self.config.value = config.defaultSelectedValue
   }
@@ -135,16 +138,18 @@ function DatetimePicker (config) {
 
   this.reMakeData = !!this.config.startDate && !!this.config.endDate
 
-  let trigger = self.config.trigger
+  if (!this.renderInline) {
+    let trigger = self.config.trigger
 
-  this.triggerHandler = function (e) {
-    e.preventDefault()
-    self.show(self.value)
-  }
-  if (trigger) {
-    trigger = self.trigger = getElement(trigger)
-    this.trigger = trigger
-    this.trigger.addEventListener('click', this.triggerHandler, false)
+    this.triggerHandler = function (e) {
+      e.preventDefault()
+      self.show(self.value)
+    }
+    if (trigger) {
+      trigger = self.trigger = getElement(trigger)
+      this.trigger = trigger
+      this.trigger.addEventListener('click', this.triggerHandler, false)
+    }
   }
 }
 
@@ -155,6 +160,10 @@ DatetimePicker.prototype = {
 
     self.container.style.display = 'block'
 
+    if (this.renderInline) {
+      self.container.classList.add('vux-datetime-view')
+    }
+
     each(TYPE_MAP, function (type) {
       self[type + 'Scroller'] && self[type + 'Scroller'].select(trimZero(newValueMap[type]), false)
     })
@@ -179,13 +188,13 @@ DatetimePicker.prototype = {
       self._show(newValueMap)
     } else {
       const container = self.container = toElement(config.template)
-      document.body.appendChild(container)
+      if (!self.renderInline) {
+        document.body.appendChild(container)
 
-      self.container.style.display = 'block'
-
-      container.addEventListener('touchstart', function (e) {
-        // e.preventDefault()
-      }, false)
+        self.container.style.display = 'block'
+      } else {
+        document.querySelector(self.config.trigger).appendChild(container)
+      }
 
       each(TYPE_MAP, function (type) {
         const div = self.find('[data-role=' + type + ']')
@@ -201,7 +210,7 @@ DatetimePicker.prototype = {
         }
 
         self[type + 'Scroller'] = renderScroller(div, data, trimZero(newValueMap[type]), function (currentValue) {
-          config.onSelect.call(self, type, currentValue)
+          config.onSelect.call(self, type, currentValue, self.getValue())
           let currentDay
           if (type === 'year') {
             const currentMonth = self.monthScroller ? self.monthScroller.value : config.currentMonth
@@ -220,7 +229,7 @@ DatetimePicker.prototype = {
         })
       })
 
-      if (!self.renderText) {
+      if (!self.renderText && !self.renderInline) {
         if (self.config.confirmText) {
           self.find('[data-role=confirm]').innerText = self.config.confirmText
         }
@@ -254,8 +263,10 @@ DatetimePicker.prototype = {
       }
     }
 
-    showMask()
-    config.onShow.call(self)
+    if (!this.renderInline) {
+      showMask()
+      config.onShow.call(self)
+    }
   },
 
   _makeData (type, year, month) {
@@ -335,7 +346,7 @@ DatetimePicker.prototype = {
     this.monthScroller.destroy()
     const div = self.find('[data-role=month]')
     self.monthScroller = renderScroller(div, self._makeData('month'), month, function (currentValue) {
-      self.config.onSelect.call(self, 'month', currentValue)
+      self.config.onSelect.call(self, 'month', currentValue, self.getValue())
       const currentYear = self.yearScroller ? self.yearScroller.value : self.config.currentYear
       if (self.dayScroller) {
         const currentDay = self.dayScroller.value
@@ -353,7 +364,7 @@ DatetimePicker.prototype = {
     self.dayScroller.destroy()
     const div = self.find('[data-role=day]')
     self.dayScroller = renderScroller(div, self._makeData('day', year, month), day, function (currentValue) {
-      self.config.onSelect.call(self, 'day', currentValue)
+      self.config.onSelect.call(self, 'day', currentValue, self.getValue())
     })
   },
 
diff --git a/src/components/datetime/index.vue b/src/components/datetime/index.vue
index 8ae9b0382..9843d9ec7 100755
--- a/src/components/datetime/index.vue
+++ b/src/components/datetime/index.vue
@@ -50,10 +50,7 @@ export default {
       type: String,
       default: 'YYYY-MM-DD'
     },
-    title: {
-      type: String,
-      required: true
-    },
+    title: String,
     value: {
       type: String,
       default: ''
@@ -157,6 +154,12 @@ export default {
         hourList: this.hourList,
         minuteList: this.minuteList,
         defaultSelectedValue: this.defaultSelectedValue,
+        onSelect (type, val, wholeValue) {
+          if (_this.picker && _this.picker.config.renderInline) {
+            _this.$emit('input', wholeValue)
+            _this.$emit('on-change', wholeValue)
+          }
+        },
         onConfirm (value) {
           _this.currentValue = value
         },
@@ -247,6 +250,11 @@ export default {
       this.render()
     },
     value (val) {
+      // do not force render when renderInline is true
+      if (this.picker && this.picker.config.renderInline) {
+        this.currentValue = val
+        return
+      }
       if (this.currentValue !== val) {
         this.currentValue = val
         this.render()
@@ -262,6 +270,16 @@ export default {
 <style lang="less">
 @import '../../styles/variable.less';
 
+.dp-container {
+  &.vux-datetime-view {
+    position: static;
+    transition: none;
+    & .dp-header {
+      display: none;
+    }
+  }
+}
+
 .vux-datetime-clear {
   text-align: center;
 }
diff --git a/src/components/map.json b/src/components/map.json
index 5fbc83f76..c14568ba5 100644
--- a/src/components/map.json
+++ b/src/components/map.json
@@ -39,6 +39,7 @@
   "Datetime": "src/components/datetime/index.vue",
   "DatetimePlugin": "src/plugins/datetime/index.js",
   "DatetimeRange": "src/components/datetime-range/index.vue",
+  "DatetimeView": "src/components/datetime-view/index.vue",
   "debounce": "src/tools/debounce/index.js",
   "Demobasic": "src/components/fullpage/DemoBasic.vue",
   "Demoindex": "src/components/popover/DemoIndex.vue",
diff --git a/src/datas/vux_component_list.json b/src/datas/vux_component_list.json
index 8e6e0a323..4d2360898 100644
--- a/src/datas/vux_component_list.json
+++ b/src/datas/vux_component_list.json
@@ -85,6 +85,10 @@
     "name": "datetime-range",
     "icon": "&#xe60a;"
   },
+  {
+    "name": "datetime-view",
+    "icon": "&#xe60a;"
+  },
   {
     "name": "datetime",
     "icon": "&#xe60a;"
diff --git a/src/demo_list.json b/src/demo_list.json
index 733c36562..11a3a329a 100644
--- a/src/demo_list.json
+++ b/src/demo_list.json
@@ -104,5 +104,6 @@
   "InlineLoading",
   "InlineCalendarEachDaySlot#/demo/inline-calendar-each-day-slot",
   "CheckIcon",
-  "Drawer"
+  "Drawer",
+  "DatetimeView"
 ]
diff --git a/src/demos/DatetimeView.vue b/src/demos/DatetimeView.vue
new file mode 100644
index 000000000..6d6b1bd08
--- /dev/null
+++ b/src/demos/DatetimeView.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <datetime-view v-model="value1" ref="datetime" :format="format"></datetime-view>
+    <p class="info">current value: {{ value1 }}</p>
+    <div style="padding:15px;">
+      <x-button @click.native="changeValue('2017-11-11')" :disabled="format !== 'YYYY-MM-DD'" type="primary">set 2017-11-11</x-button>
+      <x-button @click.native="changeValue('2016-08-08')" :disabled="format !== 'YYYY-MM-DD'" type="primary">set 2016-08-08</x-button>
+      <x-button @click.native="toggleFormat" type="primary">toggle format</x-button>
+      <x-button @click.native="showPopup = true" type="primary">show popup with datetime-view</x-button>
+    </div>
+    <div v-transfer-dom>
+      <popup v-model="showPopup">
+        <datetime-view v-model="value2"></datetime-view>
+      </popup>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DatetimeView, XButton, Popup, TransferDom } from 'vux'
+
+export default {
+  components: {
+    DatetimeView,
+    XButton,
+    Popup
+  },
+  directives: {
+    TransferDom
+  },
+  data () {
+    return {
+      value1: '2017-10-11',
+      value2: '2017-10-24',
+      showPopup: false,
+      format: 'YYYY-MM-DD'
+    }
+  },
+  methods: {
+    toggleFormat () {
+      if (this.format === 'YYYY-MM-DD') {
+        this.format = 'YYYY-MM-DD HH:mm:ss'
+      } else {
+        this.format = 'YYYY-MM-DD'
+      }
+    },
+    changeValue (val) {
+      this.value1 = val
+      this.$refs.datetime.render()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.info {
+  padding-top: 15px;
+  text-align: center;
+  color: #666;
+}
+</style>