Material UI Next Datepicker

Description

This repository act as a sample of creating a datepicker in Material UI Next or it can be imported as a datepicker component.

Prerequisite


npm install material-ui-next-datepicker --save


Screenshot

!Image of Material UI Clockpicker
Options


name: string
value: Date
onChange: (value:Date) => void
label?: string
error?: string
min?: Date
max?: Date
fullWidth?: boolean
dialog?: boolean


Basic setup

1. Make sure you installed Material UI Next.
2. Install this package via npm.
3. Import this package and use like the following:

tsx
import DateFormatInput from 'material-ui-next-datepicker'
class YourComponent extends React.Component<{}, YourComponentState> {
  onChange = (date:Date) => {
    console.log(date)
    this.setState({date})
  } 
  render() {
    const {date} = this.state
    return (
      

        
      

    )
  } 
}
interface YourComponentState {
  date: Date
}

Material UI Next Datepicker

Description

This repository act as a sample of creating a datepicker in Material UI Next or it can be imported as a datepicker component.

Prerequisite


npm install material-ui-next-datepicker --save


Screenshot

!Image of Material UI Clockpicker
Options


name: string
value: Date
onChange: (value:Date) => void
label?: string
error?: string
min?: Date
max?: Date
fullWidth?: boolean
dialog?: boolean


Basic setup

1. Make sure you installed Material UI Next.
2. Install this package via npm.
3. Import this package and use like the following:

tsx
import DateFormatInput from 'material-ui-next-datepicker'
class YourComponent extends React.Component<{}, YourComponentState> {
  onChange = (date:Date) => {
    console.log(date)
    this.setState({date})
  } 
  render() {
    const {date} = this.state
    return (
      

        
      

    )
  } 
}
interface YourComponentState {
  date: Date
}