{"id":26489547,"url":"https://github.com/jannicz/appointment-picker","last_synced_at":"2025-03-20T07:41:48.265Z","repository":{"id":57182898,"uuid":"109953059","full_name":"jannicz/appointment-picker","owner":"jannicz","description":"Appointment Picker - a tiny JavaScript timepicker that helps you pick appointments","archived":false,"fork":false,"pushed_at":"2019-04-27T12:52:21.000Z","size":668,"stargazers_count":70,"open_issues_count":3,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-09T20:32:00.751Z","etag":null,"topics":["appointment-scheduling","appointments","picker-library","picker-plugin","time"],"latest_commit_sha":null,"homepage":"https://jannicz.github.io/appointment-picker/","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/jannicz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-08T09:12:03.000Z","updated_at":"2024-08-01T14:11:09.000Z","dependencies_parsed_at":"2022-09-14T06:10:29.911Z","dependency_job_id":null,"html_url":"https://github.com/jannicz/appointment-picker","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jannicz%2Fappointment-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jannicz%2Fappointment-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jannicz%2Fappointment-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jannicz%2Fappointment-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jannicz","download_url":"https://codeload.github.com/jannicz/appointment-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244574787,"owners_count":20474818,"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":["appointment-scheduling","appointments","picker-library","picker-plugin","time"],"created_at":"2025-03-20T07:41:47.691Z","updated_at":"2025-03-20T07:41:48.254Z","avatar_url":"https://github.com/jannicz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Appointment Picker\n\nA lightweight, accessible and customizable javascript timepicker widget\n\n## Yet another timepicker? - Advantages\n - no dependencies\n - tiny (6KB minified, 2KB gzipped)\n - only the listed times can be picked or entered, no validation necessary\n \n\u003cp\u003e\n  \u003cimg src=\"example/appointment-picker-large.png\" width=\"550\" alt=\"\"/\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://jannicz.github.io/appointment-picker/\"\u003e\n  \u003cstrong\u003eSee Appointment-Picker Demo and Examples\u003c/strong\u003e\n\u003c/a\u003e\n\n## Installation\n```\nnpm i -S appointment-picker\n```\n\n## Setup\nWhen using inside a static HTML file, add both the stylesheet and the script\n```html\n\u003clink rel=\"stylesheet\" href=\"css/appointment-picker.css\"\u003e\n\u003cscript src=\"js/appointment-picker.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    new AppointmentPicker(...);\n\u003c/script\u003e\n```\n\n## Import\nWhen using with a module loader, import the node-module\n\n```js\n// Webpack (React, Angular, ES6)\nimport AppointmentPicker from 'appointment-picker';\n\n// CommonJS (Node, Browserify)\nconst AppointmentPicker = require('appointment-picker');\n```\n\nInitialize the picker using the `new` keyword\n```html\n\u003cinput id=\"time\" type=\"text\" value=\"10:00\"\u003e\n```\n```js\nvar picker = new AppointmentPicker(document.getElementById('time'), {});\n```\n\n## Options\nThe appointment-picker can be configured with options\n- `interval` sets the interval between appointments in minutes (`1-60`), if this number gets lower (more possible appointments) the picker will get longer\n- `mode` the picker can be used in standard `24h` hour mode or in `12h` mode - the latter uses am/pm postfix\n- `minTime` sets the minimum hour that can be picked, default is `0` what is eqivalent to 12am\n- `maxTime` sets the maximum hour that can be picked, default is `24`\n- `startTime` hides all appointments below this hour, default is `0`\n- `endTime` hides all appointments above this hour, default is `24`\n- `disabled` array of disabled appointments, i.e. `['10:30', '1:15pm', ...]` - these times cannot be selected or entered and will be skipped using the keyboard arrows\n- `large` increases the size of the picker and the appointments by setting a `is-large` modifier\n- `leadingZero` adds leading zero to single-digit hour if true (i.e. 07:15)\n- `allowReset` whether a time can be reset once entered\n- `title` defines the picker's heading\n- `templateOuter` HTML template that renders the picker's outer frame (usually containing a wrapper and title), must contain `{{innerHtml}}` placeholder ([example](https://jannicz.github.io/appointment-picker/example/render-on-init.html))\n- `templateInner` template for repeated list items (time inputs), must contain at least an `input` tag, `{{time}}` and optional `{{disabled}}` placeholder, i.e. `\u003cinput type=\"button\" value=\"{{time}}\" {{disabled}}\u003e`\n- `timeFormat24` custom time format for 24h mode (use placeholder `H` for hour, `M` for minute), i.e. `H/M` could evaluate to `13/45` ([example](https://jannicz.github.io/appointment-picker/#custom-time-format))\n- `timeFormat12` custom time format for am/pm mode (use placeholder `apm` for postfix - the algorithm will remove either the a or the p from the pattern), i.e. `H.M AP.M.` could evaluate to `1.30 A.M`\n\n__Note:__ with `startTime` and `endTime` appointments below and above can be visually removed. If startTime is greater than `minTime` a lower time can still be manually set via the keyboard. On the other hand the picker does not accept lower hours than `minTime` and higher than `maxTime`. Manually entered times outside of the defined bounds will be rejected by the picker, no extra validation is therefore needed. Entering an empty string into the input resets the time.\n\nNow you can pass your options into the the AppointmentPicker invocation\n\n```js\nvar picker = new AppointmentPicker(document.getElementById('time-2'), {\n  interval: 30,\n  mode: '12h',\n  minTime: 09,\n  maxTime: 22,\n  startTime: 08,\n  endTime: 24,\n  disabled: ['16:30', '17:00'],\n  templateInner: '\u003cli class=\"appo-picker-list-item {{disabled}}\"\u003e\u003cinput type=\"button\" tabindex=\"-1\" value=\"{{time}}\" {{disabled}}\u003e\u003c/li\u003e',\n  templateOuter: '\u003cspan class=\"appo-picker-title\"\u003e{{title}}\u003c/span\u003e\u003cul class=\"appo-picker-list\"\u003e{{innerHtml}}\u003c/ul\u003e'\n});\n```\n\n## Methods\nThe appointment-picker exposes several functions to change its behaviour from outside ([example](https://jannicz.github.io/appointment-picker/example/exposed-functions.html)).\n\nMethod | Desc.\n--- | ---\n`picker.open()` | open the picker popup\n`picker.getTime()` | get the current time programmatically from a picker instance, returns an object like `{ h: 14, m: 30, displayTime: '2:30 pm' }`\n`picker.setTime('10:30')` | set a time of a picker instance (empty string resets the time)\n`picker.close()` | close the picker popup\n`picker.destroy()` | destroy the picker instance and remove both the markup and all event listeners\n\n## Events\nAppointment-picker exposes events for hooking into the functionality:\n\n- `change.appo.picker` triggered on each successful value change ([event example](https://jannicz.github.io/appointment-picker/example/exposed-functions.html))\n- `open.appo.picker` is fired each time the picker is opened\n- `close.appo.picker` is fired each time the picker is closed\n\nEach `event` contains 2 properties `time` and `displayTime`, i.e. `event.time: {'h':14,'m':30}` and `event.displayTime: '2:30 pm'`\n\n```js\ndocument.body.addEventListener('change.appo.picker', function(e) { var time = e.time; }, false);\n```\n\n## Styling\nAll appointment-picker styles are namespaced with `.appo-picker`, i.e. `.appo-picker-list-item`.\nYou can either copy and modify the provided CSS, or import it using\n\n```css\n/* Using sass/scss */\n@import '~appointment-picker/css/appointment-picker';\n```\n\nor in your javascript file\n\n```js\n// Using a css-loader inside JS (relative path to your node_modules folder)\nimport '../node_modules/appointment-picker/css/appointment-picker.css';\n```\n\n## Accessibility\n\nFor screen reader support add both a `aria-label` and `aria-live` properties on the input field\n```html\n\u003cinput id=\"time-1\" type=\"text\" aria-live=\"assertive\" aria-label=\"Use up or down arrow keys to change time\"\u003e\n```\n\n## Browser Support\n- Chrome\n- Firefox\n- Safari (macOS 10 \u0026 iOS 9)\n- Edge\n- IE11 / IE10\n- IE9 (with classList polyfill)\n\n### Legacy browser support (IE9)\n\nAdd the [element.classList polyfill](https://www.npmjs.com/package/classlist-polyfill) by either importing it with a module loader or simply add the polyfill [from a CDN](https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js) in your html head.\n\n## Integration\n\n### Use as jQuery plugin\n\nIf you would like to use the appointment-picker as a jQuery plugin add following code before initializing\n```js\n$.fn.appointmentPicker = function(options) {\n  this.appointmentPicker = new AppointmentPicker(this[0], options);\n  return this;\n};\n```\n\nNow you can initialize the picker on any text input field using `$`\n```html\n\u003cinput id=\"time-1\" type=\"text\"\u003e\n```\n\n```js\nvar $picker = $('#time-1').appointmentPicker();\n\n// Or pass in options\n$('#time-1').appointmentPicker({\n  interval: 15\n});\n\n// And access all exposed methods using jQuery\n$picker.appointmentPicker.getTime(); // i.e. { h: 15, m: 30, displayTime: '3:30 pm' }\n```\n\n### Use with React\n\nAppointment Picker can be easily integrated into a React component. Simply import the node module and use `React.createRef()`\nto pass the DOM element when calling `new AppointmentPicker` ([see example](https://jannicz.github.io/appointment-picker/example/react.html))\n\n```js\nimport AppointmentPicker from 'appointment-picker';\n\nclass AppoPicker extends React.Component {\n\n  constructor(props) {\n    super(props);\n    this.pickerRef = React.createRef();\n    this.onTimeSelect = this.onTimeSelect.bind(this);\n  }\n  \n  render() {\n    return \u003cinput type=\"text\" ref={ this.pickerRef }\u003e\u003c/input\u003e;\n  }\n\n  onTimeSelect(event) {\n    console.log(event.time);\n  }\n  \n  componentDidMount() {\n    this.picker = new AppointmentPicker(this.pickerRef.current, {});\n    this.pickerRef.current.addEventListener('change.appo.picker', this.onTimeSelect);\n  }\n  \n  componentWillUnmount() {\n    this.pickerRef.current.removeEventListener('change.appo.picker', this.onTimeSelect);\n    this.picker.destroy();\n  }\n}\n```\n\n### Use with Angular\n\nTo integrate AppointmentPicker into an Angular component, import it's CSS, create a `@ViewChild` reference (`#pickerInput`) and pass it's nativeElement when calling `new AppointmentPicker`.\n\n```css\n/* CSS, SCSS */\n@import '~appointment-picker/css/appointment-picker';\n```\n\n```html\n\u003c!-- HTML --\u003e\n\u003cinput #pickerInput type=\"text\"\u003e\n```\n\n```js\nimport AppointmentPicker from 'appointment-picker';\n\n@Component({\n  selector: 'xyz-picker',\n  templateUrl: './picker.component.html',\n  styleUrls: ['./picker.component.scss'],\n  // Disable View Encapsulation to pass down the picker's CSS styles\n  encapsulation: ViewEncapsulation.None\n})\nexport class PickerComponent implements OnInit, OnDestroy {\n\n  @ViewChild('pickerInput') input: ElementRef;\n\n  picker: AppointmentPicker;\n\n  @HostListener('change.appo.picker', ['$event'])\n  onChangeTime(event: any) {\n    console.log('change.appo.picker', event.time);\n  }\n\n  ngOnInit() {\n    this.picker = new AppointmentPicker(this.input.nativeElement, {});\n  }\n\n  ngOnDestroy() { this.picker.destroy(); }\n}\n```\n\n## Author \u0026 License\n- Jan Suwart | MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjannicz%2Fappointment-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjannicz%2Fappointment-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjannicz%2Fappointment-picker/lists"}