{"id":18031663,"url":"https://github.com/syakuis/react-datetimepicker","last_synced_at":"2025-03-27T05:30:53.371Z","repository":{"id":78500752,"uuid":"104455343","full_name":"syakuis/react-datetimepicker","owner":"syakuis","description":"react-datetimepicker","archived":false,"fork":false,"pushed_at":"2018-02-01T02:10:37.000Z","size":381,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-23T18:34:30.867Z","etag":null,"topics":["date","datetime","es","flatpickr","javascript","js","picker","react"],"latest_commit_sha":null,"homepage":"http://syakuis.github.io/demo/react-datetimepicker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syakuis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-22T09:12:05.000Z","updated_at":"2020-01-27T18:42:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"b268be5d-86a1-4ec4-9ab1-6d910eddbf9f","html_url":"https://github.com/syakuis/react-datetimepicker","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"3fedd5e186c1454824ff67c6e8cc8edd5a630871"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syakuis%2Freact-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syakuis","download_url":"https://codeload.github.com/syakuis/react-datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245791328,"owners_count":20672664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date","datetime","es","flatpickr","javascript","js","picker","react"],"created_at":"2024-10-30T10:10:14.614Z","updated_at":"2025-03-27T05:30:53.365Z","avatar_url":"https://github.com/syakuis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Datetime Picker\n\n날짜와 시간을 선택할 수 있는 라이브러리 flatpickr 를 React 에서 사용할 수 있게 개발되었습니다.\n\nUI 는 Bootstrap 을 사용했으며 필수는 아닙니다. 직접 UI 를 고칠 수 있습니다.\n\n크롬, 파이어폭스, 사파리 그리고 IE 11 이상에서 테스트되었습니다.\n\nflatpickr 의 기능을 모두 사용할 수 있습니다.\n\n사용하기 전에 아래의 데모 소스 와 실행 화면을 확인 하시기 바랍니다.\n\n[![Edit React DatetimePicker Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v64l7r7mr5)\n\n## install\n\n```\n// optional\n$ npm install bootstrap font-awesome\n\n// required\n$ npm install react react-dom flatpickr\n\n$ npm install react-datetimepicker-syaku\n\nor\n\n$ yarn add react-datetimepicker-syaku\n```\n\n## Setting\n\n```js\nimport DatetimePicker, { parseDate, formatDate, formatDateString, setLocale } from 'react-datetimepicker-syaku';\n\n// flatpickr theme setting (Optional)\nimport 'flatpickr/dist/flatpickr.min.css';\n\n// locale setting (Optional)\nimport locale from 'flatpickr/dist/l10n/ko';\nsetLocale(locale.ko);\n\n// bootstrap \u0026 fontawesome (Optional)\nimport 'bootstrap/dist/css/bootstrap.css';\nimport 'font-awesome/css/font-awesome.css';\n```\n\n- formatDateString : flatpickr dateObj to string\n- parseDate : Flatpickr.parseDate(dateStr, dateFormat)\n- formatDate : Flatpickr.formatDate(dateObj, formatStr)\n- setLocale : Flatpickr.localize(locale)\n\n## CDN\n\n```html\n\u003cscript src=\"./dist/react-datetimepicker.min.js\"\u003e\u003c/script\u003e\n```\n\n### DatetimePicker options\n\n모든 날짜 데이터는 date type 이여야 한다. `parseDate` 를 이용하여 날짜 형식으로 생성할 수 있다.\n\n```\n// ui 를 직접 만들때 사용한다.\nchildren: PropTypes.node,\n// \u003cinput\u003e readOnly\nreadOnly: false,\n// input type date, datetime, time\ntype: 'date',\n// ui 를 직접 만들때 감쌓기 위한 nodeName\nwrapper: 'div',\nclassName: PropTypes.string,\nstyle: PropTypes.shape({}),\n\n// button icon className\niconSuccess: PropTypes.string,\niconClear: PropTypes.string,\niconOpen: PropTypes.string,\n\n// only mode single\nstartDate: PropTypes.arrayOf(PropTypes.instanceOf(Date)),\nendDate: PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n\n// 기본값으로 사용할 수 있다. 한번만 설정된다.\ndefaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n// 선택한 날짜를 지울때 기본 값을 사용할지 여부\nisDefaultValue: false,\n```\n\n### startDate \u0026 endDate\n\n`mode='single'` 에서만 사용할 수 있는 기능으로 두개의 날짜 선택기를 서로 비교하며 자동으로 날짜를 설정 및 일자 선택을 차단할 수 있다.\n\n즉 `startDate =  시작일` 은 `endDate = 종료일` 보다 이후 날짜를 선택할 수 없고 종료일은 반대로 선택할 수 없다. 두개가 같은 날짜인 경우 시작일은 모든 날짜를 선택할 수 있다.\n\n시작일은 있고 종료일이 없으면 시작일을 종료일에 대처한다. 반대로 종료일은 시작일에 대처된다.\n\n종료일이 시작일보단 이전이면 종료일은 제거된다. 시작일도 마찬가지다.\n\n### defaultDate \u0026 defaultValue\n\n둘 옵션 중 한개만 사용하면 된다. `defaultDate` 는 항상 변하는 날짜로 `state` 에 설정된 값으로 사용하면 되고 `defaultValue` 는 한번만 설정되는 날짜로 직접 날짜를 설정하면 된다.\n\n둘다 사용할 경우 `isDefaultValue=true` 설정하고 선택 날짜를 `clear` 버튼으로 제거할때 기본 날짜를 `defaultValue` 로 설정할 수 있다.\n\n### flatpickr options\n\nhttps://chmln.github.io/flatpickr/options/\n\n```\n// type 을 사용할 경우 아래의 옵션은 내부적으로 사용되기 때문에 변경할 수 없다.\nwrap: false,\ninline: false,\nclickOpens: false,\nallowInput: false,\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyakuis%2Freact-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyakuis%2Freact-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyakuis%2Freact-datetimepicker/lists"}