微信小程序实现点击左右按钮切换时间与DatetimePicker 时间选择组件相结合

本文链接：https://blog.youkuaiyun.com/weixin_46031235/article/details/112982291

该博客介绍了如何在小程序中结合左右按钮和DatetimePicker组件实现时间选择，并根据选择时间动态加载数据。用户可以通过点击按钮切换日期，或者通过弹出的DatetimePicker选择日期，然后更新显示的数据。数据分为上午和下午两部分，根据所选日期从后台接口获取并展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序实现左右按钮切换时间和DatetimePicker 时间选择组件相结合使用

主要功能的实现思路就是将我们的正常时间转成时间戳，在时间戳的基础上加一天(减一天)，然后再转换成正常的时间

WXML

<view>
 <view>
      //前一天
      <view bindtap="leftbtn"><image src="/pages/img/image/jiankuohao-zuo.png"></image></view>
      <view bindtap="showPopup">{
   {
   date}}</view>
      //后一天
      <view  bindtap="rightbtn"><image src="/pages/img/image/jiankuohao.png"></image></view>
 </view>
     //底部弹出层
  <van-popup  show="{
   { show }}"
             position="bottom"
             custom-style="height: 40%;"
             bind:close="onClose">
     //DatetimePicker 时间选择组件
  <van-datetime-picker
           title="选择年月日"
           type="datetime"
   		   value="{
   { currentDate }}"
  		   min-date="{
   { minDate }}"
           max-date="{
   { maxDate }}"
           bind:input="onInput"
           bind:confirm="sure" //确定按钮
/>
</van-popup>

<view class="bottom_content" >
    <view>
      <view class="morning">上午</view>
     <view class="big_box">
      <!-- <van-empty description="暂无数据" wx:if="{
   {empty}}"  /> -->
      <view   wx:for="{
   {morninglist}}"  wx:key="id"  class="list_item" bindtap="morningitem" data-item="{
   {item}}"  data-id="{
   {item.user_id}}">
       
          <view>{
   {
   item.truename}}</view>
          <view class="list_content">
            <view wx:if="{
   {item.sex=='1'}}">男</view>
            <view wx:elif="{
   {item.sex=='2'}}">女</view>
          <view>{
   {
   item.age}}</view>
          </view>
      </view>      
     </view>
  </view>

<!-- ====================================================================== -->
    <view>
      <view class="afternoon">下午</view>
      <view class="big_box">
        <!-- <van-empty description="暂无数据" wx: