{"id":23274258,"url":"https://github.com/luncheon/clocklet","last_synced_at":"2025-04-10T01:08:19.638Z","repository":{"id":32536240,"uuid":"133032747","full_name":"luncheon/clocklet","owner":"luncheon","description":"An opinionated clock-style vanilla-js timepicker.","archived":false,"fork":false,"pushed_at":"2025-01-17T06:28:01.000Z","size":517,"stargazers_count":40,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-10T01:08:15.956Z","etag":null,"topics":["clock","clockpicker","picker","time","timepicker","vanilla-js"],"latest_commit_sha":null,"homepage":"https://luncheon.github.io/clocklet/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luncheon.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":"2018-05-11T11:43:20.000Z","updated_at":"2025-03-17T18:08:06.000Z","dependencies_parsed_at":"2025-03-03T21:01:48.167Z","dependency_job_id":"6f743754-bb2d-4228-b80e-0e32c719a240","html_url":"https://github.com/luncheon/clocklet","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fclocklet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fclocklet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fclocklet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fclocklet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luncheon","download_url":"https://codeload.github.com/luncheon/clocklet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137887,"owners_count":21053775,"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":["clock","clockpicker","picker","time","timepicker","vanilla-js"],"created_at":"2024-12-19T20:12:41.254Z","updated_at":"2025-04-10T01:08:19.621Z","avatar_url":"https://github.com/luncheon.png","language":"JavaScript","readme":"## \u003ca name=\"clocklet\" href=\"#clocklet\" style=\"pointer-events:none\"\u003e![Clocklet](https://luncheon.github.io/clocklet/logo.png)\u003c/a\u003e\n\n[![npm](https://img.shields.io/npm/dm/clocklet.svg?style=popout-square\u0026label=npm\u0026colorB=orange)](https://www.npmjs.com/package/clocklet)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/clocklet/badge)](https://www.jsdelivr.com/package/npm/clocklet)\n[\u003cimg alt=\"WTFPL\" src=\"https://luncheon.github.io/wtfpl-badge.png\" height=\"20\"\u003e](http://www.wtfpl.net)\n\nAn opinionated clock-style vanilla-js timepicker.  \n[Demo  \n![clocklet capture image](https://luncheon.github.io/clocklet/capture.png)](https://luncheon.github.io/clocklet/demo.html)\n\n\n## Features\n\n* **Keyboard and numpad friendly**\n  * Autocomplete - e.g. `\"1\"`-\u003e`\"01:00\"`, `\"12\"`-\u003e`\"12:00\"`, `\"1234\"`-\u003e`\"12:34\"`\n  * Support up/down arrow key to increment/decrement\n* Mouse and touch friendly\n  * 3 clicks are sufficient to pick a time - am/pm, hour, minute\n  * Click targets often used are large enough\n  * No need to scroll\n* Declarative usage\n* Vanilla JS - no need jQuery or any other frameworks\n* Lightweight (CSS + JS ~ 7kB gzipped)\n\n\n## Installation\n\n### via npm (with a module bundler)\n\n```bash\n$ npm install clocklet\n```\n\n```javascript\nimport \"clocklet/css/clocklet.min.css\";\nimport clocklet from \"clocklet\";\n```\n\n### via CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/clocklet@0.3.0/css/clocklet.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/clocklet@0.3.0\"\u003e\u003c/script\u003e\n\u003cscript\u003e/* `window.clocklet` object is available */\u003c/script\u003e\n```\n\n### Download directly\n\n\u003ca target=\"_blank\" download=\"clocklet.min.css\" href=\"https://cdn.jsdelivr.net/npm/clocklet@0.3.0/css/clocklet.min.css\"\u003eclocklet.min.css\u003c/a\u003e  \n\u003ca target=\"_blank\" download=\"clocklet.min.js\"  href=\"https://cdn.jsdelivr.net/npm/clocklet@0.3.0/umd/clocklet.min.js\"\u003eclocklet.min.js\u003c/a\u003e\n\n\n## Usage\n\nPlace `\u003cinput\u003e` elements having `data-clocklet` attribute (either before or after loading the clocklet script).  \nWhen these elements get focused, the timepicker popups.\n\n```html\n\u003cinput data-clocklet\u003e\n```\n\n[CodePen](https://codepen.io/luncheon/pen/XWdeXjY)\n\n## Options\n\n### Default options\n\nDefault options can be set as properties of `clocklet.defaultOptions` object.  \nOption names must be described in **camelCase**.\n\n```javascript\nclocklet.defaultOptions.zIndex = 9999;\nclocklet.defaultOptions.format = \"hh:mm a\";\n```\n\n### Element-specific options\n\nElement-specific options can be specified as semicolon-separated `data-clocklet` attribute value.  \nOption names must be described in **kebab-case**.\n\n```html\n\u003cinput data-clocklet=\"class-name: my-clocklet-style; placement: top;\"\u003e\n```\n\n### Available options\n\n| Name       | Type                           | Default  | Description                                                                                     |\n| ---------- | ------------------------------ | -------- | ----------------------------------------------------------------------------------------------- |\n| class-name | string                         | \"\"       | Class name to set to the root element of the popup.                                             |\n| format     | string                         | \"HH:mm\"  | Time format (template) of the input element.\u003cbr\u003eSome tokens are replaced with the selected time value.\u003cbr\u003eSee the [format tokens](#format-tokens) section below. |\n| placement  | \"top\" \\| \"bottom\"              | \"bottom\" | Popup placement.                                                                                |\n| alignment  | \"left\" \\| \"center\" \\| \"right\"  | \"left\"   | Popup alignment.                                                                                |\n| append-to  | \"body\" \\| \"parent\"             | \"body\"   | The parent element into which the popup element will be inserted.                               |\n| z-index    | number \\| string               | \"\"       | Popup z-order.\u003cbr\u003eIf this value is an empty string, (1 + z-index of the input element) is used. |\n\n### Format tokens\n\n| Token | Range            | Description                                                      |\n| ----- | ---------------- | ---------------------------------------------------------------- |\n| H     | \"0\" .. \"23\"      | Hour in 0-based 24-hour notation with no padding.                |\n| HH    | \"00\" .. \"23\"     | Hour in 0-based 24-hour notation with zero padding.              |\n| \\_H   | \" 0\" .. \"23\"     | Hour in 0-based 24-hour notation with space padding.             |\n| h     | \"1\" .. \"12\"      | Hour in 1-based 12-hour notation with no padding.                |\n| hh    | \"01\" .. \"12\"     | Hour in 1-based 12-hour notation with zero padding.              |\n| \\_h   | \" 1\" .. \"12\"     | Hour in 1-based 12-hour notation with space padding.             |\n| k     | \"1\" .. \"24\"      | Hour in 1-based 24-hour notation with no padding.                |\n| kk    | \"01\" .. \"24\"     | Hour in 1-based 24-hour notation with zero padding.              |\n| \\_k   | \" 1\" .. \"24\"     | Hour in 1-based 24-hour notation with space padding.             |\n| m     | \"0\" .. \"59\"      | Minute with no padding.                                          |\n| mm    | \"00\" .. \"59\"     | Minute with zero padding.                                        |\n| \\_m   | \" 0\" .. \"59\"     | Minute with space padding.                                       |\n| a     | \"am\" \\| \"pm\"     | Post or ante meridiem abbreviation in lowercase without periods. |\n| aa    | \"a.m.\" \\| \"p.m.\" | Post or ante meridiem abbreviation in lowercase with periods.    |\n| A     | \"AM\" \\| \"PM\"     | Post or ante meridiem abbreviation in uppercase without periods. |\n| AA    | \"A.M.\" \\| \"P.M.\" | Post or ante meridiem abbreviation in uppercase with periods.    |\n\n\n## Events\n\nFollowing events are raised on the input element by this library.\n\n| Type             | Cancelable | event.details      | Description                               |\n| ---------------- | ---------- | ------------------ | ----------------------------------------- |\n| clocklet.opening | **true**   | { options: {...} } | Raised before showing the clocklet popup. |\n| clocklet.opened  | false      | { options: {...} } | Raised after showing the clocklet popup.  |\n| clocklet.closing | **true**   | {}                 | Raised before hiding the clocklet popup.  |\n| clocklet.closed  | false      | {}                 | Raised after hiding the clocklet popup.   |\n| input            | false      | undefined          | Raised after changing the input value.    |\n\nFor example:\n\n```html\n\u003cinput id=\"my-clocklet\" data-clocklet\u003e\n\u003cscript\u003e\n  document\n    .getElementById(\"my-clocklet\")\n    .addEventListener(\"clocklet.opening\", function (event) {\n      console.log(event.details.options);\n      if (DO_NOT_NEED_TIMEPICKER) {\n        event.preventDefault();\n      }\n    });\n\u003c/script\u003e\n```\n\n\n## API\n\n### `clocklet.defaultOptions`\n\nSee [default options](#default-options) section.\n\n### `clocklet.open(inputElement[, options])`\n\nShow the timepicker for the specified `inputElement` with the `options` (optional).\n\n### `clocklet.close()`\n\nHide the timepicker.\n\n### `clocklet.inline(containerElement[, { input, format }])`\n\nPlace the timepicker into the `containerElement`.  \nThe optional parameter is the binding setting for the `input` element.\n\n## License\n\n[WTFPL](http://www.wtfpl.net)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fclocklet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluncheon%2Fclocklet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fclocklet/lists"}