基于React.js实现的日期输入控件

Date Input with React and React-dom.js 通过构建一个日期控件来学习React.js的使用。

react, widget

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1726
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var KEYS = {
    BACKSPACE: 8,

END: 35,
    HOME: 36,

LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,

NUM_0: 48,
    NUM_1: 49,
    NUM_2: 50,
    NUM_3: 51,
    NUM_4: 52,
    NUM_5: 53,
    NUM_6: 54,
    NUM_7: 55,
    NUM_8: 56,
    NUM_9: 57,

NUMPAD_0: 96,
    NUMPAD_1: 97,
    NUMPAD_2: 98,
    NUMPAD_3: 99,
    NUMPAD_4: 100,
    NUMPAD_5: 101,
    NUMPAD_6: 102,
    NUMPAD_7: 103,
    NUMPAD_8: 104,
    NUMPAD_9: 105

};

function getCharacter(keyCode) {
    switch (keyCode) {
        default: return ".";
        case KEYS.NUM_0:
                case KEYS.NUMPAD_0:
                return "0";
        case KEYS.NUM_1:
                case KEYS.NUMPAD_1:
                return "1";
        case KEYS.NUM_2:
                case KEYS.NUMPAD_2:
                return "2";
        case KEYS.NUM_3:
                case KEYS.NUMPAD_3:
                return "3";
        case KEYS.NUM_4:
                case KEYS.NUMPAD_4:
                return "4";
        case KEYS.NUM_5:
                case KEYS.NUMPAD_5:
                return "5";
        case KEYS.NUM_6:
                case KEYS.NUMPAD_6:
                return "6";
        case KEYS.NUM_7:
                case KEYS.NUMPAD_7:
                return "7";
        case KEYS.NUM_8:
                case KEYS.NUMPAD_8:
                return "8";
        case KEYS.NUM_9:
                case KEYS.NUMPAD_9:
                return "9";
    }
}

function getDestructuredDate(date) {
    var y = date.getFullYear();
    var m = date.getMonth();
    var d = date.getDate();
    var h = date.getHours();
    var i = date.getMinutes();
    var s = date.getSeconds();
    return {
        y: y,
        m: m,
        d: d,
        h: h,
        i: i,
        s: s
    };
}

function setDate(date) {
    var y = arguments.length <= 1 || arguments[1] === undefined ? date.getFullYear() : arguments[1];
    var m = arguments.length <= 2 || arguments[2] === undefined ? date.getMonth() : arguments[2];
    var d = arguments.length <= 3 || arguments[3] === undefined ? date.getDate() : arguments[3];
    var h = arguments.length <= 4 || arguments[4] === undefined ? date.getHours() : arguments[4];
    var i = arguments.length <= 5 || arguments[5] === undefined ? date.getMinutes() : arguments[5];
    var s = arguments.length <= 6 || arguments[6] === undefined ? date.getSeconds() : arguments[6];

return new Date(y, m, d, h, i, s);
}

function getDatePart(date, part) {
    switch (part) {
        default: throw new Error("Invalid part name");
        case "year":
                return date.getFullYear();
        case "month":
                return date.getMonth();
        case "day":
                return date.getDate();
        case "hours":
                return date.getHours();
        case "minutes":
                return date.getMinutes();
        case "seconds":
                return date.getSeconds();
    }
}

function setDatePart(date, part, value) {
    var y = part === "year" ? value : date.getFullYear();
    var m = part === "month" ? value : date.getMonth();
    var d = part === "day" ? value : date.getDate();
    var h = part === "hours" ? value : date.getHours();
    var i = part === "minutes" ? value : date.getMinutes();
    var s = part === "seconds" ? value : date.getSeconds();
    return new Date(y, m, d, h, i, s);
}

function addDate(date, ay, am, ad, ah, ai, as) {
    var _getDestructuredDate = getDestructuredDate(date);

var y = _getDestructuredDate.y;
    var m = _getDestructuredDate.m;
    var d = _getDestructuredDate.d;
    var h = _getDestructuredDate.h;
    var i = _getDestructuredDate.i;
    var s = _getDestructuredDate.s;

return new Date(y + ay, m + am, d + ad, h + ah, i + ai, s + as);
}

function incrementYear(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, q, 0, 0, 0, 0, 0);
}

function decrementYear(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, -q, 0, 0, 0, 0, 0);
}

function incrementMonth(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, q, 0, 0, 0, 0);
}

function decrementMonth(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, -q, 0, 0, 0, 0);
}

function incrementDay(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, q, 0, 0, 0);
}

function decrementDay(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, -q, 0, 0, 0);
}

function incrementHours(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, q, 0, 0);
}

function decrementHours(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, -q, 0, 0);
}

function incrementMinutes(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, 0, q, 0);
}

function decrementMinutes(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, 0, -q, 0);
}

function incrementSeconds(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, 0, 0, q);
}

function decrementSeconds(date) {
    var q = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    return addDate(date, 0, 0, 0, 0, 0, -q);
}

function incrementDate(date, part) {
    var q = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];

switch (part) {
        default: throw new Error("Invalid part name");
        case "year":
                return incrementYear(date, q);
        case "month":
                return incrementMonth(date, q);
        case "day":
                return incrementDay(date, q);
        case "hours":
                return incrementHours(date, q);
        case "minutes":
                return incrementMinutes(date, q);
        case "seconds":
                return incrementSeconds(date, q);
    }
}

function decrementDate(date, part) {
    var q = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];

switch (part) {
        default: throw new Error("Invalid part name");
        case "year":
                return decrementYear(date, q);
        case "month":
                return decrementMonth(date, q);
        case "day":
                return decrementDay(date, q);
        case "hours":
                return decrementHours(date, q);
        case "minutes":
                return decrementMinutes(date, q);
        case "seconds":
                return decrementSeconds(date, q);
    }
}

function modifyDate(date, part) {
    var increment = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2];

if (increment) {
        return incrementDate(date, part);
    } else {
        return decrementDate(date, part);
    }
}

var value = e.target.value;
            var selectionStart = e.target.selectionStart;
            var selectionEnd = e.target.selectionEnd;
            var newValue = parseInt(value.substr(0, selectionStart) + character + value.substr(selectionStart + 1));
            if (this.state.activeElement === this.refs.year && String(newValue).length > 4 || this.state.activeElement === this.refs.month && String(newValue).length > 2 || this.state.activeElement === this.refs.day && String(newValue).length > 2 || this.state.activeElement === this.refs.hours && String(newValue).length > 2 || this.state.activeElement === this.refs.minutes && String(newValue).length > 2 || this.state.activeElement === this.refs.seconds && String(newValue).length > 2) {
                return;
            }

if (this.isMonthActive()) {
                if (newValue > 12) {
                    if (this.state.selectionRange === 0) {
                        newValue = 10;
                    } else {
                        newValue = 12;
                    }
                }
                newValue--;
            }

if (this.isDayActive()) {
                if (newValue > 31) {
                    if (this.state.selectionRange === 0) {
                        newValue = 30;
                    } else {
                        newValue = 31;
                    }
                }
            }

if (this.isHoursActive()) {
                if (newValue > 23) {
                    if (this.state.selectionRange === 0) {
                        newValue = 20;
                    } else {
                        newValue = 23;
                    }
                }
            }

if (this.isMinutesActive() || this.isSecondsActive()) {
                if (newValue > 59) {
                    if (this.state.selectionRange === 0) {
                        newValue = 50;
                    } else {
                        newValue = 59;
                    }
                }
            }

var newSelectionRange = selectionStart + 1;
            if (this.state.activeElement === this.refs.year && this.state.selectionRange + 1 === 4 || this.state.activeElement === this.refs.month && this.state.selectionRange + 1 === 2 || this.state.activeElement === this.refs.day && this.state.selectionRange + 1 === 2 || this.state.activeElement === this.refs.hours && this.state.selectionRange + 1 === 2 || this.state.activeElement === this.refs.minutes && this.state.selectionRange + 1 === 2) {
                this.focusNext();
                newSelectionRange = 0;
            }

this.setState({
                date: setDatePart(this.state.date, e.target.name, newValue),
                selectionRange: newSelectionRange
            });
        }
    },
    format: function format(value) {
        var string = String(value);
        if (string.length === 1) {
            return "0" + string;
        } else {
            return string;
        }
    },
    delayed: function delayed(fn) {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        this.timeout = setTimeout(fn, 0);
    },
    hideHelp: function hideHelp() {
        this.setState({
            helpIsVisible: false
        });
        this.helpTimeout = setTimeout(this.changeHelp, 200);
    },
    showHelp: function showHelp() {
        this.setState({
            helpIsVisible: true
        });
        this.helpTimeout = setTimeout(this.hideHelp, this.props.helpTime);
    },
    changeHelp: function changeHelp() {
        this.setState({
            helpIndex: (this.state.helpIndex + 1) % this.props.helpTexts.length
        });
        this.helpTimeout = setTimeout(this.showHelp, 200);
    },
    componentDidMount: function componentDidMount() {
        this.hideHelp = this.hideHelp.bind(this);
        this.showHelp = this.showHelp.bind(this);
        this.changeHelp = this.changeHelp.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.changeHelp();
    },
    componentWillUnmount: function componentWillUnmount() {
        clearTimeout(this.helpTimeout);
        this.helpTimeout = null;
    },
    componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
        var _this = this;

if (this.state.activeElement) {
            if (this.state.activeElement !== prevState.activeElement) {
                this.state.activeElement.focus();
            }
            this.delayed(function() {
                _this.state.activeElement.setSelectionRange(_this.state.selectionRange, _this.state.selectionRange);
                _this.timeout = null;
            });
        }
    },
    hasFocus: function hasFocus() {
        return document.activeElement === this.refs.year || document.activeElement === this.refs.month || document.activeElement === this.refs.day || document.activeElement === this.refs.hours || document.activeElement === this.refs.minutes || document.activeElement === this.refs.seconds;
    },
    handleBlur: function handleBlur(e) {
        var _this2 = this;

if (this.blurTimeout) {
            clearTimeout(this.blurTimeout);
            this.blurTimeout = null;
        }
        this.blurTimeout = setTimeout(function() {
            if (document.activeElement === null || document.activeElement !== _this2.refs.year && document.activeElement !== _this2.refs.month && document.activeElement !== _this2.refs.day && document.activeElement !== _this2.refs.hours && document.activeElement !== _this2.refs.minutes && document.activeElement !== _this2.refs.seconds) {
                _this2.setState({
                    activeElement: null,
                    selectionRange: 0
                });
            }
        }, 0);
    },
    handleMouseDown: function handleMouseDown(e) {
        e.preventDefault();
        if (this.state.isDragging === false && e.button === 0) {
            this.setState({
                isDragging: true,
                activeElement: e.target,
                selectionRange: 0
            });

this.current = this.start = e.clientY;

if (this.state.isDragging) {
            window.requestAnimationFrame(this.handleFrame);
        }
    },
    handleMouseMove: function handleMouseMove(e) {
        this.current = e.clientY;
    },
    isHelpVisible: function isHelpVisible() {
        return this.hasFocus() && this.state.helpIsVisible;
    },
    renderHelp: function renderHelp() {
        var classes = "DateInput__help " + (this.isHelpVisible() ? "DateInput__is-in" : "DateInput__is-out");
        var help = this.props.helpTexts[this.state.helpIndex];
        return React.createElement(
            "div", {
                className: classes
            },
            help
        );
    },
    render: function render() {
        var labels = getLabels();
        var date = getDestructuredDate(this.state.date);
        var help = this.renderHelp();
        return React.createElement(
            "div", {
                className: "DateInput"
            },
            React.createElement(
                "div", {
                    className: "DateInput__container"
                },
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "year"
                        },
                        labels.y
                    ),
                    React.createElement("input", {
                        ref: "year",
                        type: "text",
                        name: "year",
                        id: "year",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.y)
                    })
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__separator"
                    },
                    "/"
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "month"
                        },
                        labels.m
                    ),
                    React.createElement("input", {
                        ref: "month",
                        type: "text",
                        name: "month",
                        id: "month",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.m + 1)
                    })
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__separator"
                    },
                    "/"
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "day"
                        },
                        labels.d
                    ),
                    React.createElement("input", {
                        ref: "day",
                        type: "text",
                        name: "day",
                        id: "day",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.d)
                    })
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "hours"
                        },
                        labels.h
                    ),
                    React.createElement("input", {
                        ref: "hours",
                        type: "text",
                        name: "hours",
                        id: "hours",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.h)
                    })
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__separator"
                    },
                    ":"
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "minutes"
                        },
                        labels.i
                    ),
                    React.createElement("input", {
                        ref: "minutes",
                        type: "text",
                        name: "minutes",
                        id: "minutes",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.i)
                    })
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__separator"
                    },
                    ":"
                ),
                React.createElement(
                    "div", {
                        className: "DateInput__group"
                    },
                    React.createElement(
                        "label", {
                            "for": "seconds"
                        },
                        labels.s
                    ),
                    React.createElement("input", {
                        ref: "seconds",
                        type: "text",
                        name: "seconds",
                        id: "seconds",
                        onMouseDown: this.handleMouseDown,
                        onBlur: this.handleBlur,
                        onClick: this.handleClick,
                        onKeyDown: this.handleKey,
                        onPaste: this.handlePaste,
                        onCopy: this.handleCopy,
                        value: this.format(date.s)
                    })
                )
            ),
            help
        );
    }
});

ReactDOM.render(React.createElement(DateInput, null), document.querySelector("#Application"));

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: -webkit-linear-gradient(left top, #333, #111);
    background: linear-gradient(left top, #333, #111);
    font-family: "Lato", sans-serif;
}
#Application {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.DateInput .DateInput__help {
    text-align: center;
    -webkit-transition: 0.2s ease-out all;
    transition: 0.2s ease-out all;
    margin-top: 2rem;
}
.DateInput .DateInput__is-in {
    opacity: 1;
}
.DateInput .DateInput__is-out {
    opacity: 0;
}
.DateInput .DateInput__container {
    width: 100%;
}
.DateInput .DateInput__container .DateInput__separator {
    display: inline-block;
    font-size: 250%;
    font-weight: 100;
    text-align: center;
}
.DateInput .DateInput__container .DateInput__group {
    width: calc(100% / 6.5);
    display: inline-block;
}
.DateInput .DateInput__container .DateInput__group label {
    display: block;
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}
.DateInput .DateInput__container .DateInput__group input {
    padding-top: 0.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 250%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    border-top: 2px solid transparent;
    font-weight: 200;
}
.DateInput .DateInput__container .DateInput__group input::-moz-selection {
    background: transparent;
}
.DateInput .DateInput__container .DateInput__group input::selection {
    background: transparent;
}
.DateInput .DateInput__container .DateInput__group input:focus {
    border-top: 2px solid #fff;
    -webkit-transition: 0.4s ease-out all;
    transition: 0.4s ease-out all;
}

HTML

Date Input with React and React-dom.js 通过构建一个日期控件来学习React.js的使用。

react, widget

编辑器支持Emmet

快捷键

Date Input with React and React-dom.js 通过构建一个日期控件来学习React.js的使用。

react, widget

基于React.js实现的媒体播放器

基于React.js实现游戏风格的待办任务列表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：