Wondering what’s next for npm?Check out our public roadmap! »

    dz-daterangepicker-material
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    dz-daterangepicker-material

    NPM JavaScript Style Guide

    Dz Daterangepicker Material.

    This React date range picker component creates a dropdown menu from which a user can select a range of dates.It leverages moment.js to handle date manipulation and parsing. I created it while building my personal projects where i used Material UI and needed a way to select date ranges.

    Install

    npm install --save dz-daterangepicker-material

    Demo

    Minimal demo page is included in sample directory.

    Online demo is also available!

    Day, Year, Month view selection

    Usage

    import React from 'react'
    import DateRangePicker from "dz-daterangepicker-material";
    
    import "dz-daterangepicker-material/dist/index.css";
    
    function Example(){
        const [date, setDate] = React.useState({
          startDate: new Date(2020, 4, 1),
          endDate: new Date(2020, 4, 10)
        })
    
        const onChange = (start, end) => {
            setDate({
              startDate: start,
              endDate: end,
            })
        }
    
        return (
         <DateRangePicker
           startDate={date.startDate}
           endDate={date.endDate}
           onChange={onChange}
           startWeek={'monday'}
           onlyView={false}
           datePicker={false}
           textFieldProps={{}}
           popoverProps={{}}
         />
        )
    }

    Available props

    prop description default type
    onChange Triggered when a date or range is selected. returns value ({start, end}) => this.setState({start, end})
    startDate initial start Date null Moment or Date
    endDate initial end Date null Moment or Date
    startWeek The first day of the week "monday" "saturday"
    onlyView view mode false Bool
    datePicker false Bool
    textFieldProps https://material-ui.com/api/text-field {} Obj
    popoverProps https://material-ui.com/api/popover {} Obj
    minDate min date allowed in range null Moment or Date
    maxDate max date allowed in range null Moment or Date
    TODO TODO TODO TODO

    Donation 🍺 🍺 🍺

    paypal

    License

    MIT © Dzheyhan Ahmedov

    Install

    npm i dz-daterangepicker-material

    DownloadsWeekly Downloads

    52

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    273 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar