Minimalist UI

DatePicker 日期选择器

引入组件

<template>
  <div>
    <m-date-picker v-model="date"></m-date-picker>
  </div>
</template>

<script>
  import { MDatePicker } from "@csr/m_ui";
  export default {
    components: {
      MDatePicker
    },
    data() {
      return {
        date: ''
      }
    }
  }
</script>

基础用法

代码
<m-date-picker v-model="date"></m-date-picker>

<script>
  export default {
    data() {
      return {
        date: ''
      }
    }
  }
</script>

多选

代码
<m-date-picker v-model="date3" type="multiple"></m-date-picker>
<script>
  export default {
    data() {
      return {
        date3: ''
      }
    }
  }
</script>

默认选中日期

单选

多选

代码
<p>单选</p>
<m-date-picker v-model="date1"></m-date-picker>
<p>多选</p>
<m-date-picker v-model="date2" type="multiple"></m-date-picker>

<script>
  export default {
    data() {
      return {
        date1: '2019/04/12',
        date2: ['2019/04/12', '2019/04/20']
      }
    }
  }
</script>

显示日期格式

YYYY-DD-MM

YYYY年DD月MM日

代码
<p>YYYY-DD-MM</p>
<m-date-picker v-model="date4" format="YYYY-DD-MM"></m-date-picker>
<p>YYYY年DD月MM日</p>
<m-date-picker v-model="date5" format="YYYY年DD月MM日"></m-date-picker>

<script>
  export default {
    data() {
      return {
        date4: '',
        date5: ''
      }
    }
  }
</script>

返回日期格式

返回的日期格式是：

代码
<p>YYYY-DD-MM</p>
<m-date-picker v-model="date4" format="YYYY-DD-MM"></m-date-picker>
<p>YYYY年DD月MM日</p>
<m-date-picker v-model="date5" format="YYYY年DD月MM日"></m-date-picker>

<script>
  export default {
    data() {
      return {
        date4: '',
        date5: ''
      }
    }
  }
</script>

不可选日期

代码
<m-date-picker v-model="date6" :disabled-date="disabledDate"></m-date-picker>
<script>
  export default {
    data() {
      return {
        date6: ''
      }
    },
    methods: {
      disabledDate(date) {
        return date && date.getTime() < Date.now() - 86400000;
      }
    },
  }
</script>

API

属性说明类型默认值
v-model 绑定的日期值，如果需要指定默认选中，日期的格式必须是YYYY/DD/MM string
type 日期选择器类型：single（单选），multiple（多选） string single
format 显示在输入框中的格式，比如：YYYY/MM/DD， YYYY-MM-DD，YYYY年MM月DD日 string YYYY-MM-DD
valueFormat 选中日期后返回的格式，比如：YYYY/MM/DD， YYYY-MM-DD，YYYY年MM月DD日 string YYYY/MM/DD
placeholder 输入框中的占位文字 string 选择日期
disabledDate 判断日期是否可选，接受参数为Date对象，返回true为可选，false不可选 function

事件

事件名 说明 回调参数
on-clear 清除日期时触发
on-selected-year 选中年时触发 (year: number)
on-selected-month 选中月时触发 (month: number)
on-change 选择日期时触发 (date: 符合valueFormat中指定格式的日期)
on-confirm 多选日期模式下，点击确定按钮时触发 (startDate: 返回值参考dateItem表, endDate: 返回值参考dateItem表)

dateItem

属性说明类型默认值
cnWeek 中文星期数，例如：星球六 string
cnWeekShort 中文星期数简写，例如：六 string
enMonth 英文月，例如：April string
enWeek 英文周简写，例如：Sat string
year 年 number
month 月 number
date 日 number
dateStamp 年月日组成的字符串，例如："2018/12/21" string
isToday 是否今天 boolean

←