npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

datepicker-p14

v1.0.24

Published

Made with create-react-library

Downloads

8

Readme

JAVASCRIPT REACT node.js react


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
  1. 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 (繁體中文) |