微信小程序 选择学期控件 自定义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()
  },
相关推荐
耶啵奶膘3 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡6 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼9 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857512 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027712 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__18 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收