datepicker-p14
v1.0.24
Published
Made with create-react-library
Downloads
8
Readme
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
- NPM
npm install --save datepicker-p14
- 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 (繁體中文) |