/**
|
* CDatePicker - 选择日期范围操作
|
* @author Tevin
|
*/
|
|
<template>
|
<view
|
class="c-date-picker"
|
:class="readOnly ? 'read-only':''"
|
>
|
<CDateRangeAction
|
v-if="mode==='dateRange'"
|
:value="itemRes.formData[itemRes.name]"
|
:onChange="evt=>handleChange(evt)"
|
:placeholder="placeholder"
|
>
|
<AtInput
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:error="itemRes.error"
|
:value="itemRes.formData[itemRes.name]"
|
:placeholder="placeholder"
|
>
|
<view
|
v-show="!readOnly && !showClear"
|
class="at-icon at-icon-chevron-right"
|
/>
|
<view
|
v-show="showClear"
|
class="at-icon at-icon-close"
|
@tap.stop="evt => handleClear()"
|
></view>
|
</AtInput>
|
</CDateRangeAction>
|
<CDateTimeAction
|
v-else-if="mode==='dateTime'"
|
:value="itemRes.formData[itemRes.name]"
|
:onChange="evt=>handleChange(evt)"
|
:placeholder="placeholder"
|
>
|
<AtInput
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:error="itemRes.error"
|
:value="itemRes.formData[itemRes.name]"
|
:placeholder="placeholder"
|
>
|
<view
|
v-show="!readOnly && !showClear"
|
class="at-icon at-icon-chevron-right"
|
/>
|
<view
|
v-show="showClear"
|
class="at-icon at-icon-close"
|
@tap.stop="evt => handleClear()"
|
></view>
|
</AtInput>
|
</CDateTimeAction>
|
<view v-else-if="mode==='date'">
|
<picker
|
mode="date"
|
:start="limitStart || pickerStart"
|
:end="limitEnd || pickerEnd"
|
:fields="fields"
|
:value="itemRes.formData[itemRes.name]"
|
@change="evt=>handleChange(evt.detail.value)"
|
>
|
<AtInput
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:error="itemRes.error"
|
:value="itemRes.formData[itemRes.name]"
|
:placeholder="placeholder"
|
>
|
<view
|
v-show="!readOnly && !showClear"
|
class="at-icon at-icon-chevron-right"
|
/>
|
<view
|
v-show="showClear"
|
class="at-icon at-icon-close"
|
@tap.stop="evt => handleClear()"
|
></view>
|
</AtInput>
|
</picker>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { $ } from '@tarojs/extend';
|
import { AtInput } from 'taro-ui-vue';
|
import CDateRangeAction from './CDateRangeAction';
|
import CDateTimeAction from './CDateTimeAction.vue';
|
import './cDatePicker.scss';
|
|
export default {
|
name: 'CDatePicker',
|
components: {
|
AtInput,
|
CDateRangeAction,
|
CDateTimeAction,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
// 日期时间选择器模式，包含 date / dateRange / dateTime 三种类型
|
mode: {
|
type: String,
|
default: 'date',
|
},
|
// 占位提示
|
placeholder: String,
|
// 开始日期
|
limitStart: String,
|
// 结束日期
|
limitEnd: String,
|
// 日期选择粒度 year、month、day
|
fields: {
|
type: String,
|
default: 'day',
|
},
|
// 是否只读
|
readOnly: {
|
type: Boolean,
|
default: false,
|
},
|
// 允许清除
|
allowClear: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
const year = new Date().getFullYear();
|
return {
|
pickerStart: year - 30 + '-01-01',
|
pickerEnd: year + 30 + '-12-31',
|
};
|
},
|
computed: {
|
showClear() {
|
if (!this.allowClear) {
|
return false;
|
}
|
return !!this.itemRes.formData[this.itemRes.name];
|
},
|
},
|
methods: {
|
handleChange(val) {
|
this.itemRes.onChange(val);
|
},
|
handleClear() {
|
this.itemRes.onChange('');
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
