0.2.31 • Published 4 years ago
react-moment-input v0.2.31
react-moment-input
React datetime picker powered by momentjs
The design is from http://wangzuo.github.io/input-moment/.
The icon is from ionicons.
Demo: react-moment-input.
Source: react-moment-input.
Issue tracker: react-moment-input
Support:
- Date time picker
- Translations
- Different date formats, support for AM/PM YYYY-MM-DD hh:mm AA
- Tab selection
- Month selection
- Current day
- Days of week order
- Min and max date
- Icon support
- Custom style
Installation
npm i react-moment-input --save
Usage
import MomentInput from 'react-moment-input';
<MomentInput
max={moment().add(5,'days')}
min={moment()}
format="YYYY-MM-DD HH:mm"
options={true}
readOnly={false}
icon={false}
onChange={(date)=> {console.log(date)}} />
Usage Available properties
Property | Type | Content | Default Value |
---|---|---|---|
min | moment | Min selected date | undefined |
max | moment | Max selected date | undefined |
value | moment | The current value | undefined |
defaultValue | moment | The current value, only apply on component mount | undefined |
format | string | Date time format | YYYY-MM-DD HH:mm |
tab | Number | Selected tab: 0-Calendar, 1-Time, 2-Year | 0 |
options | boolean | Show header options | true |
position | string | Picker positions : 'bottom' or 'right' | bottom |
readOnly | boolean | Disable input | true |
monthSelect | boolean | Disable month select control | false |
today | boolean | Today button | false |
isOpen | boolean | Show picker | false |
showIcon | boolean | Show calendar icon | false |
daysOfWeek | array | Days order in a week | ['Sun','Mon','Tue', '...'] |
translations | JSON | {DATE:"Date", TIMES:"Times", DAYS_MON:"Mon", MONTHS_OCTOBER:"October"} | {} |
style | JSON | Container style | undefined |
className | string | Container class | r-input-group |
inputStyle | JSON | Input style | undefined |
inputClassName | string | Input class | r-input |
onChange | function | Emit value on every click (value, name) | undefined |
onSave | function | Emit value on save click (value, name) | undefined |
onClose | function | Emit value on picker close (value, name) | undefined |
enableInputClick | boolean | Show picker | undefined |
iconRendered | function | Renders custom component as icon | undefined |
autoClose | boolean | Close picker on value change | undefined |
Development
- npm install
- npm start
- http://localhost:8081
License
ISC
0.2.31
4 years ago
0.2.30
6 years ago
0.2.29
6 years ago
0.2.28
6 years ago
0.2.27
6 years ago
0.2.26
6 years ago
0.2.25
6 years ago
0.2.24
6 years ago
0.2.23
6 years ago
0.2.22
6 years ago
0.2.21
6 years ago
0.2.20
6 years ago
0.2.19
6 years ago
0.2.18
6 years ago
0.2.17
6 years ago
0.2.16
6 years ago
0.2.15
6 years ago
0.2.14
6 years ago
0.2.13
7 years ago
0.2.12
7 years ago
0.2.11
7 years ago
0.2.10
7 years ago
0.2.9
7 years ago
0.2.8
7 years ago
0.2.7
7 years ago
0.2.6
7 years ago
0.2.5
7 years ago
0.2.4
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.9
7 years ago
0.1.8
7 years ago
0.1.7
7 years ago
0.1.6
7 years ago
0.1.5
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago