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

// component/dateSelect/dateSelect.jsComponent({/*** 组件的属性列表*/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' + datareturn data} else {return data.toString()}},/*** * 有金额的日期  ----->选择出行日期* timeData 接收的参数* 合并数据(当前日期匹配的有金额的日期)*/mergeFn: function() {let timeData = this.data.timeDatalet 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

请多指教！！

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

微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序Vant Weapp里面Calendar 日历组件不显示的问题
想用Vant Weapp弄个弹出日历选择日期的组件,但是发现按照Vant Weapp里面的文档复制粘贴就翻车了. 复制粘贴后小程序界面空空如也,啥都没有. 百度了一番也没有帖子写这个问题,然后我就只能 ...
微信小程序自定义canvas手写签名组件
需求如下图展示,因为小程序中有好几个地方使用签名,所以做成组件. 1.创建组件 signature.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序自定义封装环形进度条组件
我们先看效果-选不了视频没办法了说明:此组件对圆的宽度,进度条的宽度.颜色.旋转方向,还有进度条的值,还有两端是否要圆角都进行了动态化,无坑可放心用,参数解释在注释里,我就不写了 .效果图看到尾部的 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏与自带下拉刷新冲突
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求.而问题就一而再 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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