semantic-ui-react-datetimeinput v1.0.4

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} />

Mandatory TimeInput, DateInput and DateTimeInput properties

dateValue: Date, 
onDateValueChange: (newDateValue: Date) => void,
     

Common optional properties

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

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

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

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