小程序 日历 上下滚动

image.png

image.png

小程序选择时间段

wxml

<view class="calendar">
    <view class="date-box">
        <view class="date-box-hd gap-line">
            <text>日</text>
            <text>一</text>
            <text>二</text>
            <text>三</text>
            <text>四</text>
            <text>五</text>
            <text>六</text>
        </view>
    <view class="date-box-con">
            <view class="month" wx:for="{{ calendars }}" wx:key="index">
                <view class="month-hd">
                    <text>{{ item.year }} 年 {{ item.month }} 月</text>
                    <!-- <text class="year">{{ item.year }}</text> -->
                </view>
                <view class="days">
                    <text wx:for="{{ item.placeholders }}" wx:key="item"></text>
                    <text
                    wx:for="{{ item.days }}"
                    wx:key="index"
                    wx:for-item="day"
                    data-timestamp="{{ day.timestamp }}"
                    bindtap="_chooseDay"
                    class="{{ (day.timestamp >= timeArr[0] && day.timestamp <= timeArr[1]) || (!timeArr[1] && timeArr[0] == day.timestamp) ? 'active' : '' }}">{{ day.text }}</text>
                </view>
            </view>
        </view>
    </view>


    <view class="select_btn">
        <button class="btn" disabled="{{!(timeArr[0] && timeArr[1])}}" bindtap="go">确认</button>
    </view>
</view>

wxss

page {
  box-sizing: border-box;
  color: #404040;
  background-color: #f9f9f9;
  padding-top: 110rpx;
}

.date-box {
  font-size: 28rpx;
  color: #404040;
  background-color: transparent;
}

.date-box-hd {
  display: flex;
  box-sizing: border-box;
  padding: 28rpx 24rpx;
  font-size: 28rpx;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10;
}

.date-box-hd text {
  flex: 1;
  text-align: center;
}
.month{
    background-color: #fff;
    padding-bottom: 47rpx;
}
.month + .month{
    margin-top: 20rpx;
}

.month-hd {
  position: relative;
  padding: 47rpx 0 30rpx;
  font-size: 28rpx;
  text-align: center;
}

.year {
  position: absolute;
  top: 14rpx;
  right: 36rpx;
  bottom: 0;
  margin: auto;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #ddd;
}

.days {
  display: inline-block;
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
}
.days > .active:nth-of-type(1){
    border-radius: 4rpx;
}
.day-row {
  width: 100%;
  padding: 0 24rpx;
  margin-top: 60rpx;
  box-sizing: border-box;
}

.days text {
  display: inline-block;
  box-sizing: border-box;
  width: 14.285%;
  text-align: center;
  padding: 30rpx 0;
}

.disable {
  color: #cfcfcf;
}

.days text.active {
  position: relative;
  background-color: #F57033;
  color: #fff;
}

.days text.active::after {
  content: "";
  display: block;
  height: 4rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F57033;
}

.calendar{
    padding-bottom: 100rpx;
}
.select_btn{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
}

JSON

{"enablePullDownRefresh": true}

js

Page({
    data: {
        monthCount: 5,//显示几个月份
        leastDays: 0,//最小日期间隔
        timeArr: [0, 0],//数组的两个元素分别为选中的开始毫秒时间戮和结束开始毫秒时间戮
        curYear: '',
        curMonth: '',
        curDay: '',
        calendars: [],
        sFtv: [{
            month: 1,
            day: 1,
            name: "元旦"
        },
        {
            month: 2,
            day: 14,
            name: "情人节"
        },
        {
            month: 3,
            day: 8,
            name: "妇女节"
        },
        {
            month: 3,
            day: 12,
            name: "植树节"
        },
        {
            month: 3,
            day: 15,
            name: "消费者权益日"
        },
        {
            month: 4,
            day: 1,
            name: "愚人节"
        },
        {
            month: 5,
            day: 1,
            name: "劳动节"
        },
        {
            month: 5,
            day: 4,
            name: "青年节"
        },
        {
            month: 5,
            day: 12,
            name: "护士节"
        },
        {
            month: 6,
            day: 1,
            name: "儿童节"
        },
        {
            month: 7,
            day: 1,
            name: "建党节"
        },
        {
            month: 8,
            day: 1,
            name: "建军节"
        },
        {
            month: 9,
            day: 10,
            name: "教师节"
        },
        {
            month: 9,
            day: 28,
            name: "孔子诞辰"
        },
        {
            month: 10,
            day: 1,
            name: "国庆节"
        },
        {
            month: 10,
            day: 6,
            name: "老人节"
        },
        {
            month: 10,
            day: 24,
            name: "联合国日"
        },
        {
            month: 12,
            day: 24,
            name: "平安夜"
        },
        {
            month: 12,
            day: 25,
            name: "圣诞节"
        }
        ]
    },
    onLoad: function (options) {
        //传入开始结束时间
        this._init(options);
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // this.selectDataMarkLine()
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    /**
     * 页面初始化
     */
    _init: function (options) {
        console.log(options);
        if (options.startDate && options.endDate) {
            let start = new Date(options.startDate.replace(/\-/g, "/"));
            let end = new Date(options.endDate.replace(/\-/g, "/"));
            let startYear = start.getFullYear();
            let startMonth = start.getMonth();
            let endYear = end.getFullYear();
            let endMonth = end.getMonth();
            let monthCount = endYear * 12 + endMonth - (startYear * 12 + startMonth);
            this.setData({
                curYear: startYear,
                curMonth: startMonth,
                monthCount: monthCount < 5 ? 5 : monthCount + 1,
                'timeArr[0]': start.getTime(),
                'timeArr[1]': end.getTime()
            });
            console.log(this.data);
        } else {
            let date = new Date();
            this.setData({
                curYear: parseInt(date.getFullYear(), 10),
                curMonth: parseInt(date.getMonth(), 10)
            });
        }

        this._createCalendars();
    },
    /**
     * 初始化创建日期数据
     */
    _createCalendars: function () {
        let calendars = [];
        let currentYear = this.data.curYear;
        let startMonth = this.data.curMonth + 1;

        for (let i = 0; i < this.data.monthCount; i++) {
            (startMonth > 12) && (startMonth = 1) && (currentYear += 1);

            calendars.push(this._calendarFactory(currentYear, startMonth));

            startMonth += 1;
        }

        this.setData({
            calendars
        })
    },
    /**
     * 改变日期数据
     * params {
     *  Number num:添加num条
     *  String type:1,头部添加.2尾部添加
     * }
     */
    _addCalendars: function (num, type) {
        let calendars = this.data.calendars;
        if (num == 0) {
            return
        }
        if (type == 1) {
            let firstYear = calendars[0].year;
            let firstMonth = calendars[0].month;

            for (let i = 0; i < num; i++) {
                firstMonth -= 1;
                (firstMonth < 1) && (firstMonth = 12) && (firstYear -= 1);

                calendars.unshift(this._calendarFactory(firstYear, firstMonth));
            }

        } else {
            let lastYear = calendars[calendars.length - 1].year;
            let lastMonth = calendars[calendars.length - 1].month;

            for (let i = 0; i < num; i++) {
                lastMonth += 1;
                (lastMonth > 12) && (lastMonth = 1) && (lastYear += 1);
                calendars.push(this._calendarFactory(lastYear, lastMonth));

            }
        }

        this.setData({
            calendars
        })
    },
    /**
     * 根据传进来的年月获取日期数组
     * param year month
     * return {
     * String year,
     * String month,
     * Array days,
     * String startWeek,
     * Array placeholders
     * }
     */
    _calendarFactory: function (year, month) {
        let daysCount = this._getDays(year, month);
        let startWeek = this._getWeek(year, month);
        let days = Array.from(new Array(daysCount), (val, index) => {
            return {
                text: index + 1,
                timestamp: new Date(`${year}/${month}/${index + 1}`).getTime()
            };
        });
        let placeholders = Array.from(new Array(startWeek), (val, index) => index + 1);

        return {
            year,
            month,
            days,
            startWeek,
            placeholders
        }
    },
    /**
     * 根据传进来的日期获取当前getDate()
     */
    _getDays: function (year, month) {
        let day = new Date(year, month, 0);
        return day.getDate();
    },
    /**
     * 根据传进来的日期获取当前月第一天的week
     */
    _getWeek: function (year, month) {
        let date = new Date();

        date.setYear(year);
        date.setMonth(month - 1);
        date.setDate(1);
        return date.getDay();
    },
    _chooseDay: function (e) {
        const timestamp = e.currentTarget.dataset.timestamp;
        const disabled = e.currentTarget.dataset.disabled;

        if (disabled) return false;

        if (this.data.timeArr[0] && this.data.timeArr[1]) {
            this.setData({
                'timeArr[0]': timestamp,
                'timeArr[1]': 0
            })
        } else if (!this.data.timeArr[0] || this.data.timeArr[0] > timestamp) {
            this.setData({
                'timeArr[0]': timestamp
            })
        } else if (timestamp < this.data.timeArr[0]) {
            this.setData({
                'timeArr[0]': timestamp
            })
        } else {
            let diffDay = ((timestamp - this.data.timeArr[0]) / 864e5) + 1;

            if (diffDay < this.data.leastDays) { // 设置的时间小于规定的间隔
                wx.showToast({
                    title: `最少选择 ${this.data.leastDays} 天`,
                    icon: 'none'
                })
                return false;
            }
            this.setData({
                'timeArr[1]': timestamp
            })
        }
        console.log(this.data.timeArr);
        // this._notify();
    },
    /**
     * 用户触底事件
     */
    onReachBottom(res) {
        this._addCalendars(1, 2)
    },
    /**
     * 下拉加载更多
     */
    onPullDownRefresh() {
        this._addCalendars(1, 1);
        wx.stopPullDownRefresh();
    },

    //返回上一层
    go() {
        // wx.setStorageSync("selectDate", this.data.timeArr)
        wx.setStorage({
            key: 'selectDate',
            data: this.data.timeArr,
        })
        wx.navigateBack({})
    }
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,036评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,046评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,411评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,622评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,661评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,521评论 1赞 304
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,288评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,200评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,644评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,673评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,281评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2赞 355

推荐阅读更多精彩内容

  • 交朋友
    01 / 我们一路上会遇到很多很多的人，绝大多数的人像是一条射线在某个时间点上相交，然后又渐行渐远，去往它们自己的...
    沈吉米阅读 669评论 0赞 7
  • 21号
    今天周三了，一周又过去一半了，今天数学语文都开始上新课时了，这个孩子上课还是有80左右不听课啊，回来在教，我...
    陈浩然妈妈阅读 149评论 0赞 0
  • 特征值和特征向量有什么用？
    我们在数学课上学到的是如何如何 求特征值与特征向量。 在线性变换作用下，向量仅仅在尺度上变为原来的倍。称是线性变换...
    巨柠檬阅读 1,743评论 0赞 0