| | |
| | | /** |
| | | * CDatePicker - 选择日期范围操作 |
| | | * 日期选择组件,用于在表单中选择日期或日期范围 |
| | | * 支持三种选择模式:日期选择、日期时间选择和日期范围选择 |
| | | * 可限制日期选择范围,支持清除功能和只读模式 |
| | | * @author Tevin |
| | | */ |
| | | |
| | | <template> |
| | | <view |
| | | class="c-date-picker" |
| | | :class="readOnly ? 'read-only':''" |
| | | :class="readOnly?'read-only':''" |
| | | > |
| | | <CDateRangeAction |
| | | v-if="mode==='dateRange'" |
| | |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | <view |
| | | v-show="showClear" |
| | | v-show="!readOnly && showClear" |
| | | class="at-icon at-icon-close" |
| | | @tap.stop="evt => handleClear()" |
| | | ></view> |
| | |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | <view |
| | | v-show="showClear" |
| | | v-show="!readOnly && showClear" |
| | | class="at-icon at-icon-close" |
| | | @tap.stop="evt => handleClear()" |
| | | ></view> |
| | |
| | | mode="date" |
| | | :start="limitStart || pickerStart" |
| | | :end="limitEnd || pickerEnd" |
| | | :fields="fields" |
| | | :value="itemRes.formData[itemRes.name]" |
| | | @change="evt=>handleChange(evt.detail.value)" |
| | | > |
| | |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | <view |
| | | v-show="showClear" |
| | | v-show="!readOnly && showClear" |
| | | class="at-icon at-icon-close" |
| | | @tap.stop="evt => handleClear()" |
| | | ></view> |
| | |
| | | limitStart: String, |
| | | // 结束日期 |
| | | limitEnd: String, |
| | | // 日期选择粒度 year、month、day |
| | | fields: { |
| | | type: String, |
| | | default: 'day', |
| | | }, |
| | | // 是否只读 |
| | | readOnly: { |
| | | type: Boolean, |