4.4.1 • Published 9 months ago

@hawk-ui/date-picker v4.4.1

Weekly downloads
749
License
MIT
Repository
-
Last release
9 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

9 months ago

4.4.0

10 months ago

4.3.4

11 months ago

4.3.3

11 months ago

4.3.9

10 months ago

4.3.6

11 months ago

4.3.5

11 months ago

4.3.8

10 months ago

4.3.7

11 months ago

4.1.8

2 years ago

4.1.7

2 years ago

4.1.9

2 years ago

4.3.2

1 year ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

2 years ago

4.2.0

2 years 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

3 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.7

3 years ago

4.0.6

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.0

3 years ago

4.1.2

3 years ago

4.1.1

3 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

4 years ago

3.1.2

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.9

4 years ago

3.0.8

4 years ago

3.0.7

4 years ago

3.0.6

4 years ago

3.0.5

4 years ago

3.0.4

4 years ago

3.0.3

4 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

5 years ago

2.9.1

5 years ago

2.9.0

5 years ago

2.8.9

5 years ago

2.8.8

5 years ago

2.8.7

5 years ago

2.8.6

5 years ago

2.8.3

5 years ago

2.8.2

5 years ago

2.8.5

5 years ago

2.8.4

5 years ago

2.8.1

5 years ago

2.8.0

5 years ago

2.7.9

5 years ago

2.7.6

5 years ago

2.7.8

5 years ago

2.7.7

5 years ago

2.7.4

5 years ago

2.7.5

5 years ago

2.7.2

5 years ago

2.7.3

5 years ago

2.7.1

5 years ago

2.6.8

5 years ago

2.6.7

5 years ago

2.6.6

5 years ago

2.6.5

5 years ago

2.5.8

5 years ago

2.5.9

5 years ago

2.6.1

5 years ago

2.6.0

5 years ago

2.6.3

5 years ago

2.6.2

5 years ago

2.6.4

5 years ago

2.5.7

5 years ago

2.5.6

5 years ago

2.5.5

5 years ago

2.5.4

5 years ago

2.4.9

5 years ago

2.4.8

5 years ago

2.5.0

5 years ago

2.5.2

5 years ago

2.5.1

5 years ago

2.5.3

5 years ago

2.4.7

5 years ago

2.4.5

5 years ago

2.4.4

5 years ago

2.4.6

5 years ago

2.4.3

5 years ago

2.4.2

5 years ago

2.4.1

5 years ago

2.4.0

5 years ago

2.3.8

5 years ago

2.3.9

5 years ago

2.3.7

5 years ago

2.3.6

5 years ago

2.3.5

5 years ago

2.3.4

5 years ago

2.3.3

5 years ago

2.3.2

5 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.9

5 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.6

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.1.9

5 years ago

2.2.0

5 years ago

2.1.8

5 years ago

2.1.7

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.2

5 years ago

2.1.3

5 years ago

2.1.1

5 years ago

2.0.9

5 years ago

2.1.0

5 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