微信小程序日历效果

本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下

源码下载地址

项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k,有问题欢迎指正

如图:

index.wxml

<view class="page">
 <view class="box">
  <view class="box-flex">
   <view class="flex-item">
    <view class="item-content" bindtap="doDay" data-key='left'>
     <view class="glyphicon glyphicon-triangle-left"></view>
    </view>
   </view>
   <view class="flex-item item-content-current-day">
    <view class="item-content">{{currentDate}}</view>
   </view>
   <view class="flex-item">
    <view class="item-content" bindtap="doDay" data-key="right">
     <view class="glyphicon glyphicon-triangle-right"></view>
    </view>
   </view>
  </view>
  <view class="box-flex">
   <view class="flex-item">
    <view class="item-content">一</view>
   </view>
   <view class="flex-item">
    <view class="item-content">二</view>
   </view>
   <view class="flex-item">
    <view class="item-content">三</view>
   </view>
   <view class="flex-item">
    <view class="item-content">四</view>
   </view>
   <view class="flex-item">
    <view class="item-content">五</view>
   </view>
   <view class="flex-item">
    <view class="item-content">六</view>
   </view>
   <view class="flex-item">
    <view class="item-content">日</view>
   </view>
  </view>
  <view class="box-flex">
   <view class="flex-item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
     <view class="item-content" wx:if="{{currentDay != vo}}">{{vo}}</view>
     <view class="item-content bk-color-day" wx:else>{{vo}}</view>
   </view>
  </view>
 </view>
</view>

index.wxss

@import '../../dist/css/icon.wxss';
page {
 background-color: #2a8cef;
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: stretch;
 font-size: 14px;
}

.box {
 display: block;
 margin: 10px;
}

.box-flex {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
}

.flex-item {
 flex-flow: nowrap;
 flex-grow: 1;
 flex-shrink: 1;
 width: 14.2%;
}

.item-content {
 margin: 5px;
 padding: 0 10px;
 text-align: center;
 background-color: #000;
 height: 2rem;
 line-height: 2rem;
 color: #fff;
}

.bk-color-day {
 background-color: #8A2BE2;
}

.item-content-current-day {
 flex-grow: 2;
}

index.js

var app = getApp();
Page({
  data: {
    currentDate: "2017年05月03日",
    dayList: '',
    currentDayList: '',
    currentObj: '',
    currentDay: ''
  },
  onLoad: function (options) {
    var currentObj = this.getCurrentDayString()
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',
      currentDay: currentObj.getDate(),
      currentObj: currentObj
    })
    this.setSchedule(currentObj)
  },
  doDay: function (e) {
    var that = this
    var currentObj = that.data.currentObj
    var Y = currentObj.getFullYear();
    var m = currentObj.getMonth() + 1;
    var d = currentObj.getDate();
    var str = ''
    if (e.currentTarget.dataset.key == 'left') {
      m -= 1
      if (m <= 0) {
        str = (Y - 1) + '/' + 12 + '/' + d
      } else {
        str = Y + '/' + m + '/' + d
      }
    } else {
      m += 1
      if (m <= 12) {
        str = Y + '/' + m + '/' + d
      } else {
        str = (Y + 1) + '/' + 1 + '/' + d
      }
    }
    currentObj = new Date(str)
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',
      currentObj: currentObj
    })
    this.setSchedule(currentObj);
  },
  getCurrentDayString: function () {
    var objDate = this.data.currentObj
    if (objDate != '') {
      return objDate
    } else {
      var c_obj = new Date()
      var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
      return new Date(a)
    }
  },
  setSchedule: function (currentObj) {
    var that = this
    var m = currentObj.getMonth() + 1
    var Y = currentObj.getFullYear()
    var d = currentObj.getDate();
    var dayString = Y + '/' + m + '/' + currentObj.getDate()
    var currentDayNum = new Date(Y, m, 0).getDate()
    var currentDayWeek = currentObj.getUTCDay() + 1
    var result = currentDayWeek - (d % 7 - 1);
    var firstKey = result <= 0 ? 7 + result : result;
    var currentDayList = []
    var f = 0
    for (var i = 0; i < 42; i++) {
      let data =[]
      if (i < firstKey - 1) {
        currentDayList[i] = ''
      } else {
        if (f < currentDayNum) {
          currentDayList[i] = f + 1
          f = currentDayList[i]
        } else if (f >= currentDayNum) {
          currentDayList[i] = ''
        }
      }
    }
    that.setData({
      currentDayList: currentDayList
    })
  }
}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序日历弹窗选择器代码实例

    应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进! 先上一个效果图:(当天日期为2018-4-18) 时间改为5月份的效果图: 直接上代码: wxml: <view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access&qu

  • 微信小程序自定义带价格显示日历效果

    本文实例为大家分享了微信小程序自定义日历效果的具体代码,供大家参考,具体内容如下 JS代码: var Moment = require("../../utils/moment.js"); var DATE_YEAR = new Date().getFullYear(); var DATE_MONTH = new Date().getMonth() + 1; var DATE_DAY = new Date().getDate(); Page({ data: { year: '', mon

  • 微信小程序实现日历效果

    本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果预览: wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'> <view style='width: {{ sysW }}px; heig

  • 微信小程序实现打卡日历功能

    生活中有各种可以打卡的app,例如背单词打卡什么的,本人觉得很有意思,于是本人在大二时做了一款诚信状打卡的微信小程序,这里讲述一下编写的过程. 先说一下开发环境:用的是微信web开发工具开发的,后台采用了Bmob后台,比较方便. 先展示一下成果: 话不多说,直接上代码,里面也有挺多的注释,以防自己忘记,当然各位如果直接复制过去肯定不能有当前的效果,注意后台数据的交互,不过做一个界面还是没有问题的. Calendar.wxml 页面文件 页面上显示出来的东西,布局上主要是一个年月栏.上一个月和下一

  • 微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

  • 微信小程序日历组件使用方法详解

    这个日历采用小程序组件化开发,有兴趣的同学可以引用本组件(怎么引用不多赘述,自行去微信小程序开发api了解) wxml <!--pages/components/calender.wxml--> <view class='calender'> <view class='operate'> <text catchtap='reduce'>减少</text> <text catchtap="add">增加</te

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件,供大家参考,具体内容如下 看网上周日历组件比较少,自己弄了一个,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建calendarWeek文件夹 直接上代码吧: index.wxml <!--components/calendarWeek/index.wxml--> <!-- 日历 --> <view class="date-choose shrink border-bott

  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('

  • 微信小程序自定义可滑动日历界面

    本文实例为大家分享了微信小程序可滑动日历界面的具体代码,供大家参考,具体内容如下 参考某个博主的自定义控件做了一些改动,希望这篇博客能帮助需要的人. WXML <view class='container'> <view class='month flex m-around'> <view class='arrow' bindtap='prevMonth'>< </view> <view class='year-and-month'> &l

  • 微信小程序可滑动月日历组件使用详解

    微信小程序可滑动月日历组件 此日历可进行左右滑动,展示签到打卡信息,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建calendarMonth文件夹 直接上代码吧: index.wxml <!--components/calendar/index.wxml--> <view class='month'> <!-- <view class='arrow' bindtap='prevMonth'><

随机推荐