Merge branch 'main' of https://github.com/shinyj1991/react-datepicker

Author: flamecommit

README.md

@@ -1,24 +1,11 @@
-## install dependencies
+# React Datepicker
 
-npm i -D @types/node @types/react @types/react-dom @shinyongjun/eslint-config eslint prettier react react-dom typescript -w test
+![Datepicker](https://github.com/shinyj1991/react-datepicker/raw/main/package/public/readme-2.jpg)
 
-npm i -D @types/node @types/react @types/react-dom @shinyongjun/eslint-config eslint prettier react react-dom typescript concurrently cpy-cli -w package
+Example - [Link](https://shinyongjun.com/react-datepicker/example)
 
-## React Datepicker
+Document - [Link](https://shinyongjun.com/react-datepicker/document)
 
-[NPM](https://www.npmjs.com/package/@shinyongjun/react-datepicker)
+Issues - [Link](https://github.com/shinyj1991/react-datepicker/issues)
 
-## Timezone
-
-```js
-// 인수가 문자열 타임스태프 일땐 Month를 1부터 카운트한다. UTC를 기준으로 하기때문에 한국 기준 9시를 반환한다.
-const NEW_DATE1 = new Date('2023-09-01');
-const NEW_DATE2 = new Date('2023-09-01 17:15:00');
-// 인수가 숫자형일땐 Month를 0부터 카운트한다. 시간을 생략하면 00시00분00초를 기준으로 한다.
-const NEW_DATE3 = new Date(2023, 9, 1);
-const NEW_DATE4 = new Date(2023, 9, 1, 12, 0, 0);
-// Z를 붙이면 UCT 기준 표준시 (Javascript에서 UCT와 GMT는 같다)
-const NEW_DATE5 = new Date('2023-09-03T00:00:00Z'); // new Date("2023-09-01") 과 같다.
-// Z를 생략하면 LOCAL TIME ZONE
-const NEW_DATE6 = new Date('2023-09-03T00:00:00');
-```
+NPM - [NPM](https://www.npmjs.com/package/@shinyongjun/react-datepicker)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/components/Datepicker.tsx

@@ -23,6 +23,9 @@ interface IProps {
   closesAfterChange?: boolean;
   weekdayLabels?: string[];
   withPortal?: boolean;
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -35,6 +38,9 @@ function Datepicker({
   closesAfterChange = true,
   weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   withPortal = false,
+  className = '',
+  placeholder = '',
+  disabled = false,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -67,13 +73,15 @@ function Datepicker({
   }, [value, onChange, setViewDate]);
 
   return (
-    <div className={`${NAME_SPACE}__wrapper`}>
+    <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <InputDate
         value={value}
-        setValue={setValue}
         valueFormat={valueFormat}
-        setIsVisible={setIsVisible}
         useClearButton={useClearButton}
+        placeholder={placeholder}
+        disabled={disabled}
+        setValue={setValue}
+        setIsVisible={setIsVisible}
       />
       <Layer
         isVisible={isVisible}

package/src/components/Rangepicker.tsx

@@ -25,6 +25,9 @@ interface IProps {
   closesAfterChange?: boolean;
   weekdayLabels?: string[];
   withPortal?: boolean;
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
   onChange?: (startDate: Date | null, endDate: Date | null) => void;
 }
 
@@ -38,6 +41,9 @@ function Rangepicker({
   closesAfterChange = true,
   weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   withPortal = false,
+  className = '',
+  placeholder = '',
+  disabled = false,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -76,12 +82,14 @@ function Rangepicker({
   }, [startValue, endValue, onChange]);
 
   return (
-    <div className={`${NAME_SPACE}__wrapper`}>
+    <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <InputRange
         startValue={startValue}
         endValue={endValue}
         valueFormat={valueFormat}
         useClearButton={useClearButton}
+        placeholder={placeholder}
+        disabled={disabled}
         setIsVisible={setIsVisible}
         setStartValue={setStartValue}
         setEndValue={setEndValue}

package/src/components/input/Date.tsx

@@ -8,6 +8,8 @@ interface IProps {
   value: Date | null;
   valueFormat: string;
   useClearButton: boolean;
+  placeholder: string;
+  disabled: boolean;
   setValue: (value: Date | null) => void;
   setIsVisible: (value: boolean) => void;
 }
@@ -16,6 +18,8 @@ function InputDate({
   value,
   valueFormat,
   useClearButton,
+  placeholder,
+  disabled,
   setValue,
   setIsVisible,
 }: IProps) {
@@ -30,6 +34,8 @@ function InputDate({
         type="text"
         value={formatDate(value, valueFormat)}
         readOnly
+        placeholder={placeholder}
+        disabled={disabled}
         onFocus={handleFocus}
       />
       {useClearButton && value && (

package/src/components/input/Range.tsx

@@ -9,6 +9,8 @@ interface IProps {
   endValue: Date | null;
   valueFormat: string;
   useClearButton: boolean;
+  placeholder: string;
+  disabled: boolean;
   setStartValue: (value: Date | null) => void;
   setEndValue: (value: Date | null) => void;
   setIsVisible: (value: boolean) => void;
@@ -19,6 +21,8 @@ function InputRange({
   endValue,
   valueFormat,
   useClearButton,
+  placeholder,
+  disabled,
   setStartValue,
   setEndValue,
   setIsVisible,
@@ -50,6 +54,8 @@ function InputRange({
         type="text"
         value={setRangeValue()}
         readOnly
+        placeholder={placeholder}
+        disabled={disabled}
         onFocus={handleFocus}
       />
       {useClearButton && (startValue || endValue) && (

test/README.md

@@ -0,0 +1,22 @@
+## install dependencies
+
+npm i -D @types/node @types/react @types/react-dom @shinyongjun/eslint-config eslint prettier react react-dom typescript -w test
+
+npm i -D @types/node @types/react @types/react-dom @shinyongjun/eslint-config eslint prettier react react-dom typescript concurrently cpy-cli -w package
+
+## React Datepicker
+
+## Timezone
+
+```js
+// 인수가 문자열 타임스태프 일땐 Month를 1부터 카운트한다. UTC를 기준으로 하기때문에 한국 기준 9시를 반환한다.
+const NEW_DATE1 = new Date('2023-09-01');
+const NEW_DATE2 = new Date('2023-09-01 17:15:00');
+// 인수가 숫자형일땐 Month를 0부터 카운트한다. 시간을 생략하면 00시00분00초를 기준으로 한다.
+const NEW_DATE3 = new Date(2023, 9, 1);
+const NEW_DATE4 = new Date(2023, 9, 1, 12, 0, 0);
+// Z를 붙이면 UCT 기준 표준시 (Javascript에서 UCT와 GMT는 같다)
+const NEW_DATE5 = new Date('2023-09-03T00:00:00Z'); // new Date("2023-09-01") 과 같다.
+// Z를 생략하면 LOCAL TIME ZONE
+const NEW_DATE6 = new Date('2023-09-03T00:00:00');
+```

test/src/App.tsx

@@ -1,4 +1,5 @@
 import { Datepicker, Rangepicker } from '@shinyongjun/react-datepicker';
+import '@shinyongjun/react-datepicker/css';
 import { useState } from 'react';
 
 function App() {