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

| Option Name | Default value | Description | Example | | ------------------- | ------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------- | | locale | Language i18n | See table at the bottom | { locale: 'fr' } | | format | y/m/d h:i | Format date | { format: 'y.d.m' } | | step | 60 | timepicker steps, 0 < step <= 60 | { step: 30 } | | closeOnDateSelect | false | Close picker when choosing a date | { closeOnDateSelect: true } | | validateOnBlur | true | | { validateOnBlur: false } | | timepicker | false | Enable time picking | { timepicker: true } | | datepicker | true | Enable date picking | { datepicker: false } | | weeks | false | Show week number, left side of calendar | { weeks: true } | | theme | '' | className for alternate color theme, dark is supported | { theme: 'dark' } | | minDate | false | Minimum date enabled to pick | { minDate: 0 } { minDate: '08/15/2023' } { minDate: new Date() } | | maxDate | false | Maximum date enbaled to pick | { maxDate: 0 } { maxDate: '08/15/2023' } { maxDate: new Date() } | | startDate | false | | { startDate: '08/15/2023' } | | defaultDate | false | | { defaultDate: '08/15/2023' } | | defaultTime | false | | { defaultTime: '08/15/2023' } | | minTime | false | Minimum time enabled to pick | { minTime: 0 } { minTime: '06:00' } { minTime: new Date() } | | maxTime | false | Maximum time enabled to pick | { maxTime: 0 } { maxTime: '21:00' } { maxTime: new Date() } | | allowTimes | [] | Timepicker will only display these if set | { allowTimes: ['06:00','12:00','18:00'] } | | opened | false | Picker is opened by default when true | { opened: true } | | inline | false | | { inline: true } | | todayButton | true | Display Today button shortcut | { todayButton: false } | | timepickerScrollbar | true | Display scroll bar for timepicker | {timepickerScrollbar: false } | | onSelectDate | | | { onSelectDate: () => { console.log('onSelectDate') } } | | onChangeMonth | | | { onChangeMonth: () => { console.log('onChangeMonth') } } | | onChangeYear | | | { onChangeYear: () => { console.log('onChangeYear') } } | | onChangeDateTime | | | { onChangeDateTime: () => { console.log('onChangeDateTime') } } | | onShow | | | { onShow: () => { console.log('onShow') } } | | onClose | | | { onClose: () => { console.log('onClose') } } | | inverseButton | false | Inverse month and time arrow buttons | { inverseButton: true } | | scrollMonth | true | Enable mouse wheel for scrolling months | { scrollMonth: false } | | scrollInput | true | | { scrollInput: false } | | hours12 | false | | { hours12: true } | | yearStart | 1950 | Start value for year select | { yearStart: 1900 } | | yearEnd | 2050 | End value for year select | { yearEnd: 2100 } | | weekends | [] | | { weekends: ['08/15/2023','08/16/2023','08/17/2023','08/18/2023'] } | | disabledDates | [] | Disable specific dates | { disabledDates: ['08/15/2023','08/16/2023','08/17/2023','08/18/2023'] } | | allowDates | [] | | { allowDates: ['08/15/2023','08/16/2023','08/17/2023','08/18/2023'] } | | disabledWeekDays | [] | Disable week days by index, Sun = 0, Sat = 6 | { disabledWeekDays: [0,1,2] } |

Language options

| Language i18n | | ------------------------------------------ | | ar - Arabic | | az - Azerbaijanian (Azeri) | | bg - Bulgarian | | bs - Bosanski | | ca - Català | | ch - Simplified Chinese | | cs - Čeština | | da - Dansk | | de - German | | el - Ελληνικά | | en - English | | en-GB - English (British) | | es - Spanish | | et - "Eesti" | | eu - Euskara | | fa - Persian | | fi - Finnish (Suomi) | | fr - French | | gl - Galego | | he - Hebrew (עברית) | | hr - Hrvatski | | hu - Hungarian | | id - Indonesian | | it - Italian | | ja - Japanese | | ko - Korean (한국어) | | kr - Korean | | lt - Lithuanian (lietuvių) | | lv - Latvian (Latviešu) | | mk - Macedonian (Македонски) | | mn - Mongolian (Монгол) | | nl - Dutch | | no - Norwegian | | pl - Polish | | pt - Portuguese | | pt-BR - Português(Brasil) | | ro - Romanian | | ru - Russian | | se - Swedish | | sk - Slovenčina | | sl - Slovenščina | | sq - Albanian (Shqip) | | sr - Serbian Cyrillic (Српски) | | sr-YU - Serbian (Srpski) | | sv - Svenska | | th - Thai | | tr - Turkish | | uk - Ukrainian | | vi - Vietnamese | | zh - Simplified Chinese (简体中文) | | zh-TW - Traditional Chinese (繁體中文) |