微信小程序日历插件
2020-04-18 本文已影响0人
龟仙人_9103
日历插件效果
jccke-gvf2i.gif
一、添加触发事件
<view class="lan">
<view class="title">选择日期</view>
<view class="datebox">
<!--<picker mode="date" value="{{selectdate}}" start="{{datestart}}" end="{{dateend}}" bindchange="changeDate">-->
<view class="tui-picker-detail" bindtap="showpickerDate">
{{selectdate}}
</view>
<!--</picker>-->
</view>
</view>
二、引入日历插件
<calendar-halfScreenDialog
bindbuttontap="buttontap"
show="{{show}}"
title="请选择服务日期"
list="{{datelist}}">
</calendar-halfScreenDialog>
三、文件index.json
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "预约服务时间",
"usingComponents": {
"calendar-halfScreenDialog": "miniprogram_npm/weui-miniprogram/calendar/calendar"
}
}
四、具体插件代码
calendar.js
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 17);
/******/ })
/************************************************************************/
/******/ ({
/***/ 17:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Component({
options: {
multipleSlots: true,
addGlobalClass: true
},
properties: {
closabled: {
type: Boolean,
value: true
},
title: {
type: String,
value: ''
},
list:{
type:Array,
value:[]
},
subTitle: {
type: String,
value: ''
},
extClass: {
type: String,
value: ''
},
desc: {
type: String,
value: ''
},
tips: {
type: String,
value: ''
},
maskClosable: {
type: Boolean,
value: true
},
mask: {
type: Boolean,
value: true
},
show: {
type: Boolean,
value: false,
observer: '_showChange'
},
buttons: {
type: Array,
value: []
}
},
observers:{
'list':function (list){
var monthArr = [];
var last_month = "";
var weekDay = [];
var i = 0;
for(var key=0 ; key<list.length;key++){
var itemData = list[key];
var idate = itemData.date;
var month = this._getMonth(idate);//截取month
if (last_month === ""){
last_month = month;
}
var item = {};
var dayItem = {
"value": idate,
"week": this._getWeek(idate),//星期
"date": this._getDate(idate),//日期
"status": itemData.status,
"isable": itemData.status == "" ? "font-able" :"font-disable"
};
for (; i < 7; i++) {
if ((i + 1) == dayItem.week && last_month == month ) {
weekDay[i] = dayItem;
i++;
break;
} else{
weekDay[i] = {
"week": i+1,//星期
"date": "",//日期
"status": ""
}
}
}
if (last_month != month){
//跨月了
key--;//键值返回一；
}
if (key == (list.length-1) && weekDay.length < 7 ){
//最后一个星期没有满
for (; i < 7; i++) {
weekDay[i] = {
"week": i + 1,//星期
"date": "",//日期
"status": ""
}
}
}
if (weekDay.length < 7 ){
continue;
}
// console.log(weekDay)
// i = 0;
// weekDay = [];
// continue
//满7天
if (monthArr.length == 0 ) {
//跨月或者第一个月份
item = {
"mouth": last_month,
"dates": []
};
item.dates.push(weekDay);
monthArr.push(item);
}else{
item = monthArr[monthArr.length - 1];
item.dates.push(weekDay);
if (last_month != month) {
item = {
"mouth": month,
"dates": []
};
monthArr.push(item);
}
}
if (last_month != month) {
last_month = month;
}
//满7天 重置 参数
i = 0;
weekDay = [];
}
console.log(monthArr)
this.setData({
monthArr: monthArr
})
}
},
methods: {
_getMonth:function(date){
var d = new Date(date);
var m = d.getMonth() + 1;
var year = d.getFullYear();
if(m<10){
m = "0"+m;
}
return year +"年"+m+"月";
},
_getWeek:function (date){
//当前日期的星期
var d = new Date(date);
var w = d.getDay()
return w==0?7:w;
},
_getDate: function (date) {
//当前日期
var d = new Date(date);
return d.getDate();
},
close: function close(e) {
var type = e.currentTarget.dataset.type;
if (this.data.maskClosable || type === 'close') {
this.setData({
show: false
});
this.triggerEvent('close');
}
},
buttonTap: function buttonTap(e) {
if (e.currentTarget.dataset.isable == "") {
this.triggerEvent('buttontap', { value: e.currentTarget.dataset.value }, {});
}
}
}
});
/***/ })
/******/ });
calendar.json
{
"component": true,
"usingComponents": {}
}
calendar.wxxml
<view class="{{show ? 'weui-show' :'weui-hidden'}}">
<view class="weui-mask init" wx:if="{{mask}}" bindtap="close" data-type="tap"></view>
<view class="weui-half-screen-dialog {{extClass}}">
<view class="weui-half-screen-dialog__hd">
<view class="weui-half-screen-dialog__hd__side">
<view class="weui-icon-btn weui-icon-btn_clock">tip图片</view>
</view>
<view class="weui-half-screen-dialog__hd__main">
<block wx:if="{{title}}">
<text class="weui-half-screen-dialog__title">{{title}}</text>
<text class="weui-half-screen-dialog__subtitle">{{subTitle}}</text>
</block>
<block wx:else>
<view class="weui-half-screen-dialog__title"><slot name="title"></slot></view>
</block>
</view>
<view wx:if="{{closabled}}" class="weui-half-screen-dialog__hd__side" bindtap="close" data-type="close">
<view class="weui-icon-btn weui-icon-btn_close">关闭</view>
</view>
</view>
<view class="weui-half-screen-dialog__bd">
<block wx:if="{{title}}">
<view class="weui-half-screen-dialog__desc">
</view>
<view class="weui-half-screen-dialog__tips">
<view class="weui-flex">
<view class="weui-flex__item justify">一</view>
<view class="weui-flex__item justify">二</view>
<view class="weui-flex__item justify">三</view>
<view class="weui-flex__item justify">四</view>
<view class="weui-flex__item justify">五</view>
<view class="weui-flex__item justify">六</view>
<view class="weui-flex__item justify">日</view>
</view>
<scroll-view scroll-y="true" style="height: 500rpx;">
<view wx:for="{{monthArr}}">
<view class="weui-cell" style="padding:20px 0px 8px">
<view class="weui-flex__item justify" >{{item.mouth}}</view>
</view>
<view wx:for="{{item.dates}}" class="weui-cells">
<view class="weui-cell" style="padding: 0">
<view wx:for="{{item}}" bindtap="buttonTap" data-value="{{item.value}}" data-isable="{{item.status}}" class="weui-flex__item justify {{item.isable}}" style="align-self: flex-start;">
{{item.date}}
<view class="date-status">{{item.status}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</block>
<slot name="desc" wx:else></slot>
</view>
<view class="weui-half-screen-dialog__ft">
</view>
</view>
</view>
calendar.wxss
@import "../../../../../../../cssbase/weui/weui-cell.wxss";
@import "../../../../../../../cssbase/weui/weui-flex.wxss";
.weui-icon-btn_clock{
width: 15px;
height: 15px;
background-image:url("data: image/svg+xml,%3Csvg%20t%3D%221581599024366%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222018%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M544%20224h-64v288c0%208.832%203.584%2016.832%209.376%2022.656l192%20191.968%2045.248-45.248L544%20498.752V224z%22%20fill%3D%22%23181818%22%20p-id%3D%222019%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M512%20896C300.256%20896%20128%20723.744%20128%20512S300.256%20128%20512%20128s384%20172.256%20384%20384-172.256%20384-384%20384m0-832C264.576%2064%2064%20264.576%2064%20512s200.576%20448%20448%20448%20448-200.576%20448-448S759.424%2064%20512%2064%22%20fill%3D%22%23181818%22%20p-id%3D%222020%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
.justify{justify-content: center;text-align: center;}
.align{align-items: center;}
.weui-half-screen-dialog{position:fixed;left:0;right:0;bottom:0;max-height:75%;z-index:5000;line-height:1.4;background-color:#FFFFFF;border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden;padding:0 18px;padding:0 calc(18px + constant(safe-area-inset-right)) constant(safe-area-inset-bottom) calc(18px + constant(safe-area-inset-left));padding:0 calc(18px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(18px + env(safe-area-inset-left))
}
.weui-half-screen-dialog__hd{font-size:8px;height:7em;display:flex;align-items:center}
.weui-half-screen-dialog__hd .weui-icon-btn{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.weui-half-screen-dialog__hd__side{position:relative;left:-8px}.weui-half-screen-dialog__hd__main{flex:1}.weui-half-screen-dialog__hd__side+.weui-half-screen-dialog__hd__main{text-align:left;padding:0 15px}
.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side{right:-8px;left:auto}.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-icon-btn{right:0}
.weui-half-screen-dialog__title{display:block;color:rgba(0,0,0,0.9);/*font-weight:700;*/font-size:15px}
.weui-half-screen-dialog__subtitle{display:block;color:rgba(0,0,0,0.5);font-size:10px}.weui-half-screen-dialog__bd{word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;overflow-y:auto}.weui-half-screen-dialog__desc{padding-top:4px;font-size:17px;font-weight:700;color:rgba(0,0,0,0.9);line-height:1.4}.weui-half-screen-dialog__tips{font-size:14px;color:rgba(0,0,0,0.3);line-height:1.4}
.weui-half-screen-dialog__ft{
padding:15px 24px;text-align:center
}
.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2),.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2)+.weui-btn{display:inline-block;vertical-align:top;margin:0 8px;width:120px}.weui-icon-btn{background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:100%;border:0;outline:0;font-size:0}.weui-icon-btn_goback{width:12px;height:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E %3Cpath fill='%23000' fill-opacity='.9' d='M26 39.438L24.955 40.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42l7.666-7.79L26 24.563 18.682 32 26 39.438z'/%3E %3C/g%3E%3C/svg%3E")}
.weui-icon-btn_close{
width:15px;
height:15px;
background-image:url("data:image/svg+xml,%3Csvg%20t%3D%221581600640142%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222324%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M512%20896C299.936%20896%20128%20724.064%20128%20512S299.936%20128%20512%20128s384%20171.936%20384%20384-171.936%20384-384%20384m0-832C264.96%2064%2064%20264.96%2064%20512s200.96%20448%20448%20448%20448-200.96%20448-448S759.04%2064%20512%2064%22%20fill%3D%22%232c2c2c%22%20p-id%3D%222325%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M665.376%20313.376L512%20466.752l-153.376-153.376-45.248%2045.248L466.752%20512l-153.376%20153.376%2045.248%2045.248L512%20557.248l153.376%20153.376%2045.248-45.248L557.248%20512l153.376-153.376z%22%20fill%3D%22%232c2c2c%22%20p-id%3D%222326%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
.weui-icon-btn_more{width:24px;height:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-374 -20)'%3E %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E %3Cpath fill='%23000' fill-opacity='.9' d='M380.75 32a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zm5.25-1.75a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E %3C/g%3E%3C/svg%3E")}.weui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.6)}.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}.weui-mask,.weui-half-screen-dialog{transition:all .3s}.weui-hidden .weui-mask{visibility:hidden;opacity:0}.weui-hidden .weui-half-screen-dialog{transform:translateY(100%)}.weui-show .weui-mask{opacity:1;visibility:visible}.weui-show .weui-half-screen-dialog{transform:translateY(0%)}
.weui-cells:after{
border-bottom:0rpx
}
.weui-cells::before{
border-top:0rpx
}
.date-status{
font-size: 12px;
}
.date-lebal{
flex-direction: row-reverse;
display: flex
}
.font-disable{
}
.font-able, .font-able .date-status{
color: #000;
}
