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

<style>    .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>        <i-tabs>            <i-tab></i-tab>            <i-tab></i-tab>            <i-tab></i-tab>            <i-tab></i-tab>            <i-tab></i-tab>        </i-tabs>        <view>            <calendar></calendar>        </view>        <view>            <view>                <view>                    <block>                        <view>{{item + '年'}}                        </view>                    </block>                </view>                <scroll-view>                    <i-cell-group>                        <block>                            <i-cell>                                <i-icon></i-icon>                            </i-cell>                        </block>                    </i-cell-group>                </scroll-view>            </view>        </view>        <view>            <view>                <view>                    <block>                        <view>{{item + '年'}}                        </view>                    </block>                </view>                <scroll-view>                    <i-cell-group>                        <block>                            <i-cell>                                <i-icon></i-icon>                            </i-cell>                        </block>                    </i-cell-group>                </scroll-view>            </view>        </view>        <view>            <i-cell-group>                <block>                    <i-cell>                        <i-icon></i-icon>                    </i-cell>                </block>            </i-cell-group>        </view>        <view>            <calendar></calendar>        </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>