{"id":37462497,"url":"https://github.com/tracksuitdev/use-date-input","last_synced_at":"2026-01-16T07:05:30.737Z","repository":{"id":57387982,"uuid":"380974183","full_name":"tracksuitdev/use-date-input","owner":"tracksuitdev","description":"React hooks for controlling date input and date picker components","archived":false,"fork":false,"pushed_at":"2021-09-28T12:13:52.000Z","size":415,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-23T19:39:04.244Z","etag":null,"topics":["calendar","datefns","dateinput","datepicker","imask","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tracksuitdev.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}},"created_at":"2021-06-28T09:18:48.000Z","updated_at":"2021-09-28T12:13:55.000Z","dependencies_parsed_at":"2022-09-11T07:12:44.686Z","dependency_job_id":null,"html_url":"https://github.com/tracksuitdev/use-date-input","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tracksuitdev/use-date-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tracksuitdev%2Fuse-date-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tracksuitdev%2Fuse-date-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tracksuitdev%2Fuse-date-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tracksuitdev%2Fuse-date-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tracksuitdev","download_url":"https://codeload.github.com/tracksuitdev/use-date-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tracksuitdev%2Fuse-date-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["calendar","datefns","dateinput","datepicker","imask","react","react-hooks","typescript"],"created_at":"2026-01-16T07:05:30.388Z","updated_at":"2026-01-16T07:05:30.707Z","avatar_url":"https://github.com/tracksuitdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-date-input\n\nReact hooks for building date input and datepicker components.\n\n* [useDateInput](#usedateinput)\n* [useCalendar](#usecalendar)\n* [useDatepicker](#usedatepicker)\n\n## Installation\n\nTo use this hook you need to install [date-fns](https://date-fns.org/).\n```\nyarn add date-fns\nyarn add use-date-input\n```\n\nor with npm:\n\n```\nnpm install date-fns\nnpm install use-date-input\n```\n\n## useDateInput\n\n▸ **useDateInput**(`props`: [`UseDateInputProps`](#props)): [`UseDateInput`](#returnvalue)\n\nHook that manages state of masked date input.\n\nUses IMask for input masking and date-fns for date formatting and parsing.\n\n### Props\n**UseDateInputProps**\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `dateFormat` | `string` | date-fns date format, see [https://date-fns.org/v2.22.1/docs/format](https://date-fns.org/v2.22.1/docs/format) |\n| `maskBlocks?` | `MaskedDateOptions`[``\"blocks\"``] | Blocks defining each date part, see [https://imask.js.org/guide.html#masked-date](https://imask.js.org/guide.html#masked-date) for more info |\n| `onComplete?` | (`value?`: `Date`) =\u003e `void` | This will execute when input satisfies given format (mask), usually this function should be used to update date value|\n| `value?` | `Date` | Date value of input |\n\n### Return value\n**UseDateInput**\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `inputValue` | `string` | Value of input element |\n| `onKeyPress` | `KeyboardEventHandler` | Apply to input element if you wish to autocomplete date when user presses enter key. Parsing is done using dateFns parse with dateFormat truncated to the length of current inputValue and using current date as reference.  For example if today is 07/08/2021 and input value is 2, on enter press, input value will become 02/08/2021 |\n| `ref` | `RefObject`\u003c`HTMLInputElement`\\\u003e | Input element ref |\n| `resetValueOnDelete` | `ChangeEventHandler`\u003c`HTMLInputElement`\\\u003e | Will call onComplete with undefined value if e.target.value is falsy. Use it to reset value when user deletes the input. |\n| `setInputValue` | `Dispatch`\u003c`SetStateAction`\u003c`string`\\\u003e\\\u003e | Sets inputValue, note that you don't need to set input value on input element change, this is done internally by using IMask's accept event |\n\n\n### Usage\n```typescript jsx\n// define maskBlocks as constant or memoize in component\nconst maskBlocks = {\n  dd: {\n    mask: IMask.MaskedRange,\n    from: 1,\n    to: 31,\n    maxLength: 2,\n  },\n  MM: {\n    mask: IMask.MaskedRange,\n    from: 1,\n    to: 12,\n    maxLength: 2,\n  },\n  yyyy: {\n    mask: IMask.MaskedRange,\n    from: 1900,\n    to: 9999,\n  },\n};\n\nconst DateInput = () =\u003e {\n  const [value, setValue] = useState\u003cDate\u003e();\n  const { ref, inputValue, resetValueOnDelete } = useDateInput({\n    value,\n    dateFormat: \"dd-MM-yyyy\",\n    maskBlocks,\n    onComplete: setValue,\n  });\n\n  return \u003cinput ref={ref} value={inputValue} onChange={resetValueOnDelete} /\u003e;\n};\n```\n\n## useCalendar\n\n▸ **useCalendar**(`props`: [`UseCalendarProps`](#props-1)): [`UseCalendar`](#returnvalue-1)\n\nManages calendar state.\n\nYou can use this hook to render calendar view. Focused date state is used as reference to return calendar days.\n\nUses date-fns for date manipulation.\n\n### Props\n**UseCalendarProps**\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `maxDate?` | `Date` | Only dates before this date will be marked valid  For best performance memoize this date, this will prevent recalculation of calendar days on each render. |\n| `minDate?` | `Date` | Only dates after this date will be marked valid.  For best performance memoize this date, this will prevent recalculation of calendar days on each render. |\n| `startDate?` | `Date` | If provided calendar will start at the month of provided date |\n| `validate?` | (`date`: `Date`) =\u003e `boolean` | Validation function, dates that fail this test will be marked invalid. For best performance memoize this function, this will prevent recalculation of calendar days on each render. |\n| `value?` | `Date` | Datepicker value |\n| `weekStartsOn?` | ``0`` ``1``  ``2``  ``3``  ``4`` ``5`` ``6`` | Day that a week starts on. 0 - sunday, 1 - monday ..., default is 0 |\n\n### Return value\n**UseCalendar**\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `days` | [`UseDatepickerDay`](#usedatepickerday)[] | Returns all dates that can be seen in calendar view along with flags for each date that indicate if it is in the same month as focused date and if it is valid (available for selection).  Use this function to render month view of calendar. |\n| `focusedDate` | `Date` | First day of month that represents current calendar view |\n| `isSelected` | (`date`: `Date`) =\u003e `boolean` | Compares given date with value. |\n| `months` | `Date`[] | Dates representing each month in the same year as focusedDate.  You can use this function render month selection for calendar view. |\n| `nextMonth` | () =\u003e `void` | Adds one month to focusedDate. Use it to move calendar view to next month. |\n| `nextYear` | () =\u003e `void` | Adds one year to focusedDate. Use it to move calendar view to next year. |\n| `previousMonth` | () =\u003e `void` | Subtracts one month from focusedDate. Use it to move calendar view to previous month. |\n| `previousYear` | () =\u003e `void` | Adds one month to focusedDate. Use it to move calendar view to next month. |\n| `setFocusedDate` | `Dispatch`\u003c`SetStateAction`\u003c`Date`\\\u003e\\\u003e | Changes focusedDate, make sure to only pass first day of the month dates.  By changing focusedDate you are actually changing the reference point of calendar which means, once focused date is changed, days and months functions will use new focusedDate value as reference point. |\n| `years?` | `Date`[] | Dates representing eachYear from minDate to maxDate. Returns undefined if minDate or maxDate is not defined |\n\n#### UseDatePickerDay\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `date` | `Date` | Represents calendar day |\n| `inMonth` | `boolean` | Indicates if this date is in currently viewed calendar month |\n| `isValid` | `boolean` | If true this date can be selected according to provided min and max date and validate function |\n\n\n### Usage\n\n```typescript jsx\nconst Calendar = () =\u003e {\n  const [value, setValue] = useState\u003cDate\u003e();\n  const { previousYear, nextYear, focusedDate, previousMonth, nextMonth, days, isSelected } = useCalendar({ value });\n\n  return (\n    \u003cdiv style={{ width: \"420px\" }}\u003e\n      \u003cdiv style={{ width: \"100%\" }}\u003e\n        \u003cbutton onClick={previousYear}\u003e{\"\u003c\"}\u003c/button\u003e\n        {format(focusedDate, \"yyyy\")}\n        \u003cbutton onClick={nextYear}\u003e{\"\u003e\"}\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{ width: \"100%\" }}\u003e\n        \u003cbutton onClick={previousMonth}\u003e{\"\u003c\"}\u003c/button\u003e\n        {format(focusedDate, \"MMMM\")}\n        \u003cbutton onClick={nextMonth}\u003e{\"\u003e\"}\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{ display: \"flex\", flexWrap: \"wrap\" }}\u003e\n        {days.map(({ date, inMonth }) =\u003e (\n          \u003cbutton\n            disabled={!inMonth}\n            style={{ width: \"60px\", backgroundColor: isSelected(date) ? \"aliceblue\" : \"initial\" }}\n            key={date.toDateString()}\n            onClick={() =\u003e setValue(date)}\u003e\n            {format(date, \"d\")}\n          \u003c/button\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## useDatepicker\n\n▸ **useDatepicker**\u003c`T`\u003e([`props`](#props-2): [`UseCalendarProps`](#props-1) \u0026 [`UseDropdownProps`](https://github.com/tracksuitdev/use-dropdown#props)): [`UseCalendar`](#props-1) \u0026 [`UseDropdown`\u003c`T`\u003e](https://github.com/tracksuitdev/use-dropdown#return-value)\n\nCombines useCalendar and useDropdown hooks into one.\n\n### Props\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `additionalRefs?` | `RefObject`\u003c`HTMLElement`\\\u003e[] | These refs will be used when determining what constitutes a click outside of dropdown. |\n| `disabled?` | `boolean` | If true, open and close will do nothing |\n| `onClose?` | () =\u003e `void` |  Executed when close is called |\n| `onOpen?` | () =\u003e `void` | Executed when open is called |\n| `maxDate?` | `Date` | Only dates before this date will be marked valid  For best performance memoize this date, this will prevent recalculation of calendar days on each render. |\n| `minDate?` | `Date` | Only dates after this date will be marked valid.  For best performance memoize this date, this will prevent recalculation of calendar days on each render. |\n| `startDate?` | `Date` | If provided calendar will start at the month of provided date |\n| `validate?` | (`date`: `Date`) =\u003e `boolean` | Validation function, dates that fail this test will be marked invalid. For best performance memoize this function, this will prevent recalculation of calendar days on each render. |\n| `value?` | `Date` | Datepicker value |\n| `weekStartsOn?` | ``0`` ``1``  ``2``  ``3``  ``4`` ``5`` ``6`` | Day that a week starts on. 0 - sunday, 1 - monday ..., default is 0 |\n\n### Return value\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `dropdownRef` | `RefObject`\u003c`T`\\\u003e | Ref for dropdown element |\n| `isOpen` | `boolean` | Dropdown state |\n| `open` | () =\u003e `void` | Sets isOpen to true |\n| `close` | () =\u003e `void` | Sets isOpen to false |\n| `days` | [`UseDatepickerDay`](#usedatepickerday)[] | Returns all dates that can be seen in calendar view along with flags for each date that indicate if it is in the same month as focused date and if it is valid (available for selection).  Use this function to render month view of calendar. |\n| `focusedDate` | `Date` | First day of month that represents current calendar view |\n| `isSelected` | (`date`: `Date`) =\u003e `boolean` | Compares given date with value. |\n| `months` | `Date`[] | Dates representing each month in the same year as focusedDate.  You can use this function render month selection for calendar view. |\n| `nextMonth` | () =\u003e `void` | Adds one month to focusedDate. Use it to move calendar view to next month. |\n| `nextYear` | () =\u003e `void` | Adds one year to focusedDate. Use it to move calendar view to next year. |\n| `previousMonth` | () =\u003e `void` | Subtracts one month from focusedDate. Use it to move calendar view to previous month. |\n| `previousYear` | () =\u003e `void` | Adds one month to focusedDate. Use it to move calendar view to next month. |\n| `setFocusedDate` | `Dispatch`\u003c`SetStateAction`\u003c`Date`\\\u003e\\\u003e | Changes focusedDate, make sure to only pass first day of the month dates.  By changing focusedDate you are actually changing the reference point of calendar which means, once focused date is changed, days and months functions will use new focusedDate value as reference point. |\n| `years?` | `Date`[] | Dates representing eachYear from minDate to maxDate. Returns undefined if minDate or maxDate is not defined |\n\n### Usage\n```typescript jsx\nconst DateInputWithDatepicker = () =\u003e {\n  const [value, setValue] = useState\u003cDate\u003e();\n  const { ref, inputValue, resetValueOnDelete } = useDateInput({\n    value,\n    dateFormat: \"dd-MM-yyyy\",\n    maskBlocks,\n    onComplete: setValue,\n  });\n  const {\n    isOpen,\n    open,\n    days,\n    previousYear,\n    nextYear,\n    previousMonth,\n    nextMonth,\n    focusedDate,\n    dropdownRef,\n    isSelected,\n  } = useDatepicker\u003cHTMLDivElement\u003e({\n    value,\n  });\n\n  return (\n    \u003cdiv ref={dropdownRef}\u003e\n      \u003cinput ref={ref} value={inputValue} onChange={resetValueOnDelete} onFocus={open} /\u003e\n      {isOpen \u0026\u0026 (\n        \u003cdiv style={{ width: \"420px\" }}\u003e\n          \u003cdiv style={{ width: \"100%\" }}\u003e\n            \u003cbutton onClick={previousYear}\u003e{\"\u003c\"}\u003c/button\u003e\n            {format(focusedDate, \"yyyy\")}\n            \u003cbutton onClick={nextYear}\u003e{\"\u003e\"}\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv style={{ width: \"100%\" }}\u003e\n            \u003cbutton onClick={previousMonth}\u003e{\"\u003c\"}\u003c/button\u003e\n            {format(focusedDate, \"MMMM\")}\n            \u003cbutton onClick={nextMonth}\u003e{\"\u003e\"}\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv style={{ display: \"flex\", flexWrap: \"wrap\" }}\u003e\n            {days.map(({ date, inMonth }) =\u003e (\n              \u003cbutton\n                disabled={!inMonth}\n                style={{ width: \"60px\", backgroundColor: isSelected(date) ? \"aliceblue\" : \"initial\" }}\n                key={date.toDateString()}\n                onClick={() =\u003e setValue(date)}\u003e\n                {format(date, \"d\")}\n              \u003c/button\u003e\n            ))}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftracksuitdev%2Fuse-date-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftracksuitdev%2Fuse-date-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftracksuitdev%2Fuse-date-input/lists"}