/**
|
* CDateTimeAction - 选择日期范围操作
|
* @author Tevin
|
*/
|
|
<template>
|
<view class="c-date-time-action">
|
<view
|
class="c-date-time-slot"
|
@tap="evt => handleOpen()"
|
>
|
<slot />
|
</view>
|
<view
|
class="c-data-time-float"
|
ref="floadLayer"
|
>
|
<AtDrawer
|
class="c-data-time-drawer"
|
ref="floatDrawer"
|
mask
|
:show="drawerShow"
|
:onClose="evt => drawerShow=false"
|
>
|
<view class="title">
|
<view v-if="placeholder">{{placeholder}}</view>
|
<view v-else>请选择日期与时间</view>
|
<AtButton
|
size="small"
|
type="primary"
|
:onClick="evt => handleSelectNow()"
|
>此刻</AtButton>
|
</view>
|
<view class="date">
|
<picker
|
mode="date"
|
:start="pickerStart"
|
:end="pickerEnd"
|
:value="date"
|
@change="evt => handleDateChange(evt.detail.value)"
|
>
|
<view class="item">
|
<view class="label">选择日期</view>
|
<view :class="date?'filled':'empty'">
|
{{ date?date:'请选择日期' }}
|
</view>
|
<view class="at-icon at-icon-chevron-right" />
|
</view>
|
</picker>
|
<picker
|
mode="time"
|
:value="time"
|
@change="evt => handleTimeChange(evt.detail.value)"
|
>
|
<view class="item">
|
<view class="label">选择时间</view>
|
<view :class="time?'filled':'empty'">
|
{{ time?time:'请选择时间' }}
|
</view>
|
<view class="at-icon at-icon-chevron-right" />
|
</view>
|
</picker>
|
</view>
|
<AtButton
|
class="btn"
|
type="primary"
|
full
|
:circle="false"
|
:onClick="evt => handleFinish()"
|
>确定</AtButton>
|
</AtDrawer>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { $ } from '@tarojs/extend';
|
import moment from 'moment';
|
import { AtDrawer, AtButton } from 'taro-ui-vue';
|
import './cDateTimeAction.scss';
|
|
export default {
|
name: 'CDateTimeAction',
|
components: {
|
AtDrawer,
|
AtButton,
|
},
|
props: {
|
// 项值
|
value: String,
|
// 变化回调
|
onChange: Function,
|
// 占位提示
|
placeholder: String,
|
},
|
data() {
|
const year = new Date().getFullYear();
|
return {
|
drawerShow: false,
|
date: '',
|
time: '',
|
pickerStart: year - 30 + '-01-01',
|
pickerEnd: year + 30 + '-12-31',
|
};
|
},
|
computed: {},
|
methods: {
|
handleOpen() {
|
this.drawerShow = true;
|
const curDates = (this.value || ' ').split(' ');
|
this.date = curDates[0];
|
this.time = curDates[1];
|
},
|
handleDateChange(date) {
|
this.date = date;
|
},
|
handleTimeChange(time) {
|
this.time = time;
|
},
|
handleSelectNow() {
|
const curDates = moment().format('YYYY-MM-DD HH:mm').split(' ');
|
this.date = curDates[0];
|
this.time = curDates[1];
|
},
|
handleFinish() {
|
this.drawerShow = false;
|
if (!this.date && !this.time) {
|
this.onChange('');
|
} else {
|
this.onChange(this.date + ' ' + this.time);
|
}
|
},
|
},
|
mounted() {
|
const $cFilter = $(this.$refs.floadLayer).parents('.c-filter');
|
if ($cFilter.length > 0) {
|
$cFilter.eq(0).after(this.$refs.floadLayer);
|
$cFilter.parent().css('transform', 'translate(0,0)');
|
}
|
},
|
};
|
</script>
|
