semantic-ui-react-datetimeinput
Time and Date input controls with step buttons for Semantic UI React.
DateInput
TimeInput
DateInput
TimeInput
Controls with large + and - buttons are ideal for mobile sites. These controls are specifically designed for analytics purposes
where you want to specify "start" date/time and "end" date/time. These can be specified with valueType prop of the components.
Double-clicking "start" type input value, sets its value to minimum value and double-clicking "end" type input value sets its value to maximum value.
Additionally, for example, Time input control can be configured to increment/decrement minutes by 5, 10 or 15 minutes whichever is mostly suitable for
your analytics need. Similarly Date input control by default decrements/increments day value on double click by one week (7 days) and month value
on double click by one quarter (3 months). All of these increment/decrement amounts for each part of time and date are fully configurable.
Prerequisites
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.87.0"
Installation
npm install --save semantic-ui-react-datetimeinput
Demo
TimeInput, DateInput and DateTimeInput demo
Example usage
import React from 'react';
import { DateInput, TimeInput } from 'semantic-ui-react-datetimeinput';
class DateAndTimeInputExample extends React.Component {
constructor(props) {
super(props);
this.state = {
dateValue: new Date()
};
}
changeDateValue = (newDateValue) => {
this.setState({ dateValue: newDateValue });
}
render() => {(
<DateInput dateValue={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<TimeInput dateValue={this.state.dateValue} onDateValueChange={this.changeDateValue} />
)};
}
Render TimeInput, DateInput or DateTimeInput with step buttons on outside of control (this is default behavior, if buttonPlacement is not specified)
<TimeInput buttonPlacement="buttonsOutside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateInput buttonPlacement="buttonsOutside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateTimeInput buttonPlacement="buttonsOutside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
Render TimeInput, DateInput or DateTimeInput with step buttons inside control
<TimeInput buttonPlacement="buttonsInside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateInput buttonPlacement="buttonsInside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateTimeInput buttonPlacement="buttonsInside" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
More examples in demo/demo.tsx file
Mandatory TimeInput, DateInput and DateTimeInput properties
dateValue: Date,
onDateValueChange: (newDateValue: Date) => void,
Common optional properties
| property | description |
|---|---|
| buttonPlacement | Specifies how step buttons are placed |
| focusColor | Specifies color for focused input text |
| doubleClickDelayInMillis | Specifies button double click delay in milliseconds |
| showTooltipDelayInMillis | Specifies a delay in milliseconds for showing a tooltip |
| showTooltips | Specifies if tooltips are shown |
| size | Specifies the size of the control |
| valueType | Specifies if value type, ie. start or end time/date or unspecified |
Common optional property types
buttonPlacement: 'buttonsInside' | 'buttonsOutside',
focusColor: string,
doubleClickDelayInMillis: number,
showTooltipDelayInMillis: number,
showTooltips: boolean,
size: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive',
valueType: 'start' | 'end' | 'unspecified'
Default values for common optional properties
buttonPlacement: 'buttonsOutside',
focusColor: '#85b7d9',
doubleClickDelayInMillis: 250,
showTooltipDelayInMillis: 500,
showTooltips: true,
size: 'small',
valueType: 'start'
TimeInput optional properties
| property | description |
|---|---|
| hourSingleClickStepCount | Specifies how many hours a single click of a button increments or decrements current date value |
| hourDoubleClickStepCount | Specifies how many hours a double click of a button increments or decrements current date value, zero value disables double clicks |
| minuteSingleClickStepCount | Specifies how many minutes a single click of a button increments or decrements current date value |
| minuteDoubleClickStepCount | Specifies how many minutes a double click of a button increments or decrements current date value, zero value disables double clicks |
TimeInput optional property types
hourSingleClickStepCount: number,
hourDoubleClickStepCount: number,
minuteSingleClickStepCount: number,
minuteDoubleClickStepCount: number
Default values for TimeInput optional properties
hourSingleClickStepCount: 1,
hourDoubleClickStepCount: 4,
minuteSingleClickStepCount: 1,
minuteDoubleClickStepCount: 5
DateInput optional properties
| property | description |
|---|---|
| daySingleClickStepCount | Specifies how many days a single click of a button increments or decrements current date value |
| dayDoubleClickStepCount | Specifies how many days a double click of a button increments or decrements current date value, zero value disables double clicks |
| monthSingleClickStepCount | Specifies how many months a single click of a button increments or decrements current date value |
| monthDoubleClickStepCount | Specifies how many months a double click of a button increments or decrements current date value, zero value disables double clicks |
| yearSingleClickStepCount | Specifies how many years a single click of a button increments or decrements current date value |
| yearDoubleClickStepCount | Specifies how many years a double click of a button increments or decrements current date value, zero value disables double clicks |
TimeInput optional property types
daySingleClickStepCount: number,
dayDoubleClickStepCount: number,
monthSingleClickStepCount: number,
monthDoubleClickStepCount: number,
yearhSingleClickStepCount: number,
yearDoubleClickStepCount: number
Default values for TimeInput optional properties
daySingleClickStepCount: 1,
dayDoubleClickStepCount: 7,
monthSingleClickStepCount: 1,
monthDoubleClickStepCount: 3,
yearSingleClickStepCount: 1,
yearhDoubleClickStepCount: 5
Keyboard actions
Following keyboard actions are available when a certain input is focused
| key | action |
|---|---|
| ArrowUp | Increments value like a button single click |
| ArrowDown | Decrements value like a button single click |
| + | Increments value like a button single click |
| - | Decrements value like a button single click |
| PageUp | Increments value like a button double click |
| PageDown | Decrements value like a double button click |
| Home | Sets value to minimum value |
| End | Sets value to maximum value |
| Ctrl+ArrowUp | Increments value like a button double click |
| Ctrl+ArrowDown | Decrements value like a button double click |
| Ctrl + + | Increments value like a button double click |
| Ctrl + - | Decrements value like a button double click |
Styling example
styles.css
.timeInput .ui.button, .dateInput .ui.button {
background-color: transparent;
}
.dateTimeInput {
display: flex;
}
.dateTimeInput .timeInput {
margin-left: 2em;
}
Applying CSS using className
<TimeInput className="timeInput" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateInput className="dateInput" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
<DateTimeInput className="dateTimeInput" value={this.state.dateValue} onDateValueChange={this.changeDateValue} />
License
MIT License
