material datepicker code example

Example 1: material ui datepicke

import React, { Fragment, useState } from "react";
import { TextField } from "@material-ui/core";
import { MobileDatePicker, DesktopDatePicker, DatePicker } from "@material-ui/pickers";

function DatePickersVariants(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MobileDatePicker
        clearable
        label="For mobile"
        inputFormat="MM/dd/yyyy"
        toolbarPlaceholder="Enter Date"
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={props => <TextField {...props} />}
      />

      <DesktopDatePicker
        autoOk
        label="For desktop"
        minDate={new Date("2017-01-01")}
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={props => <TextField {...props} />}
      />

      <DatePicker
        disableFuture
        label="Responsive"
        openTo="year"
        views={["year", "month", "date"]}
        value={selectedDate}
        onChange={date => handleDateChange(date)}
        renderInput={props => <TextField {...props} />}
      />
    </Fragment>
  );
}

export default DatePickersVariants;

Example 2: material datepicker

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

Example 3: material date picker

<mat-date-range-input>
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-range-input>

Example 4: date time picker in angular material

<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"
placeholder="Date" show-todays-date="" minutes="true" min-date="date" show-icon="true"
ng-model="dateTime" class=" dtp-no-msclear dtp-input md-input">

Example 5: date range MUI

$ npm install material-ui-datetime-range-picker