微信小程序 自定义带金额的日历组件

 

// component/dateSelect/dateSelect.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    timeData: {
      type: Array,
      value: []
    }
  },
  options: {
    addGlobalClass: true, // 允许使用公用css
  },
  /**
   * 组件的初始数据
   */
  data: {
    dayArr: [], //当月天数
    weekArr: ['日', '一 ', '二', '三', '四', '五', '六'],
    nowMonth: null, //当前月
    imgServer: ImgServer, // 背景图片路径

  },

  /**
   * 组件的方法列表
   */
  methods: {

    /**
     * 获取当前月后的 11个月的月份 
     */
    getMonth: function() {
      let date, newMonth = 0,
        getMonth, getYear, monthArr = [],
        that = this;
      date = new Date();
      getYear = date.getFullYear();
      getMonth = date.getMonth();
      for (let i = 0; i < 12; i++) {
        if (getMonth < 12) {
          getMonth++;
          let monthData = {
            month: that.placeHolder(getMonth),
            year: getYear,
            yearMonth: getYear + '-' + that.placeHolder(getMonth),
            isActive: false
          }
          monthArr.push(monthData)
        } else {
          newMonth++
          let monthData = {
            month: that.placeHolder(newMonth),
            year: getYear + 1,
            yearMonth: getYear + 1 + '-' + that.placeHolder(newMonth),
            isActive: false
          }
          // console.log(monthData)
          monthArr.push(monthData)
        }

      };
      monthArr[0].isActive = true

      // console.log(monthArr)
      this.setData({
        monthArr: monthArr,
        newMonth: parseInt(monthArr[0].month, 10)
      })
      // 计算当前月天数
      this.getday(monthArr[0].year, monthArr[0].month)

      this.getToday();
    },
    /**
     *  获取 选中“月”天数
     */
    getday: function(year, month) {
      let that = this;
      month = parseInt(month, 10);
      let day = new Date(year, month, 0);
      let allDay = day.getDate();
      let dayArr = [];
      for (let i = 1; i < allDay + 1; i++) {
        let date = year + '-' + that.placeHolder(month) + '-' + that.placeHolder(i)
        let dayDatail = {
          date: date, // 完整时间 ‘2019-08-05’
          week: new Date(date).getDay(), //星期几
          day: i, // 几号   
          money: '', // 金额
          isActive: false //是否选中
        }
        dayArr.push(dayDatail)
      }

      /**
       * 占位
       * 功能：将“天”数对应到“星期”下
       */
      let forNum = dayArr[0].week - 0;
      for (let t = 0; t < forNum; t++) {
        let test = {
          date: '',
          week: '',
          day: '',
          money: ''
        }
        dayArr.unshift(test)
      }

      this.setData({
        dayArr: dayArr
      })
      // console.log(dayArr)
      this.mergeFn()
    },
    /**
     * 时间补位  小于10加'0'
     * 
     * 7 ==> '07'
     */
    placeHolder: function(data) {
      if (data < 10) {
        data = '0' + data
        return data
      } else {
        return data.toString()
      }
    },
    /**
     * 
     * 有金额的日期  ----->选择出行日期
     * timeData 接收的参数
     * 合并数据(当前日期匹配的有金额的日期)
     */
    mergeFn: function() {
      let timeData = this.data.timeData
      let dayArr = this.data.dayArr;
      dayArr.forEach(function(item, num) {
        timeData.forEach(function(data, index) {
          if (item.date === data.date) {
            item.money = data.money
          }
        })
      })
      // console.log(dayArr)
      this.setData({
        dayArr: dayArr
      })
    },

    /**
     * 月份点击
     */
    monthClick: function(e) {
      let clickIndex, monthArr;
      clickIndex = e.currentTarget.dataset.index;
      monthArr = this.data.monthArr;
      monthArr.forEach(function(data, index) {
        if (index === clickIndex) {
          data.isActive = true
        } else {
          data.isActive = false
        }
      })
      this.setData({
        monthArr: monthArr,
        newMonth: parseInt(monthArr[clickIndex].month, 10),
      })

      this.getday(monthArr[clickIndex].year, monthArr[clickIndex].month)
    },
    /**
     * 日期点击
     */
    _dayClick: function(e) {
      let clickIndex, dayArr;
      clickIndex = e.currentTarget.dataset.index;
      dayArr = this.data.dayArr;
      // console.log(clickIndex)
      if (dayArr[clickIndex].money) {
        dayArr.forEach(function(data, index) {
          if (index === clickIndex) {
            data.isActive = true
          } else {
            data.isActive = false
          }
        })
        this.setData({
          dayArr: dayArr
        })


        let param = {
          calendarDate: dayArr[clickIndex].date,
          calendarMoney: dayArr[clickIndex].money,
          calendarMonth: dayArr[clickIndex].date.split('-')[1],
          calendarDay: dayArr[clickIndex].date.split('-')[2]
        }

        /**
         * 向父组件传参
         */
        this.triggerEvent('dayClick', param)
      }

    },
    // 获取当前日期
    getToday: function() {
      /**
       * 获取今天的日期，用来区分与其他日期显示的样式
       */
      let date = new Date()
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      let todayDate = year + '-' + this.placeHolder(month + 1) + '-' + this.placeHolder(day);
      /**
       *  区分今年和新的一年
       */
      let newYear = year + 1 + '-01';
      let newYearDate = (year + 1).toString().slice(2) +'年01'
      this.setData({
        todayDate: todayDate,
        newYear: newYear,
        newYearDate: newYearDate
      })
    }

  },

})

子组件.json

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

子组件.wxss

.border-b-f02222{
  border-bottom:  1px solid #f02222
}
.month-img {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  background-size: 60%;
}
.day-box{
  height:70rpx;
}
.width-p-100 {
  width: 100%;
}


.flex-row {
  display: flex;
  flex-direction: row;
}

.align-c {
  align-items: center;
}
.flex-p-20{
  flex:  0 0 20%
}
.fix_font14{
font-size:28rpx
}
.text_c {
  text-align: center;
}
.fix_bgeee {
  background-color: #eee;
}

.fix_bgfff {
  background-color: #fff;
}
.width-p20 {
  width: 20%;
}
.padding-10-0 {
  padding: 20rpx 0;
}

.border-bottom-ec {
  border-bottom: 1px solid #ececec;
}

/* 换行 */

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 右对齐 */

.justify-e {
  justify-content: flex-end;
}
.justify-s{
  justify-self: flex-start
}

/* 左右居中 */

.justify-c {
  justify-content: center;
}

/* 两边 */

.justify-b {
  justify-content: space-between;
}

/* 上下居中 */

.align-c {
  align-items: center;
}

.align-c-stretch {
  align-content: stretch;
}


.flex-g1 {
  flex-grow: 1;
}

.flex-g2 {
  flex-grow: 2;
}

/* 许单个项目有与其他项目不一样的对齐方式 */

.align-end {
  align-self: flex-end;
}
.width-p20 {
  width: 20%;
}
.flex-p-20 {
  flex: 0 0 20%;
}
.text_c {
  text-align: center;
}
.fix_font14 {
  font-size: 28rpx;
}
.padding-10-0 {
  padding: 20rpx 0;
}
.width-p-100 {
  width: 100%;
}
.fix_bgeee {
  background-color: #eee;
}
.fix_clf02222 {
  color: #f02222;
}

子组件.wxml 

<!--component/dateSelect/dateSelect.wxml-->
<!-- 日历选择 -->
<view class="border-bottom-ec fix_bgfff">
  <!-- 月份 -->
  <scroll-view class="width-p-100" scroll-x>
    <view class="flex-row width-p-100 flex-nowrap">
      <view wx:for="{{monthArr}}" wx:key="index" bindtap="monthClick" data-index="{{index}}" class="width-p20 flex-p-20 text_c fix_font14 padding-10-0 {{item.isActive ?'fix_clf02222 border-b-f02222':''}}">
       
        <text wx:if="{{item.yearMonth !== newYear}}"> {{item.month}}月</text>
         <text wx:if="{{item.yearMonth ===newYear}}"> {{newYearDate}}月</text>
      </view>
    </view>
  </scroll-view>
  <!-- 星期 -->
  <view class="flex-row fix_bgeee flex-nowrap">
    <view wx:for="{{weekArr}}" class="flex-g1 text_c fix_font12 padding-10-0 {{index ==0 || index ==weekArr.length-1?'fix_clf02222':''}} " wx:key="index">{{item}}</view>
  </view>
  <view class="flex-row flex-wrap month-img " wx:if="{{newMonth}}" style=" background-image:url('{{imgServer+newMonth}}.png');">
    <view wx:for="{{dayArr}}" wx:key="index" data-index="{{index}}" bindtap="_dayClick" style="flex: 0 0 14.28%;" class="text_c day-box fix_font12 padding-10-0 {{item.money ?'fix_cl1e':'fix_cl888'}} {{item.isActive ?'fix_bgfcd2d3 border-r10':''}}">
      <view wx:if="{{todayDate != item.date}}"> {{item.day}}</view>
      <view wx:if="{{todayDate == item.date}}"> 今天</view>
      <view class="fix_clff9b46 " wx:if="{{item.money}}"> ${{item.money}}</view>
    </view>
  </view>
</view>

 

父组件调用 

父组件.json

{
  "usingComponents": {
    "dateSelect": "./../../../component/dateSelect/dateSelect"
  }
}

父组件 .wxml

<!-- 日历选择 -->
<dateSelect id="dateSelect"  timeData="{{timeData}}" bind:dayClick="_dayClick">

timeDate格式

父组件 .js

/**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    // 获取日历组件
    this.dateSelect = this.selectComponent('#dateSelect')
    this.dateSelect.getMonth()
    
  },

// 日期点击
  _dayClick:function(e){
    this.setData({
      calendarDate: e.detail.calendarDate,
      calendarMoney: e.detail.calendarMoney,
      calendarMonth: e.detail.calendarMonth,
      calendarDay: e.detail.calendarDay,
    })
  },
 

QQ:2468524984

请多指教！！