{"id":17937896,"url":"https://github.com/michaellasky/yardtp-datetimepicker","last_synced_at":"2026-01-21T16:37:38.634Z","repository":{"id":34911212,"uuid":"170407278","full_name":"michaellasky/yardtp-datetimepicker","owner":"michaellasky","description":"A date-fns backed datetimepicker for react 16.8+","archived":false,"fork":false,"pushed_at":"2022-12-08T13:41:05.000Z","size":2305,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T04:19:01.693Z","etag":null,"topics":["date-fns","datepicker","datetimepicker","hooks","mit-license","react","react-jss","reactjs","timepicker"],"latest_commit_sha":null,"homepage":"","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/michaellasky.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":"2019-02-12T23:26:51.000Z","updated_at":"2019-05-29T20:16:09.000Z","dependencies_parsed_at":"2023-01-15T10:15:59.399Z","dependency_job_id":null,"html_url":"https://github.com/michaellasky/yardtp-datetimepicker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaellasky%2Fyardtp-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaellasky%2Fyardtp-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaellasky%2Fyardtp-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaellasky%2Fyardtp-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaellasky","download_url":"https://codeload.github.com/michaellasky/yardtp-datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247810033,"owners_count":20999816,"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-fns","datepicker","datetimepicker","hooks","mit-license","react","react-jss","reactjs","timepicker"],"created_at":"2024-10-28T23:08:14.582Z","updated_at":"2026-01-21T16:37:38.582Z","avatar_url":"https://github.com/michaellasky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n# yardtp-datetimepicker - Yet Another React Datetime Picker\n\n\u003e yardtp-datetimepicker is a blazingly unbenchmarked Datetime Picker component for React 16.8+ focusing on simplicity and accessiblity. \n\n[![NPM](https://img.shields.io/npm/v/yardtp-datetimepicker.svg)](https://www.npmjs.com/package/yardtp-datetimepicker) \n[![SIZE](https://img.shields.io/bundlephobia/min/yardtp-datetimepicker.svg)](https://www.npmjs.com/package/yardtp-datetimepicker)\n\n## Install\n\n```bash\nnpm install --save yardtp-datetimepicker\n```\n## Dependencies\n* [![Version](http://img.shields.io/npm/v/date-fns.svg?style=flat)](https://www.npmjs.com/package/date-fns) date-fns\n* [![Version](http://img.shields.io/npm/v/react-jss.svg?style=flat)](https://www.npmjs.com/package/react-jss) react-jss\n\n## Peer Dependencies\n* [![npm version](http://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) React 16.8+ (hooks)\n\n## Usage\n[Go to Live Examples](https://michaellasky.github.io/yardtp-datetimepicker/)\n\n```jsx\nimport React from 'react';\nimport { DatePicker, useDatePickerState } from 'yardtp-datetimepicker/';\nimport format from 'date-fns/format';\n\n// EXAMPLE 1: DatePicker basic usage\n\nexport default function Example1 (props) {\n\n    // useDatePickerState will default to today\n    const state = useDatePickerState(); \n    // The output of useDatePickerState is an array with values and setFunctions for \n    // the currently selected day and the date for the calendar to display\n    const [selectedValue, setSelectedValue, calendarValue, setCalendarValue] = state;\n\n    return (\n        \u003c\u003e\n        {format(selectedValue, 'MMMM d, y')} - {format(calendarValue, 'MMMM d, y')}\n        \u003cDatePicker state={state} /\u003e\n        \u003c/\u003e\n    );\n}\n```\n\n## Options\n\n### DateTimePicker \n| Name              | Default    |  |\n| ----------------- |:----------:| -\n| state             |            | This is an array containing: [selected datetime, set selected datetime function, calendar display datetime, set calendar display datetime function. ]  You can create this via the helper function useDatePickerState, or by spreading two useState calls ([...useState(selectedDateTime), ....useState(calendarDateTime)]).  State is passed through to both DatePicker and TimePicker, and is therefor common to both.\n     \nThe props listed below can be passed to DateTimePicker and will be passed through to  DatePicker and TimePicker.\n\n### DatePicker\n| Name              | Default    |  |\n| ----------------- |:----------:| -\n| earliestDate      | 01/01/0001 | The earliest selectable datetime. Expects a vanilla Javascript Date object.\n| latestDate        | 12/31/9999 | The latest selectable datetime. Expects a vanilla Javascript Date object.\n| monthFormat      | \"MMMM\"      | Format that gets passed to date-fns format function when displaying the month.  See: [Unicode Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)\n| yearFormat       | \"yyyy\"      | Format that gets passed to date-fns format function when displaying the year.  See: [Unicode Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)\n\n### TimePicker\n| Name              | Default |  |\n| ----------------- |:-------:| -\n| restrictTimeToDay | true    | If true, the Selected Calendar Day won't advance to  next day when the time selected increases past 12:00am, nor retreat to the previous day when selected time decreases before 12:00am. \n| intervalStep      | 15      | Number of minutes to advance or retreat the selected time. \n| format    \t    | \"p\"     | Format that gets passed to date-fns format function when displaying the time.  See: [Unicode Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)\n\n## Styling\nSee: [https://nuclearhorsestudios.github.io/yardtp-datetimepicker/#styling](https://nuclearhorsestudios.github.io/yardtp-datetimepicker/#styling)\n\n## License\n\nMIT © [Michael Lasky](https://github.com/NuclearHorseStudios)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaellasky%2Fyardtp-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaellasky%2Fyardtp-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaellasky%2Fyardtp-datetimepicker/lists"}