<template>
  <div class="demo-date-picker">
    <ui-date-picker
      v-model="year"
      type="year"
      style="width: 200px;"></ui-date-picker>
    <br />
    <ui-date-picker
      v-model="month"
      type="month"
      style="width: 200px;"></ui-date-picker>
    <br />
    <ui-date-picker
      v-model="date"
      type="date"
      style="width: 200px;"></ui-date-picker>
    <br />
    <ui-date-picker
      v-model="range"
      mode="range"
      range-separator=" ~ "
      style="width: 350px;"></ui-date-picker>
  </div>
</template>

<script>
import { DatePicker } from "amumu-ui"

export default {
  components: {
    "ui-date-picker": DatePicker,
  },
  data() {
    return {
      year: "",
      month: "",
      date: "",
      range: "",
    }
  },
}
</script>

<style lang="scss">
.demo-date-picker {
  .mm-datepicker {
    margin-bottom: 15px;
  }
}
</style>
