微信小程序（日历/日期）选择插件

微信小程序日历选择器插件点击日历日期可以获取到年月日

wxml

<view class="canlendarBgView"><view class="canlendarView"><view class="canlendarTopView"><view class="leftBgView" bindtap="handleCalendar" data-handle="prev"><view class="leftView">《</view></view><view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view><view class="rightBgView" bindtap="handleCalendar" data-handle="next"><view class="rightView">》</view></view></view><view class="weekBgView"><view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view></view><view class="dateBgView"><view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}"></view><view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction"><view class="datesView {{index == todayIndex ? 'dateSelectView' : ''}}">{{item}}</view></view></view></view><view>点击日期选择</view>
</view>

wxss

/* pages/calendar/calendar.wxss */.canlendarBgView {flex-grow: 1;display: flex;flex-direction: column;align-items: center;
}.canlendarView {color: #6666CC;display: flex;flex-direction: column;
}.canlendarTopView {height: 80rpx;font-size: 28rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;
}.leftBgView {text-align: right;height: 80rpx;display: flex;flex-direction: row-reverse;
}.leftView {width: 80rpx;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;
}.centerView {width: 50%;height: 80rpx;text-align: center;display: flex;flex-direction: row;align-items: center;justify-content: center;
}.rightBgView {height: 80rpx;display: flex;flex-direction: row;
}.rightView {width: 80rpx;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;
}.weekBgView {height: 50rpx;line-height: 50rpx;opacity: 0.5;display: flex;flex-direction: row;justify-content: center;align-items: center;
}.weekView {flex-grow: 1;text-align: center;font-size: 28rpx;
}.dateBgView {height: 500rpx;display: flex;flex-direction: row;flex-wrap: wrap;
}.dateEmptyView {width: 107.1428571429rpx;color: #fff;display: flex;align-items: center;justify-content: center;
}.dateView {width: 107.1428571429rpx;color: #fff;display: flex;align-items: center;justify-content: center;
}.datesView {width: 60rpx;height: 60rpx;color: #6666CC;font-size: 26rpx;font-weight: 200;display: flex;align-items: center;justify-content: center;
}.dateSelectView {border-radius: 50%;position: relative;left: 0;top: 0;color: #fff;background-color: #6666CC;
}

//index.js
//获取应用实例
Page({data: {hasEmptyGrid: false,cur_year: '',cur_month: '',},onLoad(options) {this.setNowDate();},dateSelectAction: function (e) {var cur_day = e.currentTarget.dataset.idx;this.setData({todayIndex: cur_day})console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);},setNowDate: function () {const date = new Date();const cur_year = date.getFullYear();const cur_month = date.getMonth() + 1;const todayIndex = date.getDate() - 1;console.log(`日期：${todayIndex}`)const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];this.calculateEmptyGrids(cur_year, cur_month);this.calculateDays(cur_year, cur_month);this.setData({cur_year: cur_year,cur_month: cur_month,weeks_ch,todayIndex,})},getThisMonthDays(year, month) {return new Date(year, month, 0).getDate();},getFirstDayOfWeek(year, month) {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(i);}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})}}
})

点击下载：点击打开链接

微信小程序（日历/日期）选择插件相关推荐

微信小程序日历日期选择(单/多)
日历日期选择(单/多) 示例库代码片段
微信小程序日历(酒店入住日期选择)
微信小程序日历(酒店入住日期选择) wxml代码.   <wxs src="../.. ...
适配mpvue平台的的微信小程序日历组件mpvue-calendar
mpvue-calendar 基于vue-calendar的适配mpvue平台的的微信小程序日历组件预览安装 npm i mpvue-calendar 使用 import Calendar fro ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
微信小程序日历加课表项目
最近花了不少时间做了个微信小程序,期间遇到了挺多技术问题的,写个博客记录一下,我先上小程序使用图片! 1.进入小程序首先要登录才能添加行程和查看行程 2.登录成功后 3.首页日历日期是可点击,点击后是 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序日历（公历）
微信小程序日历(公历) 周六加班的时候,突然想看看日历是怎么实现的,就试着写了一下. --------------------------分割线-------------------------- J ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
在微信小程序中,使用wxParse插件解析HTML/md富文本
1. 在微信小程序中,使用wxParse插件解析HTML富文本下载文件 GitHub地址:https://github.com/icindy/wxParse 解压文件,在解压后的文件夹里找到wxPa ...

微信小程序（日历/日期）选择插件

微信小程序（日历/日期）选择插件相关推荐

最新文章

热门文章