TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published


    Dependency Status devDependencies Status npm version npm download

    Ion2 Datetime Picker--An Ionic2 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.

    Note: MomentJS requred for using some features of the package




    Code of this example here



    npm install ion2-datetime-picker --save


    1.Import MultiPickerModule to your app/module.

    import { MultiPickerModule } from 'ion2-datetime-picker';
      declarations: [
      imports: [
        MultiPickerModule //Import MultiPickerModule
      bootstrap: [IonicApp],
      entryComponents: [
      providers: []
    export class AppModule {}

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

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

    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-label>Default Value</ion-label>
            <ion-multi-picker item-content [formControl]="formGroup.controls.time"></ion-multi-picker>

    Set type to date to use datepicker.

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


    Attribute Description Data type Values Picker type Default
    item-content Required, add this attribute so that this custom component can be display correctly under ion-item tag - - all -
    type Sets waht to use: date- or timepicker String date or time - time
    displayFormat Format of picked data String moment formats all DD.MM.YYYY HH:mm
    pickerFormat Format of picking data. Note: now supports only months String moment formats date displayFormat
    min Validation minimum attribute ISO 8601 String or moment.Moment time Beginning of the year, which precedes the current 2 years
    max Validation maximum attribute ISO 8601 String or moment.Moment time End of the year that follows the current 2 years
    minuteRounding Minutes will be equal this one or aliquot String or Number 60 must be divisible by this time 1
    cancelText Text of picker cancel button String all Cancel
    doneText Text of picker done button String all Done
    weekends Numbers of days of week that should be disabled on datepicker. Note: Monday is the first day and Sunday is a seventh day String or Array of string E.g.: ['6', '7'] date []
    filterDays Function like (days, month, year)=> that should return array of day numbers that should NOT be disabled in given month and year Function E.g.: (days, month, year)=> days date Lodash identity
    dateContext By 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 it ISO 8601 String or moment.Moment time


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

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


    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


    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.


    gulp default npm publish




    npm i ion2-datetime-picker

    DownloadsWeekly Downloads






    Last publish


    • byzg