CalendarInput 日历输入 v1.2.6

日历输入组件用于表单中，与输入框同步弹出选择日期或日期区间。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

提示

该组件在小程序中，因为层级问题，可能会被页面的pi-bottom-bar 布局覆盖，使用后请谨慎测试

示例

基础用法

可通过v-model | value：控制日期

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="基础用法">
      <pi-calendar-input v-model="form.date" />
    </pi-form-item>
  </pi-form>
</template>

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

范围选择

可通过calendar: {calendarPanel: { type: 'range' } }：控制日期范围选择

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="范围选择">
      <pi-calendar-input
        v-model="form.range"
        :calendar="{
          calendarPanel: {
            type: 'range'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { range: ['2020-5-1', '2020-5-10'] }
    }
  }
}
</script>

自定义解析函数

可通过parse-value-fn：控制日历输入框显示的值

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="范围选择">
      <pi-calendar-input
        v-model="form.customRange"
        :parse-value-fn="customParseValueFn"
        :calendar="{
          calendarPanel: {
            type: 'range'
          }
        }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { customRange: ['2020-5-1', '2020-5-10'] }
    }
  },
  methods: {
    customParseValueFn(dateRange) {
      return `你选择了${dateRange.length}项日期`
    }
  }
}
</script>

自定义slot

可通过插槽，自定义显示内容

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="范围选择">
      <pi-calendar-input
          v-model="form.customSlot"
          :calendar="{
            calendarPanel: {
              type: 'range'
            }
          }"
        >
          <view class="pi-align-center pi-justify-end">
            <view
              v-for="item in form.customSlot"
              :key="item"
              class="pi-pd-12 pi-bg-primary pi-white pi-mg-left-12 pi-radius-8 pi-fz-24"
            >
              {{ item }}
            </view>
          </view>
        </pi-calendar-input>
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { customSlot: ['2020-5-1', '2020-5-10'] }
    }
  }
}
</script>

API

Props

名称	描述	类型	必选	默认值
value	日历组件默认值	—	false	-
customStyle	自定义样式，对象形式	Object	false	{}
customClass	自定义样式类，字符串形式	String	false	''
dateFormat	已选择的时间格式化显示规则	String	true	'YYYY-MM-DD'
rangeSplit	范围选择时间分隔符	String	false	'至'
parseValueFn	解析值的方法，如果配置了，则读取该函数的返回值作为显示的内容	Function	false	-
input	输入框的配置	Object	false	input配置项
calendar	日历弹窗的配置	Object	false	calendar配置项

Input Props

提示

以下属性覆盖pi-input配置，其余属性参考input配置项

名称	描述	类型	必选	默认值
placeholder	-	String	false	'请选择'
disabled	-	Boolean	false	true

Slots

名称	说明
default	默认插槽

Events

方法名称	说明	参数
change	输入框值发生变化	value(String)