微信小程序 选择学期控件 自定义datePicker组件 不复杂

我的时间选择组件在common文件夹里

datePicker组件代码

javascript 复制代码
html:
<view class="date_bg_view">
</view>
<view class="date_content">
  <view class="date_title">
    <image src="/image/icon_close_black.png" class="close" bindtap="onClose"></image>
    <text class="date_title_txt">选择时间</text>
  </view>
  <view class="line"></view>
  <!-- 快速选择 -->
  <view class="date_quick_choose">
    <text class="date_quick_txt">快速选择</text>
    <view class="date_quick_show">
      <view class="{{item.flag ? 'quick_cell_flag' : 'quick_cell'}}" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-index="{{index}}">
        {{item.name}}
      </view>
    </view>
  </view>
  <!-- 自定义时间 -->
  <view class="date_quick_choose">
    <text class="date_quick_txt">自定义时间</text>
    <view class="date_picker">
      <picker mode="date" value="{{startDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="1"  mask-style=" color='#0A3E79'">
        <view class="picker">
        {{startDate?startDate:'开始时间'}}
        </view>
      </picker> 
      <text style="width: 20rpx;height: 1rpx;background-color: #999;"></text>
      <picker mode="date" value="{{endDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange"  data-type="2">
        <view class="picker">
          {{endDate?endDate:'结束时间'}}
        </view>
      </picker>
    </view>
  </view>
  <button class="sure_btn" bindtap="handleSure"> 确定 </button>
</view>

css:
.date_bg_view{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;  
}
.date_content{  
  position: fixed;
  bottom: 0;  
  left: 0;  
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 75%;
  background-color: #fff;      
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}
.date_title{
  z-index: 11;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 90rpx;
  line-height: 90rpx;
}
.close{  
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 30rpx;
  height: 30rpx;
}
.date_title_txt{
  font-size: 35rpx;
  font-weight: bold;
}
.line{
  margin: 10rpx;
  width: 100%;  
  height: 1rpx;
  background-color: #eee;
}
.date_quick_choose{
  z-index: 11;
  padding: 20rpx;
  width: 100%;  
}
.date_quick_txt{
  z-index: 12;
  margin: 20rpx;    
  font-size: 30rpx;
  color: #666;  
}
.date_quick_show{
  z-index: 12;  
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;  
  width: 100%;  
}
.quick_cell{
  z-index: 12;
  margin: 2%;
  padding: 5rpx;
  width: 29%;  
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;      
  font-size: 28rpx;
  background-color: #F7F7F7;
  color: #999;
  border: 1rpx solid #F7F7F7;
  border-radius: 10rpx;
}
.quick_cell_flag{
  z-index: 12;
  margin: 2%;
  padding: 5rpx;
  width: 29%;  
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  text-align: center;      
  background-color: #fff;
  color: #19b2ff;
  border: 1rpx solid #19b2ff;
  border-radius: 10rpx;
}
.date_picker{  
  margin-top: 30rpx;
  margin-left: 10%;
  display: flex;    
  justify-content: space-between;
  align-items: center;
  width: 80%;
}
.picker{  
  padding: 10rpx 40rpx;
  background-color: #fff;
  font-size: 30rpx;
  color: #19b2ff;
  font-weight: bold;
}
.sure_btn{
  margin-top: 80rpx;  
  font-size: 28rpx;
  width: 90%;    
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #19b2ff;
  color: #fff;  
}


js:

const util = require('../../utils/util.js');
import {
  formatDate
} from "../../utils/date";
const app = getApp();
Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      var currentDate = new Date();

      // 获取当前年份和月份
      var currentYear = currentDate.getFullYear();
    
      // 计算五年内的上学期和下学期
      var semesters = [];
      for (var i = 0; i < 5; i++) {
        var years = currentYear - i;
        semesters.push({
          name: years + '下半学年',
          dates: [years + '-09-01', (years + 1) + '-01-31'],
          flag: false
        });     
        semesters.push({
          name: years + '上半学年',
          dates: [years + '-02-01', years + '-06-30'],
          flag: false
        });        
      }

      // 输出结果
      this.setData({
        dateList: semesters
      })
    },

  },
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    dateList: [],
    startDate: '',
    endDate: '',
    currentTime: formatDate(new Date()),
    oidx: null,
  },

  methods: {
    /**
     * 快速选择
     * @param {*} e 
     */
    handleQuickChoose(e) {
      let that = this;
      let oidx = e.currentTarget.dataset.index;
      let odateList = that.data.dateList
      
      // 遍历数组,并修改flag属性为false
      odateList.forEach(item => {
        item.flag = false;
      });
      odateList[oidx].flag = true
      that.setData({
        startDate: odateList[oidx].dates[0],
        endDate: odateList[oidx].dates[1],
        oidx,
        dateList: odateList
      })      
    },
    bindDateChange(e) {
      //console.log('picker发送选择改变,携带值为', e)
      let that = this;
      let type = e.currentTarget.dataset.type
      if (type == 1) {
        that.setData({
          startDate: e.detail.value
        })
      } else {
        that.setData({
          endDate: e.detail.value
        })
      }
    },
    /**
     * 顶部关闭按钮
     */
    onClose() {
      this.triggerEvent('sync', {
        show: false
      })
    },

    /**
     * 确定
     */
    handleSure() {
      let that = this;
      if (!that.data.startDate || !that.data.endDate) {
        util.alert('学期选择不能为空!');
        return false;
      }
      if (that.data.startDate <= that.data.endDate) {
        that.triggerEvent('sync', {
          show: false,
          startDate: that.data.startDate,
          endDate: that.data.endDate
        })
      } else {
        util.alert('结束时间不能小于开始时间');
        return false;
      }

    }
  },

})


json:
{
  "component": true,
  "usingComponents": {}
}

调用的页面:

javascript 复制代码
json:
"usingComponents": {
  "datePicker":"../../common/datePicker/index"
},


html:
      <view class="check-list">
        <view class="check-list-lef">学期选择</view>
        <view class="check-list-rig">
          <view class="picker" bind:tap="openDatePicker">{{ startDate && endDate ? (startDate + ' - ' + endDate) : '请选择学期'}}</view>
          <!-- 时间选择组件 bind:sync 子类回传数据的方法-->
          <datePicker wx:if="{{show}}" bind:sync="syncGetDate"></datePicker>                    
        </view>
      </view>


js:
data:{
  startDate: '',
  endDate: '',
  show: false,//显示隐藏时间控件
}

  openDatePicker(e) {
    this.setData({
      hiddenChart: true,
      show:true
    })
  },
  syncGetDate(e){
    let that = this;
    let show = e.detail.show; 
    if(!show){ // 子组件点击了关闭   关闭弹窗
      that.setData({
        show:false,
        startDate: e.detail.startDate,
        endDate: e.detail.endDate,
        //hiddenChart: false,
      })
    }
    //console.log("子组件:",e);    
    //this.getStatisticThemeActivitiesTrend()
  },
相关推荐
丁总学Java9 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域10 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86810 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650211 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦18 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac21 小时前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序