可滑动的日历组件
根据现实需求自行调整其他
rili.wxml页面
<!--pages/rili/rili.wxml-->
<view class="rili">
</view>
<view class='month'>
<!-- <view class='arrow' bindtap='prevMonth'>《 </view> -->
<view class="shijian">
<!-- <picker mode="date" value="{
{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange"> -->
<view class="flex">
<view style="color: #1677FF;margin-right: 20rpx;font-weight: bold;">く</view>{
{date}}
</view>
<!-- </picker> -->
<view class="jintian" bindtap="jintian">回今天</view>
</view>
<!-- <view class='arrow' bindtap='nextMonth'> 》</view> -->
</view>
<view class='container'>
<view class='calendar flex column s-center'>
<view class='week-row flex m-around wid100'>
<view class='grid weeks' wx:for="{
{week}}" wx:key='key'>{
{item}}</view>
</view>
<swiper class='swpier-box' circular="true" current="{
{swiperIndex}}" bindchange='swiperChange'>
<swiper-item class='flex m-around days-table '>
<view wx:for="{
{calendar.first}}" wx:for-item='x' wx:key='key'
class='grid fw {
{x.month === month?"":"notCurrent"}} {
{x.date === today?"today":""}} {
{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{
{x.month}}' data-day='{
{x.day}}' data-date='{
{x.date}}' bindtap='bindDayTap'>
<view class='views {
{x.date === today ? "view" :""}} {
{ bindDayTap === x.date ? "view" :""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}}'>
<!-- <view class="weizhi">{
{x.date === today?'今天':x.day}}</view> -->
<view class="weizhi">{
{x.day}}</view>
<view class="tods" wx:if="{
{x.date === today}}">今天</view>
</view>
<!-- <block wx:if="{
{workerClockData.length>0}}">
<view wx:for="{
{workerClockData}}" wx:key="key">
<text class='da' wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{
{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<!-- 当前月 -->
<swiper-item class='flex m-around days-table '>
<view wx:for="{
{calendar.second}}" wx:for-item='x' wx:key='key'
class='grid fw {
{x.month === month?"":"notCurrent"}} {
{x.date === today?"today":""}} {
{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{
{x.month}}' data-day='{
{x.day}}' data-date='{
{x.date}}' data-test='{
{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'>
<view class='views {
{x.date === today || x.date === date+"-05" ? "view" :""}} {
{ bindDayTap === x.date ? "view" :""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} '>
<!-- <view class="weizhi">{
{x.date === today?'今天':x.day}}</view> -->
<view class="weizhi">{
{x.day}}</view>
<view class="tods" wx:if="{
{x.date === today}}">今天</view>
<!-- {
{x.date === today?'今天':x.day}} -->
</view>
<!-- <block wx:if="{
{workerClockData.length>0}}">
<view wx:for="{
{workerClockData}}" wx:key="key">
<text class='da' wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{
{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<swiper-item class='flex m-around days-table'>
<view wx:for="{
{calendar.third}}" wx:for-item='x' wx:key='key'
class='grid fw {
{x.date === today?"today":""}} {
{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{
{x.month}}' data-day='{
{x.day}}' data-date='{
{x.date}}' bindtap='bindDayTap'>
<!-- <view class='view {
{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}{
{x.month === month?"":"notCurrent"}}'>{
{x.date === today?'今天':x.day}}</view> -->
<!-- <view style="color: #1677FF;">{
{date+"-01"}}</view> -->
<!-- <view>1{
{bindDayTap}}</view> -->
<view class='views {
{x.date === date+"-01" ? "view" :""}} {
{ bindDayTap === x.date ? "view" :""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} {
{x.month === month?"":"notCurrent"}}'>
<view class="weizhi">{
{x.day}}</view>
<view class="tods" wx:if="{
{x.date === today}}">今天</view>
</view>
<!-- <block wx:if="{
{workerClockData.length>0}}">
<view wx:for="{
{workerClockData}}" wx:key="key">
<text class='da' wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{
{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{
{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<swiper-item class='flex m-around days-table '>
<view wx:for="{
{calendar.fourth}}" wx:for-item='x' wx:key='key'
class='grid fw {
{x.month === month?"":"notCurrent"}} {
{x.date === today?"today":""}} {
{x.date === beSelectDate ? "choice":