| | |
| | | class="c-data-range-float" |
| | | ref="floadLayer" |
| | | > |
| | | <AtDrawer |
| | | <CDrawer |
| | | class="c-data-range-drawer" |
| | | ref="floatDrawer" |
| | | mask |
| | | direction="top" |
| | | :show="drawerShow" |
| | | :onClose="evt => drawerShow=false" |
| | | :onClose="evt => handleClose()" |
| | | > |
| | | <view class="title">请选择日期</view> |
| | | <view class="title"> |
| | | <view v-if="placeholder">{{placeholder}}</view> |
| | | <view v-else>请选择日期</view> |
| | | </view> |
| | | <view class="date"> |
| | | <picker |
| | | mode='date' |
| | | mode="date" |
| | | :start="pickerStart" |
| | | :end="pickerEnd" |
| | | :value="startDate" |
| | | @change="evt => handleStartDateChange(evt.detail.value)" |
| | | > |
| | |
| | | </view> |
| | | </picker> |
| | | <picker |
| | | mode='date' |
| | | mode="date" |
| | | :start="pickerStart" |
| | | :end="pickerEnd" |
| | | :value="endDate" |
| | | @change="evt => handleEndDateChange(evt.detail.value)" |
| | | > |
| | |
| | | :circle="false" |
| | | :onClick="evt => handleFinish()" |
| | | >确定</AtButton> |
| | | </AtDrawer> |
| | | </CDrawer> |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | import Taro from '@tarojs/taro'; |
| | | import { $ } from '@tarojs/extend'; |
| | | import { AtDrawer, AtButton } from 'taro-ui-vue'; |
| | | import { CDrawer } from '@components/layout/drawer'; |
| | | import './cDateRangeAction.scss'; |
| | | |
| | | export default { |
| | |
| | | components: { |
| | | AtDrawer, |
| | | AtButton, |
| | | CDrawer, |
| | | }, |
| | | props: { |
| | | value: null, |
| | | // 项值 |
| | | value: String, |
| | | // 变化回调 |
| | | onChange: Function, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | }, |
| | | data() { |
| | | const year = new Date().getFullYear(); |
| | | return { |
| | | drawerShow: false, |
| | | startDate: '', |
| | | endDate: '', |
| | | pickerStart: year - 30 + '-01-01', |
| | | pickerEnd: year + 30 + '-12-31', |
| | | }; |
| | | }, |
| | | computed: {}, |
| | |
| | | this.startDate = curDates[0]; |
| | | this.endDate = curDates[1]; |
| | | }, |
| | | handleClose() { |
| | | this.drawerShow = false; |
| | | }, |
| | | handleStartDateChange(date) { |
| | | if (date && this.endDate) { |
| | | const startTime = new Date(date); |
| | | const endTime = new Date(this.endDate); |
| | | if (startTime > endTime) { |
| | | Taro.showToast({ |
| | | title: '开始日期不能晚于结束日期!', |
| | | icon: 'none', |
| | | mask: true, |
| | | duration: 2000, |
| | | }); |
| | | return; |
| | | } |
| | | } |
| | | this.startDate = date; |
| | | }, |
| | | handleEndDateChange(date) { |
| | | if (date && this.startDate) { |
| | | const startTime = new Date(this.startDate); |
| | | const endTime = new Date(date); |
| | | if (startTime > endTime) { |
| | | Taro.showToast({ |
| | | title: '结束日期不能早于开始日期!', |
| | | icon: 'none', |
| | | mask: true, |
| | | duration: 2000, |
| | | }); |
| | | return; |
| | | } |
| | | } |
| | | this.endDate = date; |
| | | }, |
| | | handleFinish() { |