DatePicker

link - developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

import * as React from 'react';  
import { DefaultButton } from '@fluentui/react';  
import { Dropdown, IDropdownOption } from from '@fluentui/react';  
import { DatePicker, DayOfWeek, IDatePickerStrings } from '@fluentui/react';  

const DayPickerStrings: IDatePickerStrings = { 
  months: [ 
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ], 

  shortMonths: [ 
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ], 

  days: [ 
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
  ], 

  shortDays: [ 
    'S',
    'M',
    'T',
    'W',
    'T',
    'F',
    'S'
  ], 

  goToToday: 'Go to today', 
  prevMonthAriaLabel: 'Go to previous month', 
  nextMonthAriaLabel: 'Go to next month', 
  prevYearAriaLabel: 'Go to previous year', 
  nextYearAriaLabel: 'Go to next year', 

  isRequiredErrorMessage: 'Start date is required.', 
  invalidInputErrorMessage: 'Invalid date format.' 
}; 

export interface IDatePickerBasicExampleState { 
  firstDayOfWeek?: DayOfWeek; 
  value?: Date; 
} 

export class DatePickerBasicExample extends React.Component<any, IDatePickerBasicExampleState> { 
  constructor() { 
    super(); 

    this.state = { 
      firstDayOfWeek: DayOfWeek.Sunday, 
      value: null 
    }; 
  } 

  render() { 
    let { firstDayOfWeek, value } = this.state; 

    const desc = 'This field is required. One of the support input formats is year dash month dash day.'; 

    return ( 
      <div> 

        <DatePicker 
          label='Start date' 
          isRequired={ false } 
          allowTextInput={ true } 
          ariaLabel={ desc } 
          firstDayOfWeek={ firstDayOfWeek } 
          strings={ DayPickerStrings } 
          value={ value } 
          onSelectDate={ date => this.setState({ value: date }) } 
        /> 
        <DefaultButton onClick={ () => this.setState({ value: null }) } text='Clear' />  
        <br/> 
        <br/> 
      <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' /> 

      </div> 
    ); 
  } 

  _onDropdownChanged(option: IDropdownOption) { 
  } 
} 

**DetailsList 
'BET_DetailsList.js

/* tslint:disable:no-unused-variable */ 

import * as React from 'react';  

/* tslint:enable:no-unused-variable */ 

import { TextField } from 'office-ui-fabric-react/lib/TextField';  

import { Toggle } from 'office-ui-fabric-react/lib/Toggle';  

import { DetailsList,  DetailsListLayoutMode,  Selection,  IColumn} from 'office-ui-fabric-react/lib/DetailsList';  

import { Icon } from 'office-ui-fabric-react/lib/Icon';  

import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';  


let _items: IDocument[] = []; 

const fileIcons: { name: string; }[] = [ 
  { 'name': 'accdb' }, 
  { 'name': 'csv' }, 
  { 'name': 'docx' }, 
  { 'name': 'dotx' }, 
  { 'name': 'mpp' }, 
  { 'name': 'mpt' }, 
  { 'name': 'odp' }, 
  { 'name': 'ods' }, 
  { 'name': 'odt' }, 
  { 'name': 'one' }, 
  { 'name': 'onepkg' }, 
  { 'name': 'onetoc' }, 
  { 'name': 'potx' }, 
  { 'name': 'ppsx' }, 
  { 'name': 'pptx' }, 
  { 'name': 'pub' }, 
  { 'name': 'vsdx' }, 
  { 'name': 'vssx' }, 
  { 'name': 'vstx' }, 
  { 'name': 'xls' }, 
  { 'name': 'xlsx' }, 
  { 'name': 'xltx' }, 
  { 'name': 'xsn' } 
]; 

export interface IDetailsListDocumentsExampleState { 
  columns: IColumn[]; 
  items: IDocument[]; 
  selectionDetails: string; 
  isCompactMode: boolean; 
} 

export interface IDocument { 
  [key: string]: any; 
  name: string; 
  value: string; 
  iconName: string; 
  modifiedBy: string; 
  dateModified: string; 
  dateModifiedValue: number; 
  fileSize: string; 
  fileSizeRaw: number; 
} 

export class DetailsListDocumentsExample extends React.Component<any, IDetailsListDocumentsExampleState> { 
  _selection: Selection; 

  constructor(props: any) { 
    super(props); 

    //  Populate with items for demos. 
    if (_items.length === 0) { 
      for (let i = 0; i < 20; i++) { 
        const randomDate = this._randomDate(new Date(2017, 0, 1), new Date()); 
        const randomFileSize = this._randomFileSize(); 
        const randomFileType = this._randomFileIcon(); 
        let fileName: string = '';  
        let userName: string = '';  
        fileName = fileName.charAt(0).toUpperCase() + fileName.slice(1).concat(`.${randomFileType.docType}`); 
        userName = userName.split(' ').map((name: string) => name.charAt(0).toUpperCase() + name.slice(1)).join(' '); 
        _items.push({ 
          name: fileName, 
          value: fileName, 
          iconName: randomFileType.url, 
          modifiedBy: userName, 
          dateModified: randomDate.dateFormatted, 
          dateModifiedValue: randomDate.value, 
          fileSize: randomFileSize.value, 
          fileSizeRaw: randomFileSize.rawSize 
        }); 
      } 
      _items = this._sortItems(_items, 'name');  
    } 

    const _columns: IColumn[] = [ 
      { 
        key: 'column1',  
        name: 'File Type', 
        headerClassName: 'DetailsListExample-header--FileIcon',  
        className: 'DetailsListExample-cell--FileIcon',  
        iconClassName: 'DetailsListExample-Header-FileTypeIcon',  
        iconName: 'Page',  
        isIconOnly: true, 
        fieldName: 'name',  
        minWidth: 16, 
        maxWidth: 16, 
        onRender: (item: IDocument) => { 
          return ( 
            <img src={ item.iconName } 
              className={ 'DetailsListExample-documentIconImage' } />  
          ); 
        } 
      }, 
      { 
        key: 'column2',  
        name: 'Name',  
        fieldName: 'name',  
        minWidth: 110, 
        maxWidth: 250, 
        isRowHeader: true, 
        isResizable: true, 
        isSorted: true, 
        isSortedDescending: false, 
        onColumnClick: this._onColumnClick, 
        data: 'string',  
        isPadded: true 
      }, 
      { 
        key: 'column3',  
        name: 'Date Modified', 
        fieldName: 'dateModifiedValue',  
        minWidth: 70, 
        maxWidth: 90, 
        isResizable: true, 
        onColumnClick: this._onColumnClick, 
        data: 'number',  
        onRender: (item: IDocument) => { 
          return ( 
            <span 
              data-is-focusable={ true }> 
              { item.dateModified } 
            </span> 
          ); 
        }, 
        isPadded: true 
      }, 
      { 
        key: 'column4',  
        name: 'Modified By', 
        fieldName: 'modifiedBy',  
        minWidth: 70, 
        maxWidth: 90, 
        isResizable: true, 
        data: 'string',  
        onColumnClick: this._onColumnClick, 
        onRender: (item: IDocument) => { 
          return ( 
            <span 
              data-is-focusable={ true }> 
              { item.modifiedBy } 
            </span> 
          ); 
        }, 
        isPadded: true 
      }, 
      { 
        key: 'column5',  
        name: 'File Size', 
        fieldName: 'fileSizeRaw',  
        minWidth: 70, 
        maxWidth: 90, 
        isResizable: true, 
        data: 'number',  
        onColumnClick: this._onColumnClick, 
        onRender: (item: IDocument) => { 
          return ( 
            <span 
              data-is-focusable={ true }> 
              { item.fileSize } 
            </span> 
          ); 
        } 
      }, 
    ]; 

    this._selection = new Selection({ 
      onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() }) 
    }); 

    this.state = { 
      items: _items, 
      columns: _columns, 
      selectionDetails: this._getSelectionDetails(), 
      isCompactMode: false 
    }; 
  } 

  render() { 
    let { columns, isCompactMode, items, selectionDetails } = this.state; 

    return ( 
      <div> 
        <Toggle 
          label='Enable Compact Mode' 
          checked={ isCompactMode } 
          onChanged={ checked => this.setState({ isCompactMode: checked }) } 
          onText='Compact'  
          offText='Normal'  
        /> 
        <div>{ selectionDetails }</div> 
        <TextField 
          label='Filter by name:' 
          onChanged={ text => this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }) } 
        /> 
        <MarqueeSelection selection={ this._selection }> 
          <DetailsList 
            items={ items } 
            compact={ isCompactMode } 
            columns={ columns } 
            setKey='set'  
            layoutMode={ DetailsListLayoutMode.justified } 
            isHeaderVisible={ true } 
            selection={ this._selection } 
            selectionPreservedOnEmptyClick={ true } 
            onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) } 
          /> 
        </MarqueeSelection> 
      </div> 
    ); 
  } 

  _randomDate(start: Date, end: Date): { value: number; dateFormatted: string; } { 
    const date: Date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); 
    const dateData = { 
      value: date.valueOf(), 
      dateFormatted: date.toLocaleDateString() 
    }; 
    return dateData; 
  } 

  _randomFileIcon(): { docType: string; url: string; } { 
    const docType: string = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name; 
    return { 
      docType, 
      url: `https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/${docType}_16x1.svg` 
    }; 
  } 

  _randomFileSize(): { value: string; rawSize: number; } { 
    const fileSize: number = Math.floor(Math.random() * 100) + 30; 
    return { 
      value: `${fileSize} KB`, 
      rawSize: fileSize 
    }; 
  } 

  _getSelectionDetails(): string { 
    let selectionCount = this._selection.getSelectedCount(); 

    switch (selectionCount) { 
      case 0: 
        return 'No items selected'; 
      case 1: 
        return '1 item selected: ' + (this._selection.getSelection()[0]).name; 
      default: 
        return `${selectionCount} items selected`; 
    } 
  } 

  _onColumnClick(ev: React.MouseEvent<HTMLElement>, column: IColumn) { 
    const { columns, items } = this.state; 
    let newItems: IDocument[] = items.slice(); 
    let newColumns: IColumn[] = columns.slice(); 
    let currColumn: IColumn = newColumns.filter((currCol: IColumn, idx: number) => { 
      return column.key === currCol.key; 
    })[0]; 
    newColumns.forEach((newCol: IColumn) => { 
      if (newCol === currColumn) { 
        currColumn.isSortedDescending = !currColumn.isSortedDescending; 
        currColumn.isSorted = true; 
      } else { 
        newCol.isSorted = false; 
        newCol.isSortedDescending = true; 
      } 
    }); 
    newItems = this._sortItems(newItems, currColumn.fieldName, currColumn.isSortedDescending); 
    this.setState({ 
      columns: newColumns, 
      items: newItems 
    }); 
  } 

  _sortItems(items: IDocument[], sortBy: string, descending = false): IDocument[] { 
    if (descending) { 
      return items.sort((a: IDocument, b: IDocument) => { 
        if (a[sortBy] < b[sortBy]) { 
          return 1; 
        } 
        if (a[sortBy] > b[sortBy]) { 
          return -1; 
        } 
        return 0; 
      }); 
    } else { 
      return items.sort((a: IDocument, b: IDocument) => { 
        if (a[sortBy] < b[sortBy]) { 
          return -1; 
        } 
        if (a[sortBy] > b[sortBy]) { 
          return 1; 
       } 
        return 0; 
      }); 
    } 
  } 
}