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

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

    datePicker组件代码

    1. html:
    2. <view class="date_bg_view">
    3. view>
    4. <view class="date_content">
    5.   <view class="date_title">
    6.     <image src="/image/icon_close_black.png" class="close" bindtap="onClose">image>
    7.     <text class="date_title_txt">选择时间text>
    8.   view>
    9.   <view class="line">view>
    10.   
    11.   <view class="date_quick_choose">
    12.     <text class="date_quick_txt">快速选择text>
    13.     <view class="date_quick_show">
    14.       <view class="{{item.flag ? 'quick_cell_flag' : 'quick_cell'}}" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-index="{{index}}">
    15.         {{item.name}}
    16.       view>
    17.     view>
    18.   view>
    19.   
    20.   <view class="date_quick_choose">
    21.     <text class="date_quick_txt">自定义时间text>
    22.     <view class="date_picker">
    23.       <picker mode="date" value="{{startDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="1"  mask-style=" color='#0A3E79'">
    24.         <view class="picker">
    25.         {{startDate?startDate:'开始时间'}}
    26.         view>
    27.       picker> 
    28.       <text style="width: 20rpx;height: 1rpx;background-color: #999;">text>
    29.       <picker mode="date" value="{{endDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange"  data-type="2">
    30.         <view class="picker">
    31.           {{endDate?endDate:'结束时间'}}
    32.         view>
    33.       picker>
    34.     view>
    35.   view>
    36.   <button class="sure_btn" bindtap="handleSure"> 确定 button>
    37. view>
    38.  
    39. css:
    40. .date_bg_view{
    41.   position: absolute;
    42.   top: 0;
    43.   left: 0;
    44.   z-index: 10;
    45.   width: 100%;
    46.   height: 100%;
    47.   background-color: #000;
    48.   opacity: 0.3;  
    49. }
    50. .date_content{  
    51.   position: fixed;
    52.   bottom: 0;  
    53.   left: 0;  
    54.   z-index: 11;
    55.   display: flex;
    56.   flex-direction: column;
    57.   justify-content: flex-start;
    58.   align-items: flex-start;
    59.   width: 100%;
    60.   height: 75%;
    61.   background-color: #fff;      
    62.   border-top-left-radius: 20rpx;
    63.   border-top-right-radius: 20rpx;
    64. }
    65. .date_title{
    66.   z-index: 11;
    67.   width: 100%;
    68.   display: flex;
    69.   justify-content: center;
    70.   height: 90rpx;
    71.   line-height: 90rpx;
    72. }
    73. .close{  
    74.   position: absolute;
    75.   top: 20rpx;
    76.   right: 20rpx;
    77.   width: 30rpx;
    78.   height: 30rpx;
    79. }
    80. .date_title_txt{
    81.   font-size: 35rpx;
    82.   font-weight: bold;
    83. }
    84. .line{
    85.   margin: 10rpx;
    86.   width: 100%;  
    87.   height: 1rpx;
    88.   background-color: #eee;
    89. }
    90. .date_quick_choose{
    91.   z-index: 11;
    92.   padding: 20rpx;
    93.   width: 100%;  
    94. }
    95. .date_quick_txt{
    96.   z-index: 12;
    97.   margin: 20rpx;    
    98.   font-size: 30rpx;
    99.   color: #666;  
    100. }
    101. .date_quick_show{
    102.   z-index: 12;  
    103.   display: flex;
    104.   justify-content: flex-start;
    105.   flex-wrap: wrap;
    106.   flex-direction: row;
    107.   align-items: center;  
    108.   width: 100%;  
    109. }
    110. .quick_cell{
    111.   z-index: 12;
    112.   margin: 2%;
    113.   padding: 5rpx;
    114.   width: 29%;  
    115.   height: 60rpx;
    116.   text-align: center;
    117.   line-height: 60rpx;      
    118.   font-size: 28rpx;
    119.   background-color: #F7F7F7;
    120.   color: #999;
    121.   border: 1rpx solid #F7F7F7;
    122.   border-radius: 10rpx;
    123. }
    124. .quick_cell_flag{
    125.   z-index: 12;
    126.   margin: 2%;
    127.   padding: 5rpx;
    128.   width: 29%;  
    129.   height: 60rpx;
    130.   line-height: 60rpx;
    131.   font-size: 28rpx;
    132.   text-align: center;      
    133.   background-color: #fff;
    134.   color: #19b2ff;
    135.   border: 1rpx solid #19b2ff;
    136.   border-radius: 10rpx;
    137. }
    138. .date_picker{  
    139.   margin-top: 30rpx;
    140.   margin-left: 10%;
    141.   display: flex;    
    142.   justify-content: space-between;
    143.   align-items: center;
    144.   width: 80%;
    145. }
    146. .picker{  
    147.   padding: 10rpx 40rpx;
    148.   background-color: #fff;
    149.   font-size: 30rpx;
    150.   color: #19b2ff;
    151.   font-weight: bold;
    152. }
    153. .sure_btn{
    154.   margin-top: 80rpx;  
    155.   font-size: 28rpx;
    156.   width: 90%;    
    157.   height: 80rpx;
    158.   text-align: center;
    159.   line-height: 80rpx;
    160.   background-color: #19b2ff;
    161.   color: #fff;  
    162. }
    163.  
    164.  
    165. js:
    166.  
    167. const util = require('../../utils/util.js');
    168. import {
    169.   formatDate
    170. } from "../../utils/date";
    171. const app = getApp();
    172. Component({
    173.   lifetimes: {
    174.     attached: function () {
    175.       // 在组件实例进入页面节点树时执行
    176.       var currentDate = new Date();
    177.  
    178.       // 获取当前年份和月份
    179.       var currentYear = currentDate.getFullYear();
    180.     
    181.       // 计算五年内的上学期和下学期
    182.       var semesters = [];
    183.       for (var i = 0; i < 5; i++) {
    184.         var years = currentYear - i;
    185.         semesters.push({
    186.           name: years + '下半学年',
    187.           dates: [years + '-09-01', (years + 1) + '-01-31'],
    188.           flag: false
    189.         });     
    190.         semesters.push({
    191.           name: years + '上半学年',
    192.           dates: [years + '-02-01', years + '-06-30'],
    193.           flag: false
    194.         });        
    195.       }
    196.  
    197.       // 输出结果
    198.       this.setData({
    199.         dateList: semesters
    200.       })
    201.     },
    202.  
    203.   },
    204.   properties: {},
    205.  
    206.   /**
    207.    * 组件的初始数据
    208.    */
    209.   data: {
    210.     dateList: [],
    211.     startDate: '',
    212.     endDate: '',
    213.     currentTime: formatDate(new Date()),
    214.     oidx: null,
    215.   },
    216.  
    217.   methods: {
    218.     /**
    219.      * 快速选择
    220.      * @param {*} e 
    221.      */
    222.     handleQuickChoose(e) {
    223.       let that = this;
    224.       let oidx = e.currentTarget.dataset.index;
    225.       let odateList = that.data.dateList
    226.       
    227.       // 遍历数组，并修改flag属性为false
    228.       odateList.forEach(item => {
    229.         item.flag = false;
    230.       });
    231.       odateList[oidx].flag = true
    232.       that.setData({
    233.         startDate: odateList[oidx].dates[0],
    234.         endDate: odateList[oidx].dates[1],
    235.         oidx,
    236.         dateList: odateList
    237.       })      
    238.     },
    239.     bindDateChange(e) {
    240.       //console.log('picker发送选择改变，携带值为', e)
    241.       let that = this;
    242.       let type = e.currentTarget.dataset.type
    243.       if (type == 1) {
    244.         that.setData({
    245.           startDate: e.detail.value
    246.         })
    247.       } else {
    248.         that.setData({
    249.           endDate: e.detail.value
    250.         })
    251.       }
    252.     },
    253.     /**
    254.      * 顶部关闭按钮
    255.      */
    256.     onClose() {
    257.       this.triggerEvent('sync', {
    258.         show: false
    259.       })
    260.     },
    261.  
    262.     /**
    263.      * 确定
    264.      */
    265.     handleSure() {
    266.       let that = this;
    267.       if (!that.data.startDate || !that.data.endDate) {
    268.         util.alert('学期选择不能为空！');
    269.         return false;
    270.       }
    271.       if (that.data.startDate <= that.data.endDate) {
    272.         that.triggerEvent('sync', {
    273.           show: false,
    274.           startDate: that.data.startDate,
    275.           endDate: that.data.endDate
    276.         })
    277.       } else {
    278.         util.alert('结束时间不能小于开始时间');
    279.         return false;
    280.       }
    281.  
    282.     }
    283.   },
    284.  
    285. })
    286.  
    287.  
    288. json:
    289. {
    290.   "component": true,
    291.   "usingComponents": {}
    292. }

    调用的页面：

    1. json:
    2. "usingComponents": {
    3.   "datePicker":"../../common/datePicker/index"
    4. },
    5.  
    6.  
    7. html:
    8.       <view class="check-list">
    9.         <view class="check-list-lef">学期选择view>
    10.         <view class="check-list-rig">
    11.           <view class="picker" bind:tap="openDatePicker">{{ startDate && endDate ? (startDate + ' - ' + endDate) : '请选择学期'}}view>
    12.           
    13.           <datePicker wx:if="{{show}}" bind:sync="syncGetDate">datePicker>                    
    14.         view>
    15.       view>
    16.  
    17.  
    18. js:
    19. data:{
    20.   startDate: '',
    21.   endDate: '',
    22.   show: false,//显示隐藏时间控件
    23. }
    24.  
    25.   openDatePicker(e) {
    26.     this.setData({
    27.       hiddenChart: true,
    28.       show:true
    29.     })
    30.   },
    31.   syncGetDate(e){
    32.     let that = this;
    33.     let show = e.detail.show; 
    34.     if(!show){ // 子组件点击了关闭   关闭弹窗
    35.       that.setData({
    36.         show:false,
    37.         startDate: e.detail.startDate,
    38.         endDate: e.detail.endDate,
    39.         //hiddenChart: false,
    40.       })
    41.     }
    42.     //console.log("子组件：",e);    
    43.     //this.getStatisticThemeActivitiesTrend()
    44.   },

  • 相关阅读:
    QFontDialog开发详解
    全面解析缓存应用经典问题
    基于AOP的动态数据源切换（附源码）
    python 协程 （概念+示例代码）
    使用腾讯云 Cloud studio 实现调度百度AI实现文字识别
    【无需卸载，丝滑关闭奇安信天擎开机自启动（步骤超简单）】
    考研机试题
    MySQL数据库基础（数据类型与表操作）
    vs2017 配置 opencv
    场景应用：用SpringBoot手写一个登录拦截器
  • 原文地址：https://blog.csdn.net/qq_27806371/article/details/132639937