cari

Rumah  >  Artikel  >  applet WeChat  >  微信小程序实例：实现自定义日期控件的代码

微信小程序实例：实现自定义日期控件的代码

不言
不言asal
2018-08-21 17:34:335475semak imbas

本篇文章给大家带来的内容是关于微信小程序实例：实现自定义日期控件的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在研究微信小程序，需要实现一个自定义日期的功能，类似于猫眼app上选择日期，可以按日、按周、按月、按年、自定义日期，为此特地将其写成了一个组件，供有需要的朋友参考。
本人所用框架是wepy,所以此组件结构为wepy代码结构。

大致介绍：
1.按日的日历控件采用的极点日历插件，详情请看：https://github.com/czcaiwj/calendar；
2.组件中所用到的一些组件为ivew weapp组件，详情使用请看我的另一篇分享：https://www.jianshu.com/p/e07b7cf5e494；
3.组件中按周选择，周我是从2017年至今取的，具体实现可看我另一篇分享：https://www.jianshu.com/p/5112df795162；在本篇onLoad()方法里也有实现；因本人开发需要，设定功能为按周可多选，这个可以根据自身开发需求调整；
4.本组件时间默认从17年开始至今，也可根据自身实际需求调整。

实现效果：

代码如下：

<style type="less">
    .home {
        height: 100%;
        .calendar-header {
            font-size: large;
            color: #406BF8;
         }
        .calendar-board {
            color: #406BF8;
        }
        .week_year_style {
            font-size: 30 rpx;
            padding: 20 rpx 15 rpx;
            text-align: center;
        }
        .week_selectyear_style {
            background-color: #fff;
            color: #406BF8;
        }
        .calendar {
            background-color: #fcfcfc;
            //padding-top: 10px;
        }
    }
</style>
<template>
    <view class="home page">
        <i-tabs current="{{ currentTab }}" color="#406BF8" bindchange="handleChangeTab">
            <i-tab key="按日" title="按日"></i-tab>
            <i-tab key="按周" title="按周"></i-tab>
            <i-tab key="按月" title="按月"></i-tab>
            <i-tab key="按年" title="按年"></i-tab>
            <i-tab key="自定义" title="自定义"></i-tab>
        </i-tabs>
        <view hidden="{{currentTab != &#39;按日&#39;}}" style="margin-top: 30rpx">
            <calendar cell-size="40"
                      show-more-days="true"
                      lunar="true"
                      weeks-type="cn"
                      calendar-style="calendar"
                      header-style="calendar-header"
                      board-style="calendar-board"
                      days-color="{{days_style}}"
                      start-date="2017-01"
                      end-date="2018-08"
                      binddayClick="dayClick"
                      bindnextMonth="next"
                      bindprevMonth="prev"
            />
        </view>
        <view hidden="{{currentTab != &#39;按周&#39;}}">
            <view style="display: flex">
                <view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6">
                    <block wx:for="{{yearArray}}" wx:for-item="item" wx:key="item">
                        <view class="week_year_style {{weeksYears==item?&#39;week_selectyear_style&#39;:&#39;&#39;}}"
                              bindtap=&#39;changeWeekYear({{item}})&#39;>{{item + &#39;年&#39;}}
                        </view>
                    </block>
                </view>
                <scroll-view scroll-y style="height: 600px;">
                    <i-cell-group>
                        <block wx:for="{{weeksArray[weeksYears]}}" wx:for-item="category" wx:key="category">
                            <i-cell title="{{category.weeks}}" bindtap="handleWeeksChange(&#39;{{index}}&#39;)">
                                <i-icon wx:if="{{category.select}}" type="right" size="20" color="#406BF8"
                                        slot="footer"/>
                            </i-cell>
                        </block>

                    </i-cell-group>
                </scroll-view>
            </view>
        </view>

        <view hidden="{{currentTab != &#39;按月&#39;}}">
            <view style="display: flex">
                <view style="width: 160rpx;background-color: #f6f6f6;border-right: 1rpx solid #e6e6e6">
                    <block wx:for="{{yearArray}}" wx:for-item="item" wx:key="item">
                        <view class="week_year_style {{monthYear==item?&#39;week_selectyear_style&#39;:&#39;&#39;}}"
                              bindtap=&#39;changeMonthYear({{item}})&#39;>{{item + &#39;年&#39;}}
                        </view>
                    </block>

                </view>
                <scroll-view scroll-y style="height: 600px;">
                    <i-cell-group>
                        <block wx:for="{{monthYear==year?currentMonthArray:fullMonthArray}}" wx:for-item="category"
                               wx:key="*this">
                            <i-cell title="{{category+&#39;月&#39;}}" bindtap="handleMonthChange(&#39;{{category}}&#39;)">
                                <i-icon wx:if="{{category==selectMonth}}" type="right" size="20" color="#406BF8"
                                        slot="footer"/>
                            </i-cell>
                        </block>

                    </i-cell-group>
                </scroll-view>
            </view>
        </view>

        <view hidden="{{currentTab != &#39;按年&#39;}}">
            <i-cell-group>
                <block wx:for="{{yearArray}}" wx:for-item="category" wx:key="category">
                    <i-cell title="{{category+&#39;年&#39;}}" bindtap="handleYearChange(&#39;{{category}}&#39;)">
                        <i-icon wx:if="{{category==selectYear }}" type="right" size="20" color="#406BF8" slot="footer"/>
                    </i-cell>
                </block>

            </i-cell-group>
        </view>

        <view hidden="{{currentTab != &#39;自定义&#39;}}" style="margin-top: 30rpx">
            <calendar cell-size="40"
                      show-more-days="true"
                      lunar="true"
                      weeks-type="cn"
                      calendar-style="calendar"
                      header-style="calendar-header"
                      board-style="calendar-board"
                      days-color="{{define_days_style}}"
                      start-date="2017-01"
                      end-date="2018-08"
                      binddayClick="dayClick_define"
                      bindnextMonth="next_define"
                      bindprevMonth="prev_define"

            />
        </view>

    </view>
</template>
<script>
    import wepy from &#39;wepy&#39;;

    const MONTHS = [&#39;Jan.&#39;, &#39;Feb.&#39;, &#39;Mar.&#39;, &#39;Apr.&#39;, &#39;May.&#39;, &#39;June.&#39;, &#39;July.&#39;, &#39;Aug.&#39;, &#39;Sept.&#39;, &#39;Oct.&#39;, &#39;Nov.&#39;, &#39;Dec.&#39;];

    export default class TabsContent extends wepy.component {
        props = {
            openDateModal: {
                type: Boolean,
                default: false,
                twoWay: true
            },
            dateSelect: {
                type: String,
                default: &#39;&#39;,
                twoWay: true
            },
            dateFilter: {
                type: String,
                default: &#39;&#39;,
                twoWay: true
            },
            filterWeekArray: {
                type: String,
                default: &#39;&#39;,
                twoWay: true
            },
            filterWeekSelect: {
                type: String,
                default: &#39;&#39;,
                twoWay: true
            }
        };
        data = {
            currentTab: &#39;按日&#39;,  //Tabs页切换

            year: new Date().getFullYear(),      // 年份
            month: new Date().getMonth() + 1,    // 月份
            day: new Date().getDate(),
            str: MONTHS[new Date().getMonth()],  // 月份字符串

            days_style: [{month: &#39;current&#39;, day: new Date().getDate(), color: &#39;#fff&#39;, background: &#39;#eb4986&#39;}],  //按日选中日期样式
            selectDate: [],   //按日选择的日期

            yearArray: [],  //从2017年起至今
            weeksYears: new Date().getFullYear(),  //按周选择了哪一年
            weeksArray: {},   //从2017年起至今的所有周
            selectWeekArray: [],   //选择的周

            fullMonthArray: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
            currentMonthArray: [],  //今年过了几个月
            monthYear: new Date().getFullYear(),  //按月选择了哪一年
            selectMonth: 0,  //按月选择了哪一月

            selectYear: 0,  //按年选择了哪一年

            define_days_style: [{month: &#39;current&#39;, day: new Date().getDate(), color: &#39;#fff&#39;, background: &#39;#eb4986&#39;}],  //自定义日期格式
            selectDate_define: []


        };

        methods = {
            handleChangeTab({detail}) {
                this.currentTab = detail.key
                this.dateFilter = this.currentTab
            },

            dayClick: function (event) {
                let style = (event.detail.year == this.year && event.detail.month == this.month) ?
                    [{month: &#39;current&#39;, day: new Date().getDate(), color: &#39;#fff&#39;, background: &#39;#eb4986&#39;},
                        {month: &#39;current&#39;, day: event.detail.day, color: &#39;#fff&#39;, background: &#39;#406BF8&#39;}] :
                    [{month: &#39;current&#39;, day: event.detail.day, color: &#39;#fff&#39;, background: &#39;#406BF8&#39;}]
                this.days_style = style
                this.selectDate = [event.detail.year, event.detail.month, event.detail.day]
                this.openDateModal = false
                this.dateFilter = this.currentTab
                this.dateSelect = [event.detail.year, event.detail.month, event.detail.day]
            },
            next: function (event) {
                if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)
                    this.days_style = [{
                        month: &#39;current&#39;,
                        day: new Date().getDate(),
                        color: &#39;#fff&#39;,
                        background: &#39;#eb4986&#39;
                    }]
                else this.days_style = [vent.detail.year, event.detail.month, event.detail.day]
            },
            prev: function (event) {
                this.days_style = []
            },

            changeWeekYear(year) {
                this.weeksYears = year
            },
            handleWeeksChange(weekIndex) {
                this.weeksArray[this.weeksYears][weekIndex].select = !this.weeksArray[this.weeksYears][weekIndex].select

                if (this.selectWeekArray[this.weeksYears]) {
                    let bool = this.selectWeekArray[this.weeksYears].some(index => index == weekIndex)
                    if (bool) { //真 已存在 delete
                        //if(this.selectWeekArray[this.weeksYears].length>1)
                        this.selectWeekArray[this.weeksYears].remove(weekIndex)
                    } else {   //假  push
                        this.selectWeekArray[this.weeksYears].push(weekIndex)
                        this.selectWeekArray[this.weeksYears].sort()
                    }
                } else {
                    let temp = {}
                    temp[this.weeksYears] = []
                    let a = [weekIndex]
                    temp[this.weeksYears] = a
                    this.selectWeekArray = temp
                }
                this.filterWeekSelect = this.selectWeekArray  //回调到父级页面
            },

            changeMonthYear(year) {
                this.monthYear = year
            },
            handleMonthChange(month) {
                this.selectMonth = month
                this.openDateModal = false
                this.dateFilter = this.currentTab
                this.dateSelect = [this.monthYear, this.selectMonth]
            },

            handleYearChange(year) {
                this.selectYear = year
                this.openDateModal = false
                this.dateFilter = this.currentTab
                this.dateSelect = [year]
            },

            dayClick_define: function (event) {
                let style = []
                if (this.selectDate_define.length == 0) {  //第一次点击
                    this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])
                    if (event.detail.year == this.year && event.detail.month == this.mounth) {
                        style = [{month: &#39;current&#39;, day: new Date().getDate(), color: &#39;#fff&#39;, background: &#39;#eb4986&#39;},
                            {month: &#39;current&#39;, day: event.detail.day, color: &#39;#fff&#39;, background: &#39;#406BF8&#39;}]
                    }
                    this.define_days_style = style
                } else if (this.selectDate_define.length == 1) {   //选中第二个日期就关闭页面
                    this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])
                    this.define_days_style.push({
                        month: &#39;current&#39;,
                        day: event.detail.day,
                        color: &#39;#fff&#39;,
                        background: &#39;#406BF8&#39;
                    })

                    this.openDateModal = false
                    this.dateFilter = this.currentTab
                    this.dateSelect = this.selectDate_define
                } else {   //重新自定义日期
                    this.selectDate_define = [[event.detail.year, event.detail.month, event.detail.day]]
                    style = [{month: &#39;current&#39;, day: new Date().getDate(), color: &#39;#fff&#39;, background: &#39;#eb4986&#39;},
                        {month: &#39;current&#39;, day: event.detail.day, color: &#39;#fff&#39;, background: &#39;#406BF8&#39;}]
                    this.define_days_style = style
                }
            },
            next_define: function (event) {
                if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)
                    this.define_days_style = [{
                        month: &#39;current&#39;,
                        day: new Date().getDate(),
                        color: &#39;#fff&#39;,
                        background: &#39;#eb4986&#39;
                    }]
                else this.define_days_style = [event.detail.year, event.detail.month, event.detail.day]
            },
            prev_define: function (event) {
                this.define_days_style = []
            },

        };

        onLoad() {
            let currentYear = new Date().getFullYear()
            let currentMonth = new Date().getMonth() + 1
            for (var i = currentYear; i >= 2017; i--) {
                this.yearArray.push(i)
            }
            for (var i = currentMonth; i >= 1; i--) {
                this.currentMonthArray.push(i)
            }

            let weeksArray = {}   //计算2017年至今的所有周
            for (var i = 0; i <= this.yearArray.length; i++) {
                let index = 1;
                let temp = []
                if (i == 0) {  //今年
                    for (let i of createWeeks(this.yearArray[i])) {
                        let start = i[0],
                            end = i[1];
                        if (end <= new Date().getTime() || (start <= new Date().getTime() && end >= new Date().getTime())) {
                            let a = start <= new Date().getTime() && end >= new Date().getTime() ?
                                &#39;第&#39; + formatDig(index++) + &#39;周（&#39; + formatDate(start) + &#39;日-&#39; + formatDate(end) + &#39;日)&#39; + &#39; 本周&#39; :
                                &#39;第&#39; + formatDig(index++) + &#39;周（&#39; + formatDate(start) + &#39;日-&#39; + formatDate(end) + &#39;日)&#39;
                            temp.push({&#39;weeks&#39;: a, &#39;select&#39;: false})
                        }
                    }
                } else {
                    for (let i of createWeeks(this.yearArray[i])) {
                        let start = i[0],
                            end = i[1];
                        let a = &#39;第&#39; + formatDig(index++) + &#39;周（&#39; + formatDate(start) + &#39;日-&#39; + formatDate(end) + &#39;日)&#39;
                        temp.push({&#39;weeks&#39;: a, &#39;select&#39;: false})
                    }
                }
                if (this.yearArray[i] != undefined) {
                    weeksArray[this.yearArray[i]] = temp.reverse();
                }
            }
            this.weeksArray = weeksArray
            this.filterWeekArray = weeksArray

        }
    }

    function formatDig(num) {
        //return num>9?&#39;&#39;+num:&#39;0&#39;+num;
        return num;
    }

    function formatDate(mill) {
        var y = new Date(mill);
        let raws = [
            //y.getFullYear(),
            formatDig(y.getMonth() + 1),
            formatDig(y.getDate()),
            //y.getDay()||7  //获取星期几
        ];
        //let format=[&#39;年&#39;,&#39;月&#39;,&#39;日 星期&#39;];
        let format = [&#39;月&#39;, &#39;日&#39;];
        return String.raw({raw: raws}, ...format);
    }

    function* createWeeks(year) {
        const ONE_DAY = 24 * 3600 * 1000;
        let start = new Date(year, 0, 1),
            end = new Date(year, 11, 31);
        let firstDay = start.getDay() || 7,
            lastDay = end.getDay() || 7;
        let startTime = +start,
            endTime = startTime + (7 - firstDay) * ONE_DAY,
            _endTime = end - (7 - lastDay) * ONE_DAY;
        yield [startTime, endTime];
        startTime = endTime + ONE_DAY;
        endTime = endTime + 7 * ONE_DAY;
        while (endTime < _endTime) {
            yield [startTime, endTime];
            startTime = endTime + ONE_DAY;
            endTime = endTime + 7 * ONE_DAY;
        }
        yield [startTime, +end];
    }

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>

相关推荐：

微信小程序实例：自定义导航栏的实现方法

小程序实例：小程序分页加载数据的实现代码

Atas ialah kandungan terperinci 微信小程序实例：实现自定义日期控件的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：微信小程序实例：自定义导航栏的实现方法Artikel seterusnya：微信小程序中ivew weapp控件如何引用

Artikel berkaitan

Lihat lagi