Skip to content
πŸ„πŸΌ A data picker based on Angular 4+ (like native datetime picker of iOS)
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit cafae3c Mar 9, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e πŸŽ‰ The [ng-data-picker] borned Oct 24, 2017
src Update data-picker.component.ts Jan 25, 2018
.angular-cli.json πŸŽ‰ The [ng-data-picker] borned Oct 24, 2017
.editorconfig πŸŽ‰ The [ng-data-picker] borned Oct 24, 2017
.gitignore Can use now Nov 13, 2017
LICENSE Added license Nov 14, 2017 Fix typo Dec 2, 2017
karma.conf.js πŸŽ‰ The [ng-data-picker] borned Oct 24, 2017
package.json Version up to 0.1.5 Mar 9, 2018
protractor.conf.js πŸŽ‰ The [ng-data-picker] borned Oct 24, 2017
tsconfig.json Can use now Nov 13, 2017
tslint.json Update readme & added yarn.lock & optimize callback function Nov 14, 2017
yarn.lock Update readme & added yarn.lock & optimize callback function Nov 14, 2017

ng-data-picker Version Badge

πŸ„πŸΎ A Data Picker for Angular 4+

npm package travis build NPM downloads gzip size CircleCI

NPM Description

Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...


See branch gh-pages for all code of extant examples and environment.

Demo Level Code
gender β˜… gender.component.ts
product β˜…β˜… product.component.ts
date-time β˜…β˜…β˜… date-time.component.ts

Take a look

Screen shot

⚠️ Below gif is a temporary used from vue version of this picker. will be updated soon.

Screen record


yarn add ng-data-picker


npm i -S ng-data-picker


Quick look


import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { DataPickerComponent } from 'ng-data-picker'

  declarations: [
  schemas: [
    NO_ERRORS_SCHEMA // for third party component


export class AppComponent {
  data = [
      list: ['sun', 'earth', 'moon']

  change ({ gIndex, iIndex }) {
    console.log(gIndex, iIndex)


<ng-data-picker [data]="data" (change)="change($event)"></ng-data-picker>

βš™οΈ 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


npm start # development
npm run build:prod # build for production
npm run prepare # build for third party

Any problem?

Please let me know.

Is it useful?

🌚 Donate A github star ⍟



You can’t perform that action at this time.