Skip to content

Implementation of a datetime picker for react using pure semantic components and momentjs locals capabilities

Notifications You must be signed in to change notification settings

Charlicus/react-semantic-datetime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-semantic-datetime

Implementation of a datetime picker for react using pure semantic components and momentjs locals capabilities

  • Pure react-semantic-ui components (no css)
  • Use momentjs for localization (no translation needed)
  • Responsive

Gif animation displayed on github page

Dependencies

  • momentjs
  • react
  • semantic-ui (css)
  • react-semantic-ui

This module is intented to be used only for react-semantic-ui projects

Utilization

You can also see in the demo file for the code behind the GIF (Just open the index.html file for the demo)

import moment from 'moment';
import DatetimePicker from 'react-semantic-datetime';

moment.locale('en'); // Important for calendar localization including translation (tested with 'fr' and 'en')

class MyComponent extends React.Component{
    constructor(){
        super();
        this.state({
            myDate:moment()
        })
    }
    render(){
        return (
            <DatetimePicker
                color="teal" // optional (default:teal)
                onChange={(value)=>{this.setState({myDate:value})}} // Mandatory
                value={moment(this.state.myDate)} // Mandatory
                time={true}// optional to show time selection, just a date picket if false (default:true)
            />
        )
    }
}

export default MyComponent

License

Moment.js is freely distributable under the terms of the MIT license.

About

Implementation of a datetime picker for react using pure semantic components and momentjs locals capabilities

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published