🎉Welcome to Bit Cloud's new home!Start freeor check out our newcommunity site

date-picker

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
24,100
VISIBILITY
Public
PUBLISHED
2 years ago
SIZE
37 KB
A DatePicker is a text input to capture a date.
1 contributor
Install date-picker as a package?
Copied
npm i @bit/nexxtway.react-rainbow.date-picker
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
components/DatePicker/index.js
253 Lines(190 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
/* eslint-disable react/prop-types */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CalendarIcon from './calendarIcon';
import formatDate from './helpers/formatDate';
import withReduxForm from '../../libs/hocs/withReduxForm';
import { ENTER_KEY, SPACE_KEY } from '../../libs/constants';
import StyledContainer from './styled/container';
import StyledModal from './styled/modal';
import StyledHeader from './styled/header';
import StyledHeaderTitle from './styled/headerTitle';
import StyledCalendar from './styled/calendar';
import StyledInput from './styled/input';
import { Consumer } from '../Application/context';
import { getLocale } from '../../libs/utils';

/**
 * A DatePicker is a text input to capture a date.
 * @category Form
 */
class DatePickerComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
        };
        this.inputRef = React.createRef();
        this.handleChange = this.handleChange.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
    }

    handleChange(...args) {
        const { onChange } = this.props;
        this.closeModal();
        onChange(...args);
    }

    handleBlur() {
        const { onBlur, value } = this.props;
        onBlur(value);
    }

    handleFocus() {
        const { onFocus, value } = this.props;
        onFocus(value);
    }

    handleKeyDown(event) {
        const { keyCode } = event;
        const { readOnly } = this.props;
        const shouldOpenModal = (keyCode === ENTER_KEY || keyCode === SPACE_KEY) && !readOnly;
        if (shouldOpenModal) {
            this.setState({ isOpen: true });
        }
    }

    openModal(event) {
        const { onClick, readOnly } = this.props;
        if (!readOnly) {
            this.setState({ isOpen: true });
            onClick(event);
        }
    }

    closeModal() {
        this.setState({ isOpen: false });
    }

    /**
     * Sets focus on the element.
     * @public
     */
    focus() {
        this.inputRef.current.focus();
    }

    /**
     * Sets click on the element.
     * @public
     */
    click() {
        this.inputRef.current.click();
    }

    /**
     * Sets blur on the element.
     * @public
     */
    blur() {
        this.inputRef.current.blur();
    }

    render() {
        const {
            value,
            minDate,
            maxDate,
            placeholder,
            label,
            required,
            style,
            className,
            formatStyle,
            hideLabel,
            name,
            bottomHelpText,
            isCentered,
            error,
            readOnly,
            disabled,
            tabIndex,
            id,
            locale,
        } = this.props;
        const { isOpen } = this.state;

        const formattedDate = formatDate(value, formatStyle, locale);

        return (
            <StyledContainer id={id} className={className} style={style}>
                <StyledInput
                    ref={this.inputRef}
                    label={label}
                    placeholder={placeholder}
                    icon={<CalendarIcon />}
                    iconPosition="right"
                    required={required}
                    value={formattedDate}
                    onKeyDown={this.handleKeyDown}
                    onClick={this.openModal}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    hideLabel={hideLabel}
                    name={name}
                    bottomHelpText={bottomHelpText}
                    isCentered={isCentered}
                    error={error}
                    readOnly={readOnly}
                    disabled={disabled}
                    tabIndex={tabIndex}
                />

                <StyledModal isOpen={isOpen} onRequestClose={this.closeModal}>
                    <StyledHeader>
                        <StyledHeaderTitle>{formattedDate}</StyledHeaderTitle>
                    </StyledHeader>
                    <StyledCalendar
                        value={value}
                        minDate={minDate}
                        maxDate={maxDate}
                        formatStyle={formatStyle}
                        onChange={this.handleChange}
                        locale={locale}
                    />
                </StyledModal>
            </StyledContainer>
        );
    }
}

function DatePicker({ locale, ...rest }) {
    return (
        <Consumer>
            {values => <DatePickerComponent locale={getLocale(values, locale)} {...rest} />}
        </Consumer>
    );
}

DatePicker.propTypes = {
    /** Sets the date for the DatePicker programmatically. */
    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
    /** The ending of a range of valid dates. The range includes the endDate.
     * The default value is current date + 100 years. */
    maxDate: PropTypes.instanceOf(Date),
    /** The beginning of a range of valid dates. The range includes the startDate.
     * The default value is current date - 100 years. */
    minDate: PropTypes.instanceOf(Date),
    /**  The date format style to display in the input field.
     * Valid values are small, medium, and large. */
    formatStyle: PropTypes.oneOf(['small', 'medium', 'large']),
    /** The action triggered when a value attribute changes. */
    onChange: PropTypes.func,
    /** Text that is displayed when the DatePicker is empty,
     * to prompt the user for a valid entry. */
    placeholder: PropTypes.string,
    /** Text label for the DatePicker. */
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** A boolean to hide the DatePicker label. */
    hideLabel: PropTypes.bool,
    /** Specifies that the DatePicker field must be filled out before submitting the form.
     * This value defaults to false. */
    required: PropTypes.bool,
    /** The name of the DatePicker. */
    name: PropTypes.string,
    /** Shows the help message below the DatePicker. */
    bottomHelpText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** Specifies that the DatePicker text will be centered. This value defaults to false. */
    isCentered: PropTypes.bool,
    /** Specifies that the DatePicker must be filled out before submitting the form. */
    error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** Specifies that the DatePicker is read-only. This value defaults to false. */
    readOnly: PropTypes.bool,
    /** Specifies that the DatePicker element should be disabled. This value defaults to false. */
    disabled: PropTypes.bool,
    /** Specifies the tab order of an element (when the tab button is used for navigating). */
    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    /** The action triggered when the element is clicked. */
    onClick: PropTypes.func,
    /** The action triggered when the element receives focus. */
    onFocus: PropTypes.func,
    /** The action triggered when the element releases focus. */
    onBlur: PropTypes.func,
    /** The id of the outer element. */
    id: PropTypes.string,
    /** A CSS class for the outer element, in addition to the component's base classes. */
    className: PropTypes.string,
    /** An object with custom style applied to the outer element. */
    style: PropTypes.object,
    /** The DatePicker locale. Defaults to browser's language. */
    locale: PropTypes.string,
};

DatePicker.defaultProps = {
    value: undefined,
    minDate: undefined,
    maxDate: undefined,
    formatStyle: 'medium',
    onChange: () => {},
    placeholder: undefined,
    label: undefined,
    hideLabel: false,
    required: false,
    name: undefined,
    bottomHelpText: null,
    isCentered: false,
    error: null,
    readOnly: false,
    disabled: false,
    tabIndex: undefined,
    onClick: () => {},
    onFocus: () => {},
    onBlur: () => {},
    id: undefined,
    className: undefined,
    style: undefined,
    locale: undefined,
};

export default withReduxForm(DatePicker);
Help and resources