日期选择 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: function(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: function(e) {
      console.log(e)
    },
    disabledDateFn: function(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>

<style lang="less">
.demo-picker{
  li{
   list-style:none;
   height:40px;
  }
  strong{font-weight:normal;margin-right:10px;}
}
</style>

属性及事件

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	是否禁用	boolean	--	false
disabled-date-fn	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	--	--

HcDatePicker 事件

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

• 基本用法
• 设置日期范围
• 日期格式化
• 属性及事件
  • HcDatePicker 属性
  • HcDatePicker 事件

登录