protazer-react-datepicker v1.1.2

@Protazer React Date Picker

A simple and reusable Datepicker from jQuery to React

Required dependencies

• prop-types : v15.8.1,
• styled-components : v5.3.5,
• react-icons : v4.3.1,

Installation

npm Installation

npm install protazer-react-datepicker

yarn Installation

yarn add protazer-react-datepicker

Example

! name is required

//Librairies import
import React from 'react';
import DatePicker from 'protazer-react-datepicker';

function App() {
  return <DatePicker name='birthDate' theme='yellow' locale='en-GB' autocomplete />;
}

export default App;

Get input value using FormData

//Librairies import
import React, {useRef} from 'react';
import DatePicker from 'protazer-react-datepicker';

function App() {

  const form = useRef();

  const handleSubmit = () => {
    e.preventDefault();
    const data = new FormData(form.current);
  }

  return (
    <form ref={form} onSubmit={handleSubmit}>
      <DatePicker name='birthDate' theme='yellow' locale='en-GB' autocomplete />;
    </form>
  );
}

export default App;

Features

Theme :

The selected theme define global style of the calendar

! Default selected theme is 'black'

Themes available	Color
'yellow'
'red'
'orange'
'green'
'black'
'blue'
'turquoise'
'violet'
'pink'

Use :

  <DatePicker  theme='---your theme---'  />

MonthDaysOnly :

The monthDaysOnly option define if previous and next month days are showing or not

! Default is 'false'

Preview :

With monthDaysOnly:

  <DatePicker  monthDaysOnly  />

Without monthDaysOnly:

  <DatePicker  />

Locale :

The selected locale define language and date format of the calendar

! Default locale is 'fr-FR'

Use :

  <DatePicker locale='en-GB'  />

Preview :

  <DatePicker  locale='fr-FR'  />

  <DatePicker  locale='en-GB'  />

Autocomplete :

The autocomplete option define if calendar input's is automaticaly completed with today date or not

! Default is 'false'

Use :

  <DatePicker autocomplete  />

Preview :

Without autocomplete :

  <DatePicker   />

With autocomplete :

  <DatePicker  autocomplete  />

Border :

Border option define the datepicker's input border thickness

! Default is '2px'

Use :

<DatePicker  border='2px'  />

Radius :

Radius option define the datepicker's input border-radius

! Default is '5px'

Use :

<DatePicker  radius='10px'  />

Size :

Size option define the datepicker's input font-size

! Default is '1.5rem'

Use :

<DatePicker  size='1.2rem'  />

Padding :

Padding option define the datepicker's input padding

! Default is '0.1rem'

Use :

<DatePicker  padding='1rem'  />

Margin :

Madding option define the datepicker's input margin

! Default is '0'

Use :

<DatePicker  margin='0 0 0 1rem'  />

AlignItems :

AlignItems option define the datepicker's input alignement

! Default is 'center'

Use :

<DatePicker  alignItems='flex-start'  />

Weight :

Weight option define the datepicker's input font-weight

! Default is 400 (normal)

Use :

<DatePicker  weight={400}  />

Placeholder :

placeholder option define the datepicker's input placeholder

Use :

<DatePicker  placeholder='Your birth date ...'  />

Author

@Protazer

https://github.com/Protazer