# 日期选择 DatePicker

# 基本用法

基本用法

日期初始化。值改变事件

<title>基本用法</title>
<describe>日期初始化。值改变事件</describe>
<template>
   <hc-date-picker
    v-model="date"
    placeholder="请选择日期"
    style="width: 200px;"
    @change="handleChange"
    ></hc-date-picker>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      date: new Date()
    }
  },
  methods: {
    handleChange(e) {
      console.log(e)
    }
  }
}
</script>

# 设置日期范围

设置日期范围

通过disabledDateFn属性,设置可选日期范围

<title>设置日期范围</title>
<describe>通过disabledDateFn属性,设置可选日期范围</describe>
<template>
   <hc-date-picker
    v-model="date"
    placeholder="请选择日期"
    style="width: 200px;"
    :disabled-date-fn="disabledDateFn"               
    @change="handleChange"
    ></hc-date-picker>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      date: new Date()
    }
  },
  methods: {
    handleChange(e) {
      console.log(e)
    },
    disabledDateFn(time){
      return time.getTime() < Date.now() - 8.64e7;
    }
  }
}
</script>

# 日期格式化

  • 选择年份
  • 选择月份
  • 选择时间
基本用法

定义日期选择的格式(format:yyyy-MM-dd HH:mm:ss)

<title>基本用法</title>
<describe>定义日期选择的格式(format:yyyy-MM-dd HH:mm:ss)</describe>
<template>
  <ul class="demo-picker">
    <li>
    <strong>选择年份</strong>
    <hc-date-picker v-model="date" placeholder="请选择日期" format="yyyy" style="width: 200px;" ></hc-date-picker>
    </li>
    <li>
    <strong>选择月份</strong>
    <hc-date-picker v-model="date" placeholder="请选择日期" format="MM" style="width: 200px;"></hc-date-picker>
    </li>
    <li>
    <strong>选择时间</strong>
    <hc-date-picker v-model="date" placeholder="请选择日期" format="yyyy-MM-dd HH:mm:ss" style="width: 200px;"></hc-date-picker>
    </li>
  </ul>
</template>
<script>
export default {
  props: ['slot-key'],
  data: function () {
    return {
      date: new Date()
    }
  },
  methods: {

  }
}
</script>

# 属性及事件

# HcDatePicker 属性

属性 说明 类型 可选值 默认值
value 当前输入的值,可配合v-model使用 string date --
placeholder 为空提示 string -- --
format 格式化 string yyyy-MM-dd, yyyy-MM-dd HH:mm:ss, yyyy, MM yyyy-MM-dd
clearable 允许清空,开启后可以一键清空选择值 boolean -- true
viewable 是否查看状态 boolean -- false
disabled-date-fn 设置禁用状态,参数为当前日期,要求返回 Boolean Function -- --

# HcDatePicker 事件

事件名 说明 参数
change 值改变事件 event.value:当前输入值