datepicker-p14 v1.0.24

I - General information

This project is the conversion of a jQuery plugin datetimepicker into React component. The component can be installed as a npm package for a React application.

II - Install and use the DateTimePicker component

1. NPM install and Github page

1. NPM

   npm install --save datepicker-p14

2. Github Repository

Datepicker Github repository: github.com/KevinLeFaucheur/datetimepicker-react

2. Import

import DatePicker from 'datepicker-p14'
import 'datepicker-p14/dist/index.css'

3. JSX.

<DatePicker id='start-date' />

4. Getting the value.

   const [value, setValue] = useState();

 [...]
 
   <DatePicker onChange={(value) => setValue(value)} />

II - Examples

1. Locale Example

   <DatePicker options={ locale: 'fr' } />

2. Only TimePicker Example

   <DatePicker options={ timepicker: true, datepicker: false } />

3. Inline DatePicker Example

   <DatePicker options={ inline: true } />

4. allowTimes options TimePicker Example

   <DatePicker options={ timepicker: true, allowTimes: ['06:00','12:00','18:00'] } />

5. handler onChangeDateTime Example

   <DatePicker options={ onChangeDateTime: () => { } } />

6. minDate and maxDate Example

   <DatePicker options={ minDate: '08/01/2023', maxDate: '08/31/2023' } />

7. Dark Theme Example

   <DatePicker options={ theme: 'dark' } />

8. Highlighted Date Example

   highlightedPeriods: ['date, description, className'] }

   <DatePicker options={ highlightedDates: ['08/25/2023, Birthday, hlCyan'] } />

9. Highlighted Period Example

   highlightedPeriods: ['startdate, endDate, description, className'] }

   <DatePicker options={
			highlightedPeriods: ['09/01/2023, 09/30/2023, Practice, hlGreen'] }
/>

III - Full options list

Language options