{"id":21392322,"url":"https://github.com/hiyali/ng-data-picker","last_synced_at":"2025-09-10T14:41:58.500Z","repository":{"id":84520018,"uuid":"108070461","full_name":"hiyali/ng-data-picker","owner":"hiyali","description":" 🏄🏼  A data picker based on Angular 4+ (like native datetime picker of iOS) ","archived":false,"fork":false,"pushed_at":"2020-05-06T05:54:57.000Z","size":438,"stargazers_count":23,"open_issues_count":4,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T15:52:32.662Z","etag":null,"topics":["angular2","angular4","data-picker","datetime","ng-data-picker","ng2","picker","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/hiyali.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},"funding":{"github":"hiyali","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-10-24T03:08:52.000Z","updated_at":"2025-02-12T08:15:48.000Z","dependencies_parsed_at":"2023-03-02T04:30:31.589Z","dependency_job_id":null,"html_url":"https://github.com/hiyali/ng-data-picker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/hiyali/ng-data-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fng-data-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fng-data-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fng-data-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fng-data-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiyali","download_url":"https://codeload.github.com/hiyali/ng-data-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fng-data-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265186540,"owners_count":23724686,"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":["angular2","angular4","data-picker","datetime","ng-data-picker","ng2","picker","typescript"],"created_at":"2024-11-22T13:39:58.187Z","updated_at":"2025-07-13T18:31:15.767Z","avatar_url":"https://github.com/hiyali.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hiyali"],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"**No time for maintenance** - welcome to send a useful PR  :)\n# ng-data-picker  \u003csup\u003e[![Version Badge](http://versionbadg.es/hiyali/ng-data-picker.svg)](https://npmjs.com/package/ng-data-picker)\u003c/sup\u003e\n🏄🏾  A Data Picker for Angular 4+\n\n[![npm package](https://img.shields.io/npm/v/ng-data-picker.svg)](https://npmjs.com/package/ng-data-picker)\n[![travis build](https://img.shields.io/travis/hiyali/ng-data-picker/master.svg)](https://travis-ci.org/hiyali/ng-data-picker)\n[![NPM downloads](http://img.shields.io/npm/dt/ng-data-picker.svg)](https://npmjs.org/package/ng-data-picker)\n![gzip size](http://img.badgesize.io/hiyali/ng-data-picker/gh-pages/lib/data-picker/data-picker.component.js.svg?compression=gzip\u0026label=gzip%20size)\n[![CircleCI](https://circleci.com/gh/hiyali/ng-data-picker/tree/master.svg?style=shield)](https://circleci.com/gh/hiyali/ng-data-picker/tree/master)\n\n[![NPM Description](https://nodei.co/npm/ng-data-picker.png?downloads=true\u0026stars=true)](https://npmjs.org/package/ng-data-picker)\n\n\u003e Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...\n\n## Examples\n\n\u003e See branch [gh-pages](https://github.com/hiyali/ng-data-picker/tree/gh-pages) for all code of extant examples and environment.\n\n| Demo      | Level      | Code      |\n| :-------- | :--------- | :-------- |\n| [gender](https://hiyali.github.io/ng-data-picker/docs/#/gender) | ★         | [gender.component.ts](https://github.com/hiyali/ng-data-picker/tree/gh-pages/src/app/gender/gender.component.ts) |\n| [product](https://hiyali.github.io/ng-data-picker/docs/#/product) | ★★        | [product.component.ts](https://github.com/hiyali/ng-data-picker/tree/gh-pages/src/app/product/product.component.ts) |\n| [date-time](https://hiyali.github.io/ng-data-picker/docs/#/date-time) | ★★★     | [date-time.component.ts](https://github.com/hiyali/ng-data-picker/tree/gh-pages/src/app/date-time/date-time.component.ts) |\n\n## Take a look\n\n![Screen shot](https://raw.githubusercontent.com/hiyali/ng-data-picker/gh-pages/assets/example-screenshot.png \"screenshot\")\n\n⚠️ Below gif is a temporary used from [vue version](https://github.com/hiyali/vue-smooth-picker) of this picker. will be updated soon.\n\n![Screen record](https://raw.githubusercontent.com/hiyali/vue-smooth-picker/gh-pages/assets/smooth-picker-screen-record.gif \"screen record\")\n\n## Install\n\n```shell\nyarn add ng-data-picker\n```\nor\n```shell\nnpm i -S ng-data-picker\n```\n\n## Usage\n\n### Quick look\n\n#### app.module.ts\n```typescript\nimport { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'\nimport { DataPickerComponent } from 'ng-data-picker'\n\n@NgModule({\n  ...\n  declarations: [\n    DataPickerComponent\n  ],\n  schemas: [\n    NO_ERRORS_SCHEMA // for third party component\n  ],\n  ...\n})\n```\n\n#### app.component.ts\n```typescript\nexport class AppComponent {\n  data = [\n    {\n      list: ['sun', 'earth', 'moon']\n    }\n  ]\n\n  change ({ gIndex, iIndex }) {\n    console.log(gIndex, iIndex)\n  }\n}\n```\n\n#### app.component.html\n```html\n\u003cng-data-picker [data]=\"data\" (change)=\"change($event)\"\u003e\u003c/ng-data-picker\u003e\n```\n\n## ⚙️ Props\n\n| name                       | type       | default       | explain                          |\n| :------------------------- | :--------- | :------------ | :------------------------------- |\n| `change`                   | `Function` | ({gIndex,iIndex})=\u003e{} | Callback after which group's current index changed, pass two arguments, group index `gIndex` and item index `iIndex` |\n| `data`                     | `Array`    | []            | Picker initial data              |\n| `data[i].currentIndex`     | `Number`   | 0             | Current index of this group's list |\n| `data[i].weight`           | `Number`   | 1             | Group weights in parent width `1..12` |\n| `data[i].list`             | `Array`    | -             | List of the group                |\n| `data[i].list[j]`          | `String` or `Object` | -   | Item in the list of group, use `value` key when it is a object item |\n| `data[i].onClick`          | `Function` | -             | Click event on the middle layer of this group, pass two arguments that group index `gIndex` and selected index `iIndex` of this group |\n| `data[i].textAlign`        | `String`   | -             | `start` `center` `end` `justify` `left` `right` `nowrap` `wrap` |\n| `data[i].className`        | `String`   | -             | Your custom class name for this group |\n| `data[i].divider`          | `Boolean`  | false         | If it is true, then `onClick` `list` `currentIndex` will not be used |\n| `data[i].text`             | `String`   | -             | Just use this text when `divider` is true |\n\n## 🔨 Instance methods\n\n| name                       | type       | explain                          |\n| :------------------------- | :--------- | :------------------------------- |\n| `setGroupData`             | `Function` (gIndex,gData)=\u003evoid | Dynamically set a group data with two arguments `(gIndex, gData)`, group index and group data (see props `data[i]`) |\n| `getCurrentIndexList`      | `Function` ()=\u003e[] | Return a `Array` of the groups current index list (has divider current index, and it is default to `0`) |\n| `getGroupsRectList`        | `Function` ()=\u003evoid | Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |\n\n## Development\n\n```shell\nnpm start # development\nnpm run build:prod # build for production\nnpm run prepare # build for third party\n```\n\n## Any problem?\n\n\u003e Please let me know.\n* [Open a new issue for this repo](https://github.com/hiyali/ng-data-picker/issues)\n* [Send a Email to: hiyali920@gmail.com](mailto:hiyali920@gmail.com)\n\n## Is it useful?\n\n🌚  Donate [A github star ⍟](https://github.com/hiyali/ng-data-picker)\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiyali%2Fng-data-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiyali%2Fng-data-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiyali%2Fng-data-picker/lists"}