# date-picker

# 选择到日

ykc-date-picker 日期选择控件(以「日」为基本单位)

单个选择到日

范围选择到日

<template>
  <div class="date-picker-wrap">
      <p>单个选择到日</p>
      <ykc-date-picker v-model="date" type="date"></ykc-date-picker>
      <p>范围选择到日</p>
      <ykc-date-picker v-model="daterange"></ykc-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        date: '',
        daterange: []
      }
    },
    methods: {
    }
  };
</script>
<style>
  .date-picker-wrap{
    width: 300px
  }
</style>

复制代码

# 选择到时分秒

单个选择到时分秒

范围选择到时分秒

<template>
  <div class="date-picker-wrap">
      <p>单个选择到时分秒</p>
      <ykc-date-picker v-model="datetime" type="datetime"></ykc-date-picker>
      <p>范围选择到时分秒</p>
      <ykc-date-picker v-model="daterange"  type="datetimerange"></ykc-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        datetime: '',
        daterange: []
      }
    },
    methods: {
    }
  };
</script>
<style>
  .date-picker-wrap{
    width: 300px
  }
</style>

复制代码

# 选择到月

单个选择到月

范围选择到月

<template>
  <div class="date-picker-wrap">
      <p>单个选择到月</p>
      <ykc-date-picker v-model="month" type="month"></ykc-date-picker>
      <p>范围选择到月</p>
      <ykc-date-picker v-model="daterange"  type="monthrange"></ykc-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        month: '',
        daterange: []
      }
    },
    methods: {
    }
  };
</script>
<style>
  .date-picker-wrap{
    width: 300px
  }
</style>

复制代码

# 选择到年

单个选择到年

范围选择到年

<template>
  <div class="date-picker-wrap">
      <p>单个选择到年</p>
      <ykc-date-picker v-model="year" type="year"></ykc-date-picker>
      <p>范围选择到年</p>
      <ykc-date-picker v-model="daterange"  type="yearrange"></ykc-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        year: '',
        daterange: []
      }
    },
    methods: {
    }
  };
</script>
<style>
  .date-picker-wrap{
    width: 300px
  }
</style>

复制代码

# 默认选中

单个选择到日

范围选择到日

<template>
  <div class="date-picker-wrap">
      <p>单个选择到日</p>
      <ykc-date-picker v-model="date" type="date"></ykc-date-picker>
      <p>范围选择到日</p>
      <ykc-date-picker v-model="daterange"></ykc-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        date: '2021-10-19',
        daterange: ['2021-10-10', '2021-10-19']
      }
    },
    methods: {
    }
  };
</script>
<style>
  .date-picker-wrap{
    width: 300px
  }
</style>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
v-model	是	绑定值	date(DatePicker) / array(DateRangePicker)	-	-
type	否	显示类型	string	year / month / date / datetime / datetimerange / daterange/ monthrange / yearrange	daterange
format	否	显示在输入框中的格式及绑定值的格式 (时分选择是需要传入，其他格式不用传入，组件内部已处理自动匹配)	string	yyyy / yyyy-MM / yyyy-MM-dd / yyyy-MM-dd HH:mm:ss / yyyy-MM-dd HH:mm	yyyy-MM-dd
limitDate	否	限制日期（如果传入日期：会限制传入日期之前日期不可选择，传入日期小于当前日期当前日期之前不可选择）	string	limitBefore ( 限制当天之前日期不可选 ) / limitAfter ( 限制当天之后日期不可选 )	-
limitToday	否	是否限制当天（需要配合 limitDate 使用）	boolean	true / false	false

# Events

事件名称	说明	回调参数
change	确认选定的值时触发	组件绑定值:,格式与绑定值一致

← upload form →