thaidatepicker-react

v2.0.2

Thaidatepicker-react is a component for ReactJS that likes other DatePicker, but all we need is Buddhist Year (25XX - aka Thai Year) come with the right render day (example: Sat, 29 Feb 2020 must be equal to Sat, 29 Feb 2563) so I wish this component will For more information about how to use this package see README

Latest version published 1 month ago

License: MIT

NPM

GitHub

Package Health Score

67 / 100

security
No known security issues
popularity
Limited
maintenance
Healthy
community
Limited

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.0.2	\|	11/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.3.6	\|	08/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.2.0	\|	02/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.2.2	\|	06/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.1.5	\|	04/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (656)

GitHub Stars: 13
Forks: 7
Contributors: 3

Direct Usage Popularity

The npm package thaidatepicker-react receives a total of 656 downloads a week. As such, we scored thaidatepicker-react popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package thaidatepicker-react, we found that it has been starred 13 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Limited

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 3
Funding: Yes

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like thaidatepicker-react is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 0
Open PR: 0
Last Release: 1 month ago
Last Commit: 1 month ago

Further analysis of the maintenance status of thaidatepicker-react based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that thaidatepicker-react demonstrates a positive version release cadence with at least one new version released in the past 3 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=14

Age: 5 years
Dependencies: 2 Direct
Versions: 24
Install Size: 189 kB
Dist-tags: 1
# of Files: 32
Maintainers: 1
TS Typings: No

thaidatepicker-react has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

thaidatepicker-react

> ## 🎉 RELEASE v2 🎉 > > Thank you to everyone who used my little side project. I appreciate all you guys. Hope to keep it active.

📘 About

The thaidatepicker-react is a component for ReactJS that likes other DatePicker library but all we need is Buddhist Year (25XX – aka Thai Year) come with the right render day on "Leap" year (example: Sat, 29 Feb 2020 must be equal to Sat, 29 Feb 2563) so I wish this component will be a useful thing to you 😄. Happy Coding.

⚙ Install

npm install thaidatepicker-react
# or just `yarn add thaidatepicker-react`

📌 Example Usage

import React, { useState } from "react";
import { ThaiDatePicker } from "thaidatepicker-react";

const App = () =&gt; {
  const [selectedDate, setSelectedDate] = useState("2024-02-29");
  const [selectedThaiDate, setSelectedThaiDate] = useState("2567-02-29");

  const handleDatePickerChange = (christDate, buddhistDate) =&gt; {
    console.log(christDate);
    console.log(buddhistDate);
    setSelectedDate(christDate);
    setSelectedThaiDate(buddhistDate);
  };

  return (
    &lt;&gt;
      
      <div>christDate: {selectedDate}</div>
      <div>thaiDate: {selectedThaiDate}</div>
    
  );
};

export default App;

📋 Properties

Property	Description	Type	Default	Version
children	the children element inside like {children} by default you don't need to defined as props.	React.ReactNode \| null	null
id	#id for container element	string	"thdpk-container"
value	A christ date value with fixed dayjs format (YYYY-MM-DD)	string	""
onChange	Handle function with maximum 2 parameters, `christDate` and `thaiDate`	(christDate: string, thaiDate: string) => void	(_christDate: string, _thaiDate: string) => null
disabled	Disabled property for input	boolean	false
readOnly	ReadOnly property for input	boolean	false
clearable	Clear the value (please note clearable will work smoothly with onChange props)	boolean	true
placeholder	Placeholder property for input	string	""
header	An object for setting up header component. To change button icon use `prevButtonIcon` and `nextButtonIcon`. To change className of button and select use `prevButtonClassName`, `nextButtonClassName`, `monthSelectClassName`, and `yearSelectClassName`	Object { prevButtonIcon?: React.ReactNode; nextButtonIcon?: React.ReactNode; prevButtonClassName?: string; nextButtonClassName?: string; monthSelectClassName?: string; yearSelectClassName?: string; } \| null }	{}
yearBoundary	A config boundary ±Year (e.g. yearBoundary = 2; it means currentYear ± 2.)	number	99
inputProps	An override input properties.	(any & { displayFormat?: string; }) \| null	null
reactDatePickerProps	An override react-datepicker properties. See more (https://reactdatepicker.com/ or https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md)	React.ComponentProps	{}
minDate	A config minimum selectable date. To use, you can provide the string like `2023-01-31`. (Note: It's will depend on yearBoundary too.)	Date \| string	undefined
maxDate	A config maximum selectable date. To use, you can provide the string like `2023-12-31`. (Note: It's will depend on yearBoundary too.)	Date \| string	undefined
highlightDates	A highlight selected date. To use, you can provide an array of Date like `[new Date()]`	(Date \| HighlightDate)[]	GetHighlightByDate()
customInput	A config for using custom input element. To use, you can provide a name of element like `Input`	React.ComponentType \| null	null
noIntegratedStyle	A config for define to exclude integrated css `Note: if you using 2 components, which the first one contain noIntegratedStyle props but the second is not. It will import css and then it apply to them all`	boolean	false	v2.0.0

🎩 Some Useful Tricks

To style dates outside the selected month, use the .react-datepicker__day--outside-month CSS class.
```
.react-datepicker__day--outside-month {
  color: #aaa;
}
```
> However, be aware that the appearance may resemble the 'disabled' attribute, which could affect the user experience

📝 Need More Example?

I made a couple difference stack demos. Try looking at the examples of "Vite" projects on ./example.

Document with Online Demo: Demo
or alternate example link: CodeSandbox
Bonus with NextJS: CodeSandbox

Changelog

Please see more CHANGELOG.md

License

⚒ Thanks a lot

thaidatepicker-react dependencies

dayjs react-datepicker

thaidatepicker-react development dependencies

@testing-library/dom @testing-library/jest-dom @testing-library/react @types/jest @types/react @types/react-dom cross-env microbundle mockdate react react-dom react-scripts typescript

FAQs

What is thaidatepicker-react?

Thaidatepicker-react is a component for ReactJS that likes other DatePicker, but all we need is Buddhist Year (25XX - a... Visit Snyk Advisor to see a full health score report for thaidatepicker-react, including popularity, security, maintenance & community analysis.

Is thaidatepicker-react popular?

The npm package thaidatepicker-react receives a total of 656 weekly downloads. As such, thaidatepicker-react popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is thaidatepicker-react well maintained?

We found that thaidatepicker-react demonstrated a healthy version release cadence and project activity. It has a community of 3 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is thaidatepicker-react safe to use?

The npm package thaidatepicker-react was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 28 November-2024, at 18:09 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (656)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

thaidatepicker-react

📘 About

⚙ Install

📌 Example Usage

📋 Properties

🎩 Some Useful Tricks

📝 Need More Example?

Changelog

License

⚒ Thanks a lot

thaidatepicker-react dependencies

thaidatepicker-react development dependencies

FAQs

What is thaidatepicker-react?

Is thaidatepicker-react popular?

Is thaidatepicker-react well maintained?

Is thaidatepicker-react safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues