js文件

'use strict';
let choose_year = null,
  choose_month = null;
const conf = {
  data: {
    hasEmptyGrid: false,
    showPicker: false
  },
  onLoad() {
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const weeks_ch = [ '日', '一', '二', '三', '四', '五', '六' ];
    this.calculateEmptyGrids(cur_year, cur_month);
    this.calculateDays(cur_year, cur_month);
    this.setData({
      cur_year,
      cur_month,
      weeks_ch
    });
  },
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
 
  },
  getFirstDayOfWeek(year, month) {
console.log(new Date(Date.UTC(year, month - 1, 1)).getDay())
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },
  calculateDays(year, month) {
    let days = [];
    const thisMonthDays = this.getThisMonthDays(year, month);
    for (let i = 1; i <= thisMonthDays; i++) {
      days.push({
        day: i,
        choosed: false
      });
    }
    this.setData({
      days
    });
  },
// 顶部年月选择控制函数
  handleCalendar(e) {
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      });
    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      });
    }
  },
  tapDayItem(e) {
    const idx = e.currentTarget.dataset.idx;
    const days = this.data.days;
    days[ idx ].choosed = !days[ idx ].choosed;
    this.setData({
      days,
    });
  },
  chooseYearAndMonth() {
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    let picker_year = [],
      picker_month = [];
    for (let i = 1900; i <= 2100; i++) {
      picker_year.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      picker_month.push(i);
    }
    const idx_year = picker_year.indexOf(cur_year);
    const idx_month = picker_month.indexOf(cur_month);
    this.setData({
      picker_value: [ idx_year, idx_month ],
      picker_year,
      picker_month,
      showPicker: true,
    });
  },
  pickerChange(e) {
    const val = e.detail.value;
    choose_year = this.data.picker_year[val[0]];
    choose_month = this.data.picker_month[val[1]];
  },
  tapPickerBtn(e) {
    const type = e.currentTarget.dataset.type;
    const o = {
      showPicker: false,
    };
    if (type === 'confirm') {
      o.cur_year = choose_year;
      o.cur_month = choose_month;
      this.calculateEmptyGrids(choose_year, choose_month);
      this.calculateDays(choose_year, choose_month);
    }
    
    this.setData(o);
  },
  onShareAppMessage() {
    return {
      title: '小程序日历',
      desc: '还是新鲜的日历哟',
      path: 'pages/index/index'
    };
  }
};
Page(conf);
 
 
 
 
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------

wxml

<view class="flex box box-tb box-align-center">
<view class="calendar pink-color box box-tb">
<view class="top-handle fs28 box box-lr box-align-center box-pack-center">
<view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
<view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
</view>
<view bindtap="chooseYearAndMonth" class="date-area box box-lr box-align-center box-pack-center">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
<view class="next-handle box box-lr box-align-center box-pack-center">》</view>
</view>
</view>
<view class="weeks box box-lr box-pack-center box-align-center">
<view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="week{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="days box box-lr box-wrap">
<view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="day{{index}}" data-idx="{{index}}">
</view>
<view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="days{{index}}" data-idx="{{index}}" bindtap="tapDayItem">
<view class="day {{item.choosed ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item.day}}</view>
</view>
</view>
</view>
</view>
<view wx:if="{{showPicker}}" class="box box-tb">
  <view class="picker-btns box box-lr box-pack-between box-align-center">
    <view class="picker-btn picker-cancel" data-type="cancel" bindtap="tapPickerBtn">取消</view>
    <view class="picker-btn picker-confirm" data-type="confirm" bindtap="tapPickerBtn">确定</view>
  </view>
  <picker-view class="flex" indicator-style="height: 50px;" style="width: 100%; height: 150px;" value="{{picker_value}}" bindchange="pickerChange">
    <picker-view-column>
      <view class="picker-view" wx:key="years{{index}}" wx:for="{{picker_year}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-view" wx:key="months{{index}}" wx:for="{{picker_month}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
  </picker-view>
</view>
 
 
 
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------

wxss

/* pages/calendar/calendar.wxss */
.top-handle {
height: 80rpx;
}
.prev {
text-align: right;
height: 80rpx;
}
.next {
height: 80rpx;
}
.prev-handle {
width: 80rpx;
height: 100%;
}
.next-handle {
width: 80rpx;
height: 100%;
}
.date-area {
width: 50%;
height: 80rpx;
text-align: center;
}
.weeks {
height: 50rpx;
line-height: 50rpx;
opacity: 0.5
}
.week {
text-align: center;
}
.days {
height: 500rpx;
}
.grid {
width: 107.1428571429rpx;
}
.day {
width: 60rpx;
height: 60rpx;
color: #88d2ac;
font-size: 26rpx;
font-weight: 200;
}
.border-radius {
border-radius: 50%;
position: relative;
left: 0;
top: 0;
color: #fff;
}
.pink-bg {
">#ff629a;
}
.purple-bg {
">#b8b8f1;
}
.right-triangle::after {
content: "";
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-left-color: #ff629a;
position: absolute;
right: -22rpx;
top: 18rpx;
}
.left-triangle::before {
content: "";
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-right-color: #ff629a;
position: absolute;
left: -22rpx;
top: 18rpx;
}
.tips {
text-align: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.types {
">#ffedf4;
height: 50rpx;
}
.type-dot {
width: 25rpx;
height: 25rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.type-dot-ymq {
color:#FF7CA0;
">#FF7CA0;
}
.type-dot-ycq {
color: rgb(255, 200, 202);
">rgb(255, 200, 202);
}
.type-dot-aqq {
color: rgb(118, 191, 92);
">rgb(118, 191, 92);
}
.type-dot-yyq {
color: #FF7CA0;
">#FF7CA0;
}
.type-dot-plr {
color: rgb(211, 189, 215);
">rgb(211, 189, 215);
}
.types-desc {
padding: 0 20rpx;
}
.type-name {
margin-top: 50rpx;
margin-bottom: 30rpx;
}
.type-desc {
padding: 0 35rpx;
line-height: 38rpx;
}
.explain {
border-top: 1px solid #eee;
width: 90%;
margin: 20rpx 5% 20rpx 5%;
padding: 20rpx 0;
}
.explain-title {
font-weight: bold;
margin-bottom: 15rpx;
}
.explain-item {
padding: 8rpx 20rpx;
color: #fff;
}
.left-border-radius {
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.right-border-radius {
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.picker-btns {
  height: 120rpx;
  line-height: 120rpx;
  border-bottom: 1rpx solid #FF7CA0;
}
.picker-confirm {
  margin-right: 50rpx;
}
.picker-cancel {
  margin-left: 50rpx;
}
.picker-view {
  color:#FF7CA0;
  text-align: center;
}

微信小程序组件 日历的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  4. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  5. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  6. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  7. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  8. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  9. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

随机推荐

  1. 微信小程序:选项卡页面切换

    一.功能描述 在同一个页面内实现不同展示页面的切换功能,如下图所示 二.代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0 ...

  2. CF1111E Tree 树链剖分,DP

    CF1111E Tree 过年了,洛咕还没爬这次的题,先放个CF的链接吧. 补个LG传送门. 对于每个询问点\(x\),设它的祖先即不能和它放在同一个集合中的点的个数为\(f[x]\),设\(dp[i ...

  3. 程序员,Python 这次彻底上位了!

    在 2018 年底,我们迎来了编程语言的最后一波洗礼.近期 TIOBE 公布了 12 月编程语言排行榜,前三名变为: Java.C.Python. 而在 PYPL 榜单上 Python 在今年 5 月 ...

  4. UWP 轨道视图Orbit View

    先看一下效果吧 这是我的Music Tags App里面的效果图,当然你也可以做的比我的更炫. 其实这个效果的实现来自于控件UWP Community Toolkit的OrbitView,所以大家要多 ...

  5. $.post(url,[data],[callback],'json')

    $.post(url,[data],[callback],'json')这个写法来做到用post方法传递数据,并取加回json型数据.如果我要取回的数据类型是xml的,就可以写成$.post(url, ...

  6. 接口自动化学习--mock

    好久没有写学习的总结,都正月十二了,但还是要来个新年快乐鸭. 一直都在看imooc的一套java接口自动化实战课程,现在看到了尾部了,然后想到之前那些testng,mock,httpclient等都没 ...

  7. Harbor 学习分享系列4 - Harbor常用功能实验

    前言 本文为Harbor技术分享系列的第4部分也是初级部分的完结篇,下个阶段作者将会进阶分享,更多详细的内容将会将会在文中介绍. 云盘链接 链接:https://pan.baidu.com/s/1PT ...

  8. python3之三级菜单

    city = { "江苏省": { "南京市": { "栖霞区": ["aa", "bb"], &q ...

  9. Yii2 输出图片相关

    http://www.yiichina.com/doc/api/2.0/yii-web-response#$format-detail https://segmentfault.com/q/10100 ...

  10. Nginx 使用(server参数配置)

    文件地址nginx/conf/Nginx.conf 文件地址;nginx/conf/Nginx.conf [java] view plain copy server {# 服务名及配置,一个服务下可以 ...