material-ui datepicker range code example

Example 1: 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 2: DateRangePicker start and end date in one Textfeild material ui

<DateRangePicker
     renderInput={({ inputProps, ...startProps }, endProps) => {
          const startValue = inputProps.value;
          delete inputProps.value
          return (
            <TextField
              {...startProps}
              inputProps={inputProps}
              value={`${startValue}-${endProps.inputProps.value}`}
           />
)}/>

Tags:

Html Example