Time and Date input controls with step buttons for Semantic UI React

by React

semantic-ui-react-datetimeinput

Time and Date input controls with step buttons for Semantic UI React.

DateInput

TimeInput

DateInput

TimeInput

View Demo View Github

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