4.4.1 • Published 5 months ago

@hawk-ui/date-picker v4.4.1

Weekly downloads
749
License
MIT
Repository
-
Last release
5 months ago

Installation

To install a component run

$ npm install @hawk-ui/date-picker --save

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/date-picker/dist/index.min.css

Usage

Single Date Selector

Demo

import DatePicker from '@hawk-ui/date-picker';
const moment = require('moment');
initialState = {
  selectedDate: moment('2020-07-24T06:30:00.000Z'),
};

<DatePicker
  onChange={(value) => {
    console.log('query value', moment(value).set(null).toISOString());
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
/>

Range Date Selector

Demo

import DatePicker from '@hawk-ui/date-picker';
const moment = require('moment');
initialState = {
  startDate: null,
  endDate: null,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div style={{ width: '100%', marginRight: '10px' }}>
    <DatePicker
      onChange={(value) => {
        const updatedEndDate = !state.endDate || moment(state.endDate).isBefore(moment(value), 'days') ? value : null;

        setState({
          startDate: value,
          ...(updatedEndDate ? { endDate: updatedEndDate } : {}),
        });
      }}
      isDayBlocked={(day) => (day.isBefore(moment(), 'days'))}
      renderInput={() => (
        !state.startDate ? <span>Start Date</span> : state.startDate
      )}
      value={{
        startMoment: state.startDate,
      }}
    />
  </div>

  <div style={{ width: '100%', marginLeft: '10px' }}>
    <DatePicker
      onChange={(value) => {
        console.log('query value', moment(value).set(null).toISOString());
        setState({
          endDate: value,
        });
      }}
      isDayBlocked={(day) => (
        day.isBefore(state.startDate ? moment(state.startDate) : moment(), 'days')
      )}
      renderInput={() => (
        !state.endDate ? <span>End Date</span> : state.endDate
      )}
      value={{
        startMoment: state.endDate,
      }}
    />
  </div>
</div>
4.4.1

5 months ago

4.4.0

6 months ago

4.3.4

7 months ago

4.3.3

7 months ago

4.3.9

6 months ago

4.3.6

7 months ago

4.3.5

7 months ago

4.3.8

6 months ago

4.3.7

7 months ago

4.1.8

1 year ago

4.1.7

1 year ago

4.1.9

1 year ago

4.3.2

1 year ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.3

1 year ago

4.2.2

1 year ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

1 year ago

4.2.0

1 year ago

4.2.7

1 year ago

4.2.6

1 year ago

4.2.9

1 year ago

4.2.8

1 year ago

4.1.6

2 years ago

4.1.5

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.9

2 years ago

4.0.8

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.0

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.0.3

3 years ago

4.0.1

3 years ago

4.0.2

3 years ago

4.0.0

3 years ago

3.1.7

3 years ago

3.1.9

3 years ago

3.1.8

3 years ago

3.1.5

3 years ago

3.1.4

3 years ago

3.1.3

3 years ago

3.1.2

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.9

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.13.2

4 years ago

2.13.0

4 years ago

2.13.1

4 years ago

2.12.9

4 years ago

2.12.7

4 years ago

2.12.8

4 years ago

2.12.10

4 years ago

2.12.5

4 years ago

2.12.6

4 years ago

2.12.4

4 years ago

2.12.3

4 years ago

2.12.2

4 years ago

2.12.1

4 years ago

2.11.9

4 years ago

2.11.8

4 years ago

2.11.7

4 years ago

2.11.6

4 years ago

2.11.5

4 years ago

2.11.4

4 years ago

2.11.3

4 years ago

2.11.2

4 years ago

2.11.0

4 years ago

2.11.1

4 years ago

2.10.9

4 years ago

2.10.7

4 years ago

2.10.8

4 years ago

2.10.5

4 years ago

2.10.6

4 years ago

2.10.1

4 years ago

2.10.0

4 years ago

2.9.9

4 years ago

2.9.4

4 years ago

2.9.6

4 years ago

2.9.5

4 years ago

2.9.8

4 years ago

2.9.3

4 years ago

2.9.2

4 years ago

2.9.1

4 years ago

2.9.0

4 years ago

2.8.9

4 years ago

2.8.8

4 years ago

2.8.7

4 years ago

2.8.6

4 years ago

2.8.3

4 years ago

2.8.2

4 years ago

2.8.5

4 years ago

2.8.4

4 years ago

2.8.1

4 years ago

2.8.0

4 years ago

2.7.9

4 years ago

2.7.6

4 years ago

2.7.8

4 years ago

2.7.7

4 years ago

2.7.4

4 years ago

2.7.5

4 years ago

2.7.2

4 years ago

2.7.3

4 years ago

2.7.1

4 years ago

2.6.8

4 years ago

2.6.7

4 years ago

2.6.6

4 years ago

2.6.5

4 years ago

2.5.8

4 years ago

2.5.9

4 years ago

2.6.1

4 years ago

2.6.0

4 years ago

2.6.3

4 years ago

2.6.2

4 years ago

2.6.4

4 years ago

2.5.7

4 years ago

2.5.6

4 years ago

2.5.5

4 years ago

2.5.4

4 years ago

2.4.9

4 years ago

2.4.8

4 years ago

2.5.0

4 years ago

2.5.2

4 years ago

2.5.1

4 years ago

2.5.3

4 years ago

2.4.7

4 years ago

2.4.5

4 years ago

2.4.4

4 years ago

2.4.6

4 years ago

2.4.3

4 years ago

2.4.2

4 years ago

2.4.1

4 years ago

2.4.0

4 years ago

2.3.8

4 years ago

2.3.9

4 years ago

2.3.7

4 years ago

2.3.6

4 years ago

2.3.5

4 years ago

2.3.4

4 years ago

2.3.3

4 years ago

2.3.2

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.9

4 years ago

2.2.8

4 years ago

2.2.7

4 years ago

2.2.6

4 years ago

2.2.5

4 years ago

2.2.4

4 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.1.9

4 years ago

2.2.0

4 years ago

2.1.8

4 years ago

2.1.7

4 years ago

2.1.6

4 years ago

2.1.5

4 years ago

2.1.4

4 years ago

2.1.2

4 years ago

2.1.3

4 years ago

2.1.1

4 years ago

2.0.9

4 years ago

2.1.0

4 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.9.10

5 years ago

1.9.9

5 years ago

1.9.8

5 years ago

1.9.7

5 years ago

1.9.6

5 years ago

1.9.5

5 years ago

1.9.4

5 years ago

1.9.3

5 years ago

1.9.2

5 years ago

1.9.1

5 years ago

1.9.0

5 years ago

1.8.9

5 years ago

1.8.8

5 years ago

1.8.7

5 years ago

1.8.6

5 years ago

1.8.5

5 years ago

1.8.4

5 years ago

1.8.2

5 years ago

1.8.3

5 years ago

1.8.1

5 years ago

1.8.0

5 years ago

1.7.9

5 years ago

1.7.8

5 years ago

1.7.7

5 years ago

1.7.6

5 years ago

1.7.5

5 years ago

1.7.4

5 years ago

1.7.3

5 years ago

1.7.2

5 years ago

1.7.1

5 years ago

1.7.0

5 years ago

1.6.9

5 years ago

1.6.8

5 years ago

1.6.7

5 years ago

1.6.6

5 years ago

1.6.5

5 years ago

1.6.4

5 years ago

1.6.3

5 years ago

1.6.2

5 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.9

5 years ago

1.5.8

5 years ago

1.5.7

5 years ago

1.5.5

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.2

5 years ago

1.5.6

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.10

5 years ago

1.4.6

5 years ago

1.4.9

5 years ago

1.4.8

5 years ago

1.4.7

5 years ago

1.4.5

5 years ago

1.4.4

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.7

5 years ago

1.3.6

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.9

5 years ago

1.2.8

5 years ago

1.2.7

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.10

5 years ago

1.1.9

5 years ago