LocalLivingServicesUniapp/components/dengrq-datetime-picker/dateSelector/index.vue

<template>
  <view >
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="popup-box">
        <view class="flex justify-between popup-title" >
            <text @tap="onCancel">取消</text>
            <text style=" font-size: 34upx;">{{ title }}</text>
            <text style=" color: #449AFF ;"  @tap="onConfirm">确定</text>
        </view>
				<view class="year" v-if="isYear">
					<view class="day" :class="currentIndex == index?'active':''" v-for="(item,index) in dateList" :key="index" @click="selectYear(item,index)">
						{{item.name}}
					</view>
				</view>
			
				
      <view class="select-date-wrapper">
        <view class="select-date" :class="{ active: activeDate == 'startDate' }" @tap="onTapStartDate">
          <view class="select-date-value" v-if="startDate">{{ startDate }}</view>
          <view class="select-date-placeholder" v-else>开始时间</view>
        </view>
        <view style="margin: 0 16px">至</view>
        <view class="select-date" :class="{ active: activeDate == 'endDate' }" @tap="onTapEndDate">
          <view class="select-date-value" v-if="endDate">{{ endDate }}</view>
          <view class="select-date-placeholder" v-else>结束时间</view>
        </view>
      </view>

    <DateTimePicker
      v-if="showStartDatePicker"
      @onChange="onChangeStartDate"
      :defaultDate="startDate"
      :minDate="minDate || ''"
      :maxDate="endDate || maxDate || ''"
      :mode="mode"
    />
    <DateTimePicker
      v-if="showEndDatePicker"
      @onChange="onChangeEndDate"
      :defaultDate="endDate"
      :minDate="startDate || minDate || ''"
      :maxDate="maxDate || ''"
      :mode="mode"
    />

    <!-- <view class="btn-group" v-if="showStartDatePicker || showEndDatePicker">
      <view class="btn-cancel" @tap="onCancel">取消</view>
      <view class="btn-confirm" @tap="onConfirm">确定</view>
    </view> -->
  </view>
  </uni-popup>
  </view>
</template>

<script src="./index.js"></script>

<style lang="css" scoped src="./index.css"></style>
<style lang="scss" scoped>
	.year{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}
	.day{
		width: 205rpx;
		height: 50rpx;
		border-radius: 4rpx;
		border: 1px solid #DDDDDD;
		font-size: 28rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active{
		background: rgba(68,154,255,0.1);
		border: 1px solid #449AFF;
		color: #449AFF;
	}
</style>