不使用插件实现一个移动端日期选择器

淩亂°似流年 2022-10-29 05:21 246阅读 0赞

# React不使用滚动插件实现移动端日期选择器 #

## 背景 ##

需要做一个只包含年月的日期选择器，但目前大多数的日期选择器中，手指滑动使用了**better-scroll**插件作为移动端滚动插件,需要先安装依赖better-scroll，这无疑会增加项目的体积，所以决定自己实现一个**不使用插件**的日期选择器。

## 效果图 ##

先附上效果图

![在这里插入图片描述][20210208185534732.gif_pic_center]

## 实现 ##

### 实现思路 ###

*  不使用滚动插件
 *  利用 touchmove 实现监听手指滑动
 *  用两个列表分别展示年份和月份
 *  列表固定三行展示上一年，当前年，下一年的数值
 *  滑动的时候，通过判断手指滑动的方向改变数值，实现滑动选择日期

### 核心代码 ###

#### 布局展示 ####

利用两个<ul>列表分别展示年份和月份；

<ul>中再用三个<li>分别展示过去、现在、未来；

布局代码如下，css样式代码会在后面完整代码中贴出。

<div className="date-picker-warpper">
        <div className="date-picker-title">选择日期</div>
        <div className="date-selected">{this.state.years.active}年{this.handleDateSelected(this.state.months.active)}月</div>
        <div className="change-date">
            <ul className="date-year" id="yearBar">
                <li>{this.state.years.top}</li>
                <li className="active">
                    {this.state.years.active}
                    <span className="year">年</span>
                </li>
                <li>{this.state.years.bottom}</li>
            </ul>
            <ul className="date-month" id="monthBar">
                <li>{this.state.months.top}</li>
                <li className="active">
                    {this.state.months.active}
                    <span className="month">月</span>
                </li>
                <li>{this.state.months.bottom}</li>
            </ul>
        </div>
        <div className="date-picker-button">
            <button className="cancel" onClick={(e) => { this.props.handleDatePickerClickCancle(); }} >取消</button>
            <button className="determine" onClick={(e) => { this.props.handleDetermineClick(dateString); }} >确定</button>
        </div>
    </div>

布局完成后，效果如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]

#### 监听滑动 ####

*  给年份列表、月份列表添加touchmove监听滑动
 *  通过滑动前后screenY的变化，判断手指滑动方向
 *  根据滑动方向，对相应数值进行增减操作
 *  滑动距离小于20px不操作

yearBar.addEventListener("touchmove", event =>
            this.handleDateTouchMove(event, "year")
        );
    monthBar.addEventListener("touchmove", event =>
        this.handleDateTouchMove(event, "month")
    );

handleDateTouchMove(event, touchType) {
        event.stopPropagation();
        event.preventDefault();
        let screenY = event.changedTouches[0].screenY;
        let stateObj = this.state[`${touchType}s`];
        let targets = Object.assign({}, stateObj),
            targetChangeY = this[`${touchType}ChangeY`];
        // 滑动距离小于20px不操作
        if (Math.abs(screenY - targetChangeY) <= 20) {
            return;
        }
        // 当前控件的变化
        // 判断手指滑动方向
        if (screenY - targetChangeY > 0) {
            // 手指下滑
            targets.top = this.datePickerSubtraction(touchType, targets.top, 'top');
            targets.active = this.datePickerSubtraction(touchType, targets.active, 'active');
            targets.bottom = this.datePickerSubtraction(touchType, targets.bottom, 'bottom');
        } else {
            // 手指上滑
            targets.top = this.datePickerAddition(touchType, targets.top, 'top');
            targets.active = this.datePickerAddition(touchType, targets.active, 'active');
            targets.bottom = this.datePickerAddition(touchType, targets.bottom, 'bottom');
        }
        if (touchType === "month") { // 年份关联变化
            let direction = screenY - targetChangeY > 0 ? "down" : "up"
            let updateYear = this.yearUpdate({
                currYear: this.state.years.active,
                currMonth: this.state.months.active,
                direction: direction
            });
            if (updateYear) {
                this.setState({
                    years: updateYear
                });
                targets = this.initMonths(updateYear.active, direction);
            }
        }
    
        this.setState({
            [`${touchType}s`]: targets
        });
        // 将当前滑动后的 screenY 赋值给对应的 ChangeY
        this[`${touchType}ChangeY`] = screenY;
    }

#### 计算应该展示的值 ####

根据所传入的参数，计算出应该展示的数值

*  统一数值格式，对<10的添0
 *  判断临界值

// 计算时间控件下滑时，应该展示的值
    datePickerSubtraction(type, val, dateType) {
        val = parseInt(val);
        if (type == 'year') {
            if (val == this.nowYear - this.props.yearLimit) {
                val = this.nowYear;
            } else {
                val--;
            }
            if (dateType == "active") this.initMonths(val);
        } else if (type == 'month') {
            if (val == 1) {
                val = this.maxMonth;
            } else if (val <= 10) {
                val = `0${val - 1}`;
            } else {
                val--;
            }
        }
    
        return `${val}`;
    }
    
    // 计算时间控件上滑时，应该展示的值
    datePickerAddition(type, val, dateType) {
        val = parseInt(val);
        if (type == 'year') {
            if (val == this.nowYear) {
                val = val - this.props.yearLimit;
            } else {
                val++;
            }
            if (dateType == "active") this.initMonths(val);
        } else if (type == 'month') {
            if (val >= this.maxMonth) {
                val = "01";
            } else if (val < 9) {
                val = `0${val + 1}`;
            } else {
                val = val + 1;
            }
        }
        return `${val}`;
    }

滑动效果如下图所示：

![在这里插入图片描述][20210208190344293.gif_pic_center]

#### 处理年月联动 ####

*  若当前为1月&&手指下滑，则需减年
 *  若当前为最大月&&手指上滑，则需减年

// 日期选择器年的关联变化
        yearUpdate({
            currYear,
            currMonth,
            direction
        }) {
            // 年份关联变化
            const isJan = currMonth == "01" ? true : false,
                isDec = currMonth == this.maxMonth ? true : false;
            // 若当前为1月，则需减年
            if (isJan && direction == "down") {
                const active = this.datePickerSubtraction("year", currYear, "active"),
                    top = this.datePickerSubtraction("year", active, "bottom");
                return {
                    top,
                    active,
                    bottom: currYear
                };
            } else if (isDec && direction == "up") {
                // 若当前为最大月，则需加年
                const active = this.datePickerAddition("year", currYear, "active"),
                    bottom = this.datePickerAddition("year", active, "top");
                return {
                    top: currYear,
                    active,
                    bottom
                };
            }
            return null;
        }

这里的最大月不一定是12月，若年份为当前日期年，最大月则为当前日期月

if (this.activeYear == this.nowYear) {
            this.maxMonth = this.nowMonth;
        } else {
            this.maxMonth = 12;
        }

年月联动效果如下图所示：

![在这里插入图片描述][20210208190311859.gif_pic_center]

### 完整代码 ###

附上完整代码

import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    
    class DatePickerComponent extends Component {
    
        constructor(props) {
            super(props);
            this.now = new Date(),
            this.nowYear = this.now.getFullYear(),
            this.nowMonth = this.now.getMonth() + 1 > 9 ? this.now.getMonth() + 1 : `0${this.now.getMonth() + 1}`;
            this.maxMonth = this.nowMonth;
            this.activeYear = this.nowYear;
            this.yearChangeY = 0;
            this.monthChangeY = 0;
            this.state = {
                datePickerPanelFlag: 'none',
                years: {
                    top: this.datePickerSubtraction("year", this.nowYear, 'top'),
                    active: this.nowYear,
                    bottom: this.datePickerAddition("year", this.nowYear, 'bottom')
                },
                months: {
                    top: this.datePickerSubtraction("month", this.nowMonth, 'top'),
                    active: this.nowMonth,
                    bottom: this.datePickerAddition("month", this.nowMonth, 'bottom')
                },
            };
        }
    
        // 计算时间控件下滑时，应该展示的值
        datePickerSubtraction(type, val, dateType) {
            val = parseInt(val);
            if (type == 'year') {
                if (val == this.nowYear - this.props.yearLimit) {
                    val = this.nowYear;
                } else {
                    val--;
                }
                if (dateType == "active") this.initMonths(val);
            } else if (type == 'month') {
                if (val == 1) {
                    val = this.maxMonth;
                } else if (val <= 10) {
                    val = `0${val - 1}`;
                } else {
                    val--;
                }
            }
            return `${val}`;
        }
    
        // 计算时间控件上滑时，应该展示的值
        datePickerAddition(type, val, dateType) {
            val = parseInt(val);
            if (type == 'year') {
                if (val == this.nowYear) {
                    val = val - this.props.yearLimit;
                } else {
                    val++;
                }
                if (dateType == "active") this.initMonths(val);
            } else if (type == 'month') {
                if (val >= this.maxMonth) {
                    val = "01";
                } else if (val < 9) {
                    val = `0${val + 1}`;
                } else {
                    val = val + 1;
                }
            }
            return `${val}`;
        }
        //初始化日期选择器月份值
        initMonths(activeYear, direction) {
            if (!this.state) return;
    
            this.activeYear = activeYear;
            if (this.activeYear == this.nowYear) {
                this.maxMonth = this.nowMonth;
            } else {
                this.maxMonth = 12;
            }
            let stateMonths = this.state.months,
                months = Object.assign({}, stateMonths);
            if (direction && direction === 'up') {
                months.active = '01';
                months.top = this.maxMonth;
                months.bottom = '02';
            } else {
                months.active = this.maxMonth;
                months.top = this.maxMonth - 1;
                months.top = months.top > 9 ? months.top : `0${months.top}`;
                months.bottom = '01';
            }
            this.setState({
                months: months,
            })
            return months;
        }
    
        // 日期选择器年的关联变化
        yearUpdate({
            currYear,
            currMonth,
            direction
        }) {
    
            // 年份关联变化
            const isJan = currMonth == "01" ? true : false,
                isDec = currMonth == this.maxMonth ? true : false;
            // 若当前为1月，则需减年
            if (isJan && direction == "down") {
                const active = this.datePickerSubtraction("year", currYear, "active"),
                    top = this.datePickerSubtraction("year", active, "bottom");
    
                return {
                    top,
                    active,
                    bottom: currYear
                };
            } else if (isDec && direction == "up") {
                // 若当前为最大月，则需加年
                const active = this.datePickerAddition("year", currYear, "active"),
                    bottom = this.datePickerAddition("year", active, "top");
    
                return {
                    top: currYear,
                    active,
                    bottom
                };
            }
    
            return null;
        }
    
        datePickerScrollInit() {
            const yearBar = document.getElementById('yearBar'),
                monthBar = document.getElementById('monthBar');
            // 绑定事件
            yearBar.addEventListener("touchmove", event =>
                this.handleDateTouchMove(event, "year")
            );
            monthBar.addEventListener("touchmove", event =>
                this.handleDateTouchMove(event, "month")
            );
            yearBar.addEventListener("touchstart", event => {
                this.yearChangeY = event.changedTouches[0].screenY;
            });
            monthBar.addEventListener("touchstart", event => {
                this.monthChangeY = event.changedTouches[0].screenY;
            });
        }
        handleDateTouchMove(event, touchType) {
            event.stopPropagation();
            event.preventDefault();
            let screenY = event.changedTouches[0].screenY;
            let stateObj = this.state[`${touchType}s`];
            let targets = Object.assign({}, stateObj),
                targetChangeY = this[`${touchType}ChangeY`];
            // 滑动距离小于20px不操作
            if (Math.abs(screenY - targetChangeY) <= 20) {
                return;
            }
            // 当前控件的变化
            // 判断手指滑动方向
            if (screenY - targetChangeY > 0) {
                // 手指下滑
                targets.top = this.datePickerSubtraction(touchType, targets.top, 'top');
                targets.active = this.datePickerSubtraction(touchType, targets.active, 'active');
                targets.bottom = this.datePickerSubtraction(touchType, targets.bottom, 'bottom');
            } else {
                // 手指上滑
                targets.top = this.datePickerAddition(touchType, targets.top, 'top');
                targets.active = this.datePickerAddition(touchType, targets.active, 'active');
                targets.bottom = this.datePickerAddition(touchType, targets.bottom, 'bottom');
            }
            if (touchType === "month") { // 年份关联变化
                let direction = screenY - targetChangeY > 0 ? "down" : "up"
                let updateYear = this.yearUpdate({
                    currYear: this.state.years.active,
                    currMonth: this.state.months.active,
                    direction: direction
                });
                if (updateYear) {
                    this.setState({
                        years: updateYear
                    });
                    targets = this.initMonths(updateYear.active, direction);
                }
            }
    
    
            this.setState({
                [`${touchType}s`]: targets
            });
            // 将当前滑动后的 screenY 赋值给对应的 ChangeY
            this[`${touchType}ChangeY`] = screenY;
        }
    
        handleDateSelected(value) {
            if (value) {
                value = String(value);
                return value.replace(/\b(0+)/gi, "");
            }
        }
    
        dateReceive() {
            let { defaultYear, defaultMonth } = this.props;
            this.activeYear = defaultYear;
            let stateMonths = this.state.months,
                stateYears = this.state.years,
                months = Object.assign({}, stateMonths),
                years = Object.assign({}, stateYears);
            years.active = defaultYear;
            if (years.active != this.nowYear) this.maxMonth = 12;
            years.top = this.datePickerSubtraction("year", defaultYear, 'top');
            years.bottom = this.datePickerAddition("year", defaultYear, 'bottom');
            months.active = defaultMonth;
            months.top = this.datePickerSubtraction("month", defaultMonth, 'top');
            months.bottom = this.datePickerAddition("month", defaultMonth, 'bottom');
            this.setState({
                years: years,
                months: months,
            })
        }
    
        handleBody() {
            document.body.style.overflow = 'hidden';
            document.getElementsByTagName('html')[0].style.overflow = 'hidden';
        }
    
        handleBodycancel() {
            document.body.style.overflow = '';
            document.getElementsByTagName('html')[0].style.overflow = '';
        }
    
        listenModalClick() {
            let modal = document.getElementById("modal");
            modal.addEventListener("click", e => {
                if (e.target.className !== "ui-modal") return;
                this.props.handleDatePickerClickCancle();
            }, false)
        }
    
        componentDidMount() {
            this.datePickerScrollInit();
            this.dateReceive();
            this.listenModalClick();
            this.handleBody();
        }
        componentWillUnmount() {
            this.handleBodycancel();
        }
    
    
        render() {
            const { datePickerPanelFlag } = this.props;
            let dateString = this.state.years.active + this.state.months.active;
            let datePickerPanel = <div className="ui-modal" id="modal" >
                <div className="date-picker-warpper">
                    <div className="date-picker-title">选择日期</div>
                    <div className="date-selected">{this.state.years.active}年{this.handleDateSelected(this.state.months.active)}月</div>
                    <div className="change-date">
                        <ul className="date-year" id="yearBar">
                            <li>{this.state.years.top}</li>
                            <li className="active">
                                {this.state.years.active}
                                <span className="year">年</span>
                            </li>
                            <li>{this.state.years.bottom}</li>
                        </ul>
                        <ul className="date-month" id="monthBar">
                            <li>{this.state.months.top}</li>
                            <li className="active">
                                {this.state.months.active}
                                <span className="month">月</span>
                            </li>
                            <li>{this.state.months.bottom}</li>
                        </ul>
                    </div>
                    <div className="date-picker-button">
                        <button className="cancel" onClick={(e) => { this.props.handleDatePickerClickCancle(); }} >取消</button>
                        <button className="determine" onClick={(e) => { this.props.handleDetermineClick(dateString); }} >确定</button>
                    </div>
                </div>
            </div>;
            return (<div>
                {datePickerPanel}
            </div>
            );
        }
    }
    
    DatePickerComponent.PropTypes = {
        datePickerPanelFlag: PropTypes.string.datePickerPanelFlag,
        defaultYear: PropTypes.string.defaultYear,
        defaultMonth: PropTypes.string.defaultMonth,
        yearLimit: PropTypes.number.yearLimit
    };
    
    export default DatePickerComponent;

### 样式 ###

@defaultSize: 16
    
    .date-picker-warpper {
        width: 100%;
        height: unit(369/@defaultSize, rem);
        background: rgba(255, 255, 255, 1);
        border-radius: unit(19/@defaultSize, rem) unit(19/@defaultSize, rem) 0px 0px;
        position: fixed;
        bottom: 0;
    
        .date-picker-title {
            text-align: center;
            height: unit(22/@defaultSize, rem);
            margin-top: unit(27/@defaultSize, rem);
            font-size: unit(16/@defaultSize, rem);
            font-weight: bold;
            color: rgba(51, 59, 76, 1);
            line-height: unit(22/@defaultSize, rem);
        }
    
        .date-selected {
            text-align: center;
            margin-top: unit(5/@defaultSize, rem);
            margin-bottom: unit(17/@defaultSize, rem);
            font-size: unit(13/@defaultSize, rem);
            color: rgba(51, 59, 76, 1);
            line-height: unit(18/@defaultSize, rem);
            height: unit(18/@defaultSize, rem);
        }
    
        .change-date {
            display: flex;
            height: unit(174/@defaultSize, rem);
            justify-content: space-between;
    
            .date-year,
            .date-month {
                width: 50%;
                position: relative;
                color: rgba(178, 181, 187, 1);
                text-align: center;
                font-size: unit(17/@defaultSize, rem);
    
                li {
                    line-height: rem(58px);
    
                    span {
                        display: inline-block;
                        color: rgba(17, 110, 255, 1);
                        font-size: unit(10/@defaultSize, rem);
                        vertical-align: text-top;
                        margin-left: unit(5/@defaultSize, rem);
                    }
                }
    
            }
    
            .date-year {
                li {
                    padding: unit(16/@defaultSize, rem) 0 unit(15/@defaultSize, rem) unit(60/@defaultSize, rem);
                }
    
                .active {
                    font-size: unit(19/@defaultSize, rem);
                    color: rgba(17, 110, 255, 1);
                    padding: unit(16/@defaultSize, rem) 0 unit(15/@defaultSize, rem) unit(75/@defaultSize, rem);
                }
            }
    
            .date-month {
                li {
                    padding: unit(16/@defaultSize, rem) unit(60/@defaultSize, rem) unit(15/@defaultSize, rem) 0;
                }
    
                .active {
                    font-size: unit(19/@defaultSize, rem);
                    color: rgba(17, 110, 255, 1);
                    padding: unit(16/@defaultSize, rem) unit(42/@defaultSize, rem) unit(15/@defaultSize, rem) 0;
                }
            }
        }
    
        .date-text {
            line-height: unit(58/@defaultSize, rem);
            height: unit(58/@defaultSize, rem);
            font-size: unit(17/@defaultSize, rem);
            color: rgba(178, 181, 187, 1);
        }
    
        .date-text-current {
            line-height: unit(58/@defaultSize, rem);
            height: unit(58/@defaultSize, rem);
            font-size: unit(19/@defaultSize, rem);
            color: rgba(17, 110, 255, 1);
        }
    
        .date-unit {
            font-size: unit(10/@defaultSize, rem);
            color: rgba(17, 110, 255, 1);
            line-height: unit(13/@defaultSize, rem);
        }
    
        .date-picker-button {
            button {
                text-align: center;
                width: unit(147/@defaultSize, rem);
                height: unit(47/@defaultSize, rem);
                line-height: unit(47/@defaultSize, rem);
                background: rgba(245, 245, 246, 1);
                border-radius: unit(23/@defaultSize, rem);
                font-size: unit(15/@defaultSize, rem);
            }
    
            .cancel {
                position: absolute;
                left: unit(27/@defaultSize, rem);
            }
    
            .determine {
                position: absolute;
                right: unit(27/@defaultSize, rem);
                color: rgba(17, 110, 255, 1);
            }
    
        }
    }

## 使用 ##

## 总结 ##

用此方法实现移动端日期选择器，虽然避免了使用插件，但是导致滑动时的手感偏差，用户体验方面有待完善。

[20210208185534732.gif_pic_center]: /images/20221024/295ab7ed39394c96afcde681362b6bab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/b14fb524735d4347bc6c08b5bb2845d4.png
[20210208190344293.gif_pic_center]: /images/20221024/d345104d87254b388e91e713e1265414.png
[20210208190311859.gif_pic_center]: /images/20221024/eaeefc3757894218bc3e9fd9b371d209.png