Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hiyali/ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
https://github.com/hiyali/ng-data-picker
angular2 angular4 data-picker datetime ng-data-picker ng2 picker typescript
Last synced: about 2 months ago
JSON representation
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
- Host: GitHub
- URL: https://github.com/hiyali/ng-data-picker
- Owner: hiyali
- License: mit
- Created: 2017-10-24T03:08:52.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T05:54:57.000Z (over 4 years ago)
- Last Synced: 2024-11-15T08:59:23.804Z (2 months ago)
- Topics: angular2, angular4, data-picker, datetime, ng-data-picker, ng2, picker, typescript
- Language: TypeScript
- Homepage:
- Size: 428 KB
- Stars: 24
- Watchers: 3
- Forks: 14
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**No time for maintenance** - welcome to send a useful PR :)
# ng-data-picker [](https://npmjs.com/package/ng-data-picker)
🏄🏾 A Data Picker for Angular 4+
[](https://npmjs.com/package/ng-data-picker)
[](https://travis-ci.org/hiyali/ng-data-picker)
[](https://npmjs.org/package/ng-data-picker)
[](https://circleci.com/gh/hiyali/ng-data-picker/tree/master)
[](https://npmjs.org/package/ng-data-picker)
> Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...
## Examples
> See branch [gh-pages](https://github.com/hiyali/ng-data-picker/tree/gh-pages) for all code of extant examples and environment.
| Demo | Level | Code |
| :-------- | :--------- | :-------- |
| [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) |
| [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) |
| [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) |
## Take a look
⚠️ Below gif is a temporary used from [vue version](https://github.com/hiyali/vue-smooth-picker) of this picker. will be updated soon.
## Install
```shell
yarn add ng-data-picker
```
or
```shell
npm i -S ng-data-picker
```
## Usage
### Quick look
#### app.module.ts
```typescript
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { DataPickerComponent } from 'ng-data-picker'
@NgModule({
...
declarations: [
DataPickerComponent
],
schemas: [
NO_ERRORS_SCHEMA // for third party component
],
...
})
```
#### app.component.ts
```typescript
export class AppComponent {
data = [
{
list: ['sun', 'earth', 'moon']
}
]
change ({ gIndex, iIndex }) {
console.log(gIndex, iIndex)
}
}
```
#### app.component.html
```html
```
## ⚙️ Props
| name | type | default | explain |
| :------------------------- | :--------- | :------------ | :------------------------------- |
| `change` | `Function` | ({gIndex,iIndex})=>{} | Callback after which group's current index changed, pass two arguments, group index `gIndex` and item index `iIndex` |
| `data` | `Array` | [] | Picker initial data |
| `data[i].currentIndex` | `Number` | 0 | Current index of this group's list |
| `data[i].weight` | `Number` | 1 | Group weights in parent width `1..12` |
| `data[i].list` | `Array` | - | List of the group |
| `data[i].list[j]` | `String` or `Object` | - | Item in the list of group, use `value` key when it is a object item |
| `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 |
| `data[i].textAlign` | `String` | - | `start` `center` `end` `justify` `left` `right` `nowrap` `wrap` |
| `data[i].className` | `String` | - | Your custom class name for this group |
| `data[i].divider` | `Boolean` | false | If it is true, then `onClick` `list` `currentIndex` will not be used |
| `data[i].text` | `String` | - | Just use this text when `divider` is true |
## 🔨 Instance methods
| name | type | explain |
| :------------------------- | :--------- | :------------------------------- |
| `setGroupData` | `Function` (gIndex,gData)=>void | Dynamically set a group data with two arguments `(gIndex, gData)`, group index and group data (see props `data[i]`) |
| `getCurrentIndexList` | `Function` ()=>[] | Return a `Array` of the groups current index list (has divider current index, and it is default to `0`) |
| `getGroupsRectList` | `Function` ()=>void | Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |
## Development
```shell
npm start # development
npm run build:prod # build for production
npm run prepare # build for third party
```
## Any problem?
> Please let me know.
* [Open a new issue for this repo](https://github.com/hiyali/ng-data-picker/issues)
* [Send a Email to: [email protected]](mailto:[email protected])
## Is it useful?
🌚 Donate [A github star ⍟](https://github.com/hiyali/ng-data-picker)
## License
MIT