```html
<div class="demo-block" id="datetime-demo1">
  <lx-group title="default format: YYYY-MM-DD" class="demo-block" id="datetime-demo1">
    <lx-datetime
      v-model="value1"
      title="Birthday"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="YYYY-MM-DD HH:mm">
    <lx-datetime
      v-model="value2"
      format="YYYY-MM-DD HH:mm"
      title="start time"
      inline-desc="select hour and minute"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="Limit hours">
    <lx-datetime
      v-model="limitHourValue"
      format="YYYY-MM-DD HH:mm"
      :min-hour="9"
      :max-hour="18"
      title="Limit hours"
      inline-desc="09-18"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="Limit minutes">
    <lx-datetime
      v-model="limitMinuteValue"
      format="YYYY-MM-DD HH:mm"
      :min-minute="9"
      :max-minute="18"
      title="Limit minutes"
      inline-desc="09-18"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="Placeholder">
    <lx-datetime
      v-model="value3"
      format="YYYY-MM-DD"
      placeholder="Please select"
      title="start time"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="specified min-year and max-year">
    <lx-datetime
      v-model="value4"
      placeholder="Please select"
      :min-year="2000"
      :max-year="2016"
      format="YYYY-MM-DD HH:mm"
      title="years after 2000"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="specified template text in Chinese">
    <lx-datetime
      v-model="value5"
      placeholder="请选择日期"
      :min-year="2000"
      :max-year="2016"
      format="YYYY-MM-DD HH:mm"
      title="Chinese"
      year-row="{value}年"
      month-row="{value}月"
      day-row="{value}日"
      hour-row="{value}点"
      minute-row="{value}分"
      confirm-text="完成"
      cancel-text="取消"
      @on-change="change"
    ></lx-datetime>
  </lx-group>

  <lx-group title="show center button and clear the value">
    <lx-datetime
      v-model="value6"
      title="Birthday"
      clear-text="clear"
      @on-change="change"
      @on-clear="clearValue"
    ></lx-datetime>
  </lx-group>

  <lx-group title="show center button to set date to today">
    <lx-datetime
      v-model="value7"
      title="Birthday"
      clear-text="today"
      @on-change="change"
      @on-clear="setToday"
    ></lx-datetime>
  </lx-group>

  <lx-group title="required">
    <lx-datetime
      v-model="value8"
      title="Required"
      clear-text="clear"
      :required="true"
      @on-clear="clearValue8"
    ></lx-datetime>
  </lx-group>
</div>

<script>
// Datetime.md
new Vue({
  el: '#datetime-demo1',
  data: {
    value1: '2016-06-20',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value6: '2016-08-18',
    value7: '',
    value8: '',
    limitHourValue: '',
    limitMinuteValue: '',
    startDate: '2015-11-11',
    endDate: '2017-10-11'
  },
  methods: {
    reRender () {
      this.startDate = '2016-11-11'
      this.endDate = '2018-10-11'
    },
    change (value) {
      console.log('change', value)
    },
    clearValue (value) {
      this.$data.value6 = ''
      console.log('clear')
    },
    clearValue8 (value) {
      this.$data.value8 = ''
    },
    setToday (value) {
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      this.$data.value7 = now.getFullYear() + '-' + cmonth + '-' + day
      console.log('set today ok')
    }
  }
})
</script>
```