{"id":27979405,"url":"https://github.com/thhamiltonsmith/easy-datetime-picker","last_synced_at":"2025-05-08T02:52:55.755Z","repository":{"id":291953407,"uuid":"979332399","full_name":"THHamiltonSmith/easy-datetime-picker","owner":"THHamiltonSmith","description":"An easy, modern date-time picker made in vanilla HTML, CSS and JS","archived":false,"fork":false,"pushed_at":"2025-05-07T11:13:38.000Z","size":371,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T02:52:53.864Z","etag":null,"topics":["datepicker","datetime","js"],"latest_commit_sha":null,"homepage":"https://thhamiltonsmith.github.io/easy-datetime-picker/demo/","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/THHamiltonSmith.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,"zenodo":null}},"created_at":"2025-05-07T10:57:34.000Z","updated_at":"2025-05-07T11:13:41.000Z","dependencies_parsed_at":"2025-05-07T11:50:12.098Z","dependency_job_id":null,"html_url":"https://github.com/THHamiltonSmith/easy-datetime-picker","commit_stats":null,"previous_names":["thhamiltonsmith/easy-datetime-picker"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THHamiltonSmith%2Feasy-datetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THHamiltonSmith%2Feasy-datetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THHamiltonSmith%2Feasy-datetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THHamiltonSmith%2Feasy-datetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/THHamiltonSmith","download_url":"https://codeload.github.com/THHamiltonSmith/easy-datetime-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252989963,"owners_count":21836667,"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":["datepicker","datetime","js"],"created_at":"2025-05-08T02:52:53.716Z","updated_at":"2025-05-08T02:52:55.744Z","avatar_url":"https://github.com/THHamiltonSmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easy-datetime-picker\n\nA simple, lightweight, dependency-free **Date \u0026 Time Picker** built in vanilla JavaScript and CSS.  \nDesigned to be **easy to use**, **highly customizable**, and **visually clean**, it replaces the default browser UI with a modern, consistent picker experience. View a demo of how it works \u003ca href=\"https://thhamiltonsmith.github.io/easy-datetime-picker/demo/\"\u003ehere.\u003c/a\u003e\n\n\u003cimg src=\"/demo/Demo.png\" alt=\"Demo of the Date Picker\u003e\"\u003e\n\n## Why This Picker?\n\nThe native HTML date/time inputs vary wildly in style and behaviour across browsers, and often do not meet modern design or accessibility expectations.  \n`easy-datetime-picker` gives you a uniform, easy-to-style, and fully configurable picker with **zero dependencies**.\n\n---\n\n## Features\n\n- **Date Picker**: Select single dates, with min/max ranges, disable specific weekdays or weekends, default to today, and optionally disallow today.\n- **Time Picker**: 12 h (AM/PM) or 24 h formats, configurable intervals, min/max times, and disallow past times.\n- **Linked Pickers**: Link a time picker to a date picker (`data-linked-to`), and link start/end ranges for both date and time.\n- **Range Selection**: Choose start/end dates or start/end times in one interface, with invalid values automatically disabled.\n- **Responsive Positioning**: Auto-positions above/below the button to stay within viewport.\n\n---\n\n## Installation\n\n1. Include the CSS and JS in your HTML:\n\n```html\n   \u003clink rel=\"stylesheet\" href=\"date-picker.css\" /\u003e\n   \u003cscript src=\"date-picker.js\" defer\u003e\u003c/script\u003e\n```\n\nMost of the css can be modified to suit your needs, although changing class names and changing the div structure will most likely break things. Changing the colours though and basic styling should be mostly harmless.\n\n2. Add any element with class `picker-button` and the appropriate `data-` attributes.\n\n3. Add the required picker backdrop and elements somewhere in your DOM on pages where it is needed. This will auto-populate based on the properties of your date/time buttons when they are clicked.\n\n```html\n\u003c!-- Shared picker dropdowns --\u003e\n\u003cdiv id=\"picker-backdrop\" class=\"picker-backdrop\"\u003e\u003c/div\u003e\n\u003cdiv id=\"date-picker\" class=\"date-picker\"\u003e\n    \u003cdiv class=\"date-picker-header\"\u003e\n        \u003cdiv class=\"days-of-week\"\u003e\n            \u003cspan\u003eM\u003c/span\u003e\u003cspan\u003eT\u003c/span\u003e\u003cspan\u003eW\u003c/span\u003e\n            \u003cspan\u003eT\u003c/span\u003e\u003cspan\u003eF\u003c/span\u003e\u003cspan\u003eS\u003c/span\u003e\u003cspan\u003eS\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"date-picker-months\" class=\"date-picker-months\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"time-picker\" class=\"time-picker\"\u003e\u003c/div\u003e\n```\n---\n\n## Basic Examples\n\nHere are some basic HTML examples of date and time picker buttons. You can customise them using various supported data properties, which can be found below.\n\n### 1. Standalone Date Picker\n\n```html\n\u003cdiv class=\"picker-button\"\n     data-picker-type=\"date\"\n     data-days-back=\"0\"\n     data-days-forward=\"365\"\u003e\n  \u003cspan class=\"picker-value\"\u003eSelect Date\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### 2. Standalone Time Picker\n\n```html\n\u003cdiv class=\"picker-button\"\n     data-picker-type=\"time\"\n     data-time-interval=\"15\"\n     data-start-time=\"09:00\"\n     data-end-time=\"17:00\"\n     data-24hour=\"true\"\u003e\n  \u003cspan class=\"picker-value\"\u003eSelect Time\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### 3. Linked Date + Time\n\n```html\n\u003cdiv class=\"picker-button\" id=\"my-date\"\n     data-picker-type=\"date\"\n     data-days-back=\"0\"\n     data-days-forward=\"30\"\n     data-default-today=\"true\"\u003e\n  \u003cspan class=\"picker-value\"\u003eSelect Date\u003c/span\u003e\n\u003c/div\u003e\n\u003cdiv class=\"picker-button\"\n     data-picker-type=\"time\"\n     data-linked-to=\"my-date\"\n     data-time-interval=\"30\"\n     data-start-time=\"08:00\"\n     data-end-time=\"18:00\"\n     data-allow-past-times=\"false\"\u003e\n  \u003cspan class=\"picker-value\"\u003eSelect Time\u003c/span\u003e\n\u003c/div\u003e\n```\n\n---\n\n## Supported `data-` Attributes\n\nThere are multiple supported data attributes that can and should be used to allow different types of functioanlity. some of them such as `'data-picker-type'` and `'data-value'` are required, while others are optional, but will of course provide varying functionality:\n\n#### Common\n- **`data-picker-type=\"date\" | \"time\"`**  \n  Specifies whether this button opens the date picker or time picker.\n\n- **`data-value`**  \n  Auto-populated to store the selected date (`D-M-YYYY`) or time (`HHMM`).\n\n#### Date Picker\n- **`data-days-back=\"N\"`**  \n  Number of days before today that can be selected.\n\n- **`data-days-forward=\"N\"`**  \n  Number of days after today that can be selected.\n\n- **`data-default-today=\"true|false\"`**  \n  Auto-select today’s date when the picker first opens.\n\n- **`data-allow-today=\"true|false\"`**  \n  Allow or disallow selecting today explicitly.\n\n- **`data-disable-weekends=\"true|false\"`**  \n  Disable selection of Saturdays (`6`) and Sundays (`0`).\n\n- **`data-disable-weekdays=\"0,1,2,...\"`**  \n  Disable specific weekdays (0=Sun, 1=Mon, …).\n\n##### Range Mode\n- **`data-range-group=\"groupName\"`**  \n  Identifier to link two date pickers as a start/end range.\n\n- **`data-range=\"start\" | \"end\"`**  \n  Marks this picker as the start or end in a date range.\n\n#### Time Picker\n- **`data-time-interval=\"minutes\"`**  \n  Time slot increment in minutes (e.g. `5`, `15`, `30`).\n\n- **`data-start-time=\"HH:MM\"`**  \n  Earliest selectable time.\n\n- **`data-end-time=\"HH:MM\"`**  \n  Latest selectable time.\n\n- **`data-24hour=\"true|false\"`**  \n  Display times in 24-hour format if `true`, otherwise use AM/PM.\n\n- **`data-allow-past-times=\"true|false\"`**  \n  Disable times that have already passed on the current date.\n\n##### Linked Mode\n- **`data-linked-to=\"dateButtonId\"`**  \n  The `id` of the date picker button this time picker is linked to.\n\n- **`data-range-group=\"groupName\"`**  \n  Identifier to link two time pickers as a start/end range.\n\n- **`data-range=\"start\" | \"end\"`**  \n  Marks this picker as the start or end in a time range.\n\n\n---\n\n## Contributing\n\nFor any suggestions or improvements, please feel free to **open an issue** or **submit a pull request** on GitHub!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthhamiltonsmith%2Feasy-datetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthhamiltonsmith%2Feasy-datetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthhamiltonsmith%2Feasy-datetime-picker/lists"}