使用uni-poup制作日历弹出框

template:

<image src="日历图片" @click="handleOpenPop('calendarPop')"></image>

下面是uni-poup代码，uni-poup插件需要到uni-app插件商城下载

<uni-popup ref="calendarPop" type="center">

      <view class="box_s padding_around">

        <view class="row_end">

          <i

            @click="$refs.calendarPop.close()"

            class="iconfont icon-cha theme_color"

            style="font-size: 44rpx"

          ></i>

        </view>

        <view class="row_start">

          <view class="flex1 row_end margin-right">开始日期</view>

          <picker

            data-box="listParams"

            data-attr="start_time"

            mode="date"

            class="gray flex1"

            @change="handlePickerDate"

          >

            {{ listParams.start_time ? listParams.start_time : "请选择" }}

          </picker>

        </view>

        <view class="linear_gradient margin-top margin-bottom"></view>

        <view class="row_start">

          <view class="flex1 row_end margin-right">结束日期</view>

          <picker

            data-box="listParams"

            data-attr="end_time"

            mode="date"

            class="gray flex1"

            @change="handlePickerDate"

          >

            {{ listParams.end_time ? listParams.end_time : "请选择" }}

          </picker>

        </view>

      </view>

    </uni-popup>

methods里面写

 handlePickerDate(e) {//当你开始时间，结束时间都选择，e会打印两次，第一次为开始时间，第二次未结束时间

      let { value } = e.detail;

      let { box, attr } = e.currentTarget.dataset;

      this[box][attr] = value;

      this.pullDownRefresh();//只是为了刷新页面

    },