idp

ion2-datetime-picker

Multi Item Picker - An Ionic Custom Component

Showing:

Popularity

Downloads/wk

6

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

1

Size (min+gzip)

78.2KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Ion2-datetime-picker

Dependency Status devDependencies Status npm version npm download Coverage Status

Ion2 Datetime Picker--An Ionic 2+ Custom Datetime Picker Component based on ion-multi-picker by raychenfj

Simulate IOS date and time column pickers by ionic2 picker. Default Ionic DateTime Component work with only independent columns that has some validation problems. Also there is min and max issue with time validation. This one helps to solve these problems.

Github: https://github.com/byzg/ion2-datetime-picker

NPM: https://www.npmjs.com/package/ion2-datetime-picker

Depenencies

moment ^2.19.4

Demo

Code of this example here

Demo

Installation

NPM:

npm install ion2-datetime-picker --save

Yarn:

yarn add ion2-datetime-picker

Usage

1.Import MultiPickerModule to your app/module.

import { MultiPickerModule } from 'ion2-datetime-picker';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    MultiPickerModule //Import MultiPickerModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  providers: []
})
export class AppModule {}

2.Add ion-multi-picker to your html template.

    <ion-item>
        <ion-label>Simple TimePicker</ion-label>
        <ion-multi-picker item-content></ion-multi-picker>
    </ion-item>

Note: Don't miss the item-content attribute

Like other ionic components, you can use [formControl] to bind your data.

import { FormBuilder, FormGroup } from '@angular/forms';
...
constructor() {
  this.formGroup = new FormBuilder().group({
    time: [moment().format()]
  });
}
    <ion-item>
        <ion-label>Default Value</ion-label>
        <ion-multi-picker item-content [formControl]="formGroup.controls.time"></ion-multi-picker>
    </ion-item>

Set type to date to use datepicker.

    <ion-item>
        <ion-label>Disabled Picker</ion-label>
        <ion-multi-picker item-content type="date" [formControl]="formGroup.controls.date"></ion-multi-picker>
    </ion-item>

Attributes

AttributeDescriptionData typeValuesPicker typeDefault
item-contentRequired, add this attribute so that this custom component can be display correctly under ion-item tag--all-
typeSets waht to use: date- or timepickerStringdate or time-time
displayFormatFormat of picked dataStringmoment formatsallDD.MM.YYYY HH:mm
pickerFormatFormat of picking data. Note: now supports only monthsStringmoment formatsdatedisplayFormat
minValidation minimum attributeISO 8601 String or moment.MomenttimeBeginning of the year, which precedes the current 2 years
maxValidation maximum attributeISO 8601 String or moment.MomenttimeEnd of the year that follows the current 2 years
minuteRoundingMinutes will be equal this one or aliquotString or Number60 must be divisible by thistime1
cancelTextText of picker cancel buttonStringallCancel
doneTextText of picker done buttonStringallDone
weekendsNumbers of days of week that should be disabled on datepicker. Note: Monday is the first day and Sunday is a seventh dayString or Array of stringE.g.: ['6', '7']date[]
filterDaysFunction like (days, month, year)=> that should return array of day numbers that should NOT be disabled in given month and yearFunctionE.g.: (days, month, year)=> daysdateLodash identity
dateContextBy default if initail model value is given then date of min and max setups to date of this model value. But if initail model value is given is not given then date of min and max setups to current date. Set dateContext attribute to change itISO 8601 String or moment.Momenttime

Exceptions

If for some reason, all the possible values of the column are non-valid, this exception is raised:

  • Ion2 datetime picker: column "<column.name> " should have at least one option -

Utils

You can use some utils methods:

import { MultiPickerUtils } from 'ion2-datetime-picker';

let variable = MultiPickerUtils.minuteRound('2016-12-10T11:32:44+03:00', 15);
  • minuteRound(val: string|moment.Moment, rounding: number): moment.Moment

    Returns nearest from below moment for val with minutes that multiple for rounding

Contribution

Welcome issue report, PR and contributors. Help me improve it.

Fork and git clone this project, most code for the multi picker is under src/app/components/multi-picker.

The unit test framework is karma + webpack + jasmine. And e2e test is protractor.

Add your unit test and use npm test to start karma.

Debug your unit test using npm run test-watch and open http://localhost:9876/debug.html

Add your e2e test, run ionic serve and then in another terminal use npm run e2e to run protractor.

You can also add your use case in the app/pages.

Finally, send me a PULL REQUEST.

Changelog

Releases

Build

gulp default npm publish

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial