The most intuitive and beautiful date & time picker for ionic. Moots datetime picker allows you to set single dates or date ranges in an easy and intuitive way. It features a calendar and clock picker with support for 12 and 24 hour mode. Choose your desired date with the help of our beautiful and easy-to-use interface. Dark mode supported.

Please find a live demo on Stackblitz

Notes:

• Certain features might not work properly on stackblitz - but work in a real project
• The clock picker is optimised for touch control, thus set your view to a mobile device

Dependencies:

npm i luxon @angular/cdk @angular/flex-layout @angular/animations

The picker:

npm i moots-datetime-picker

The picker is time zone agnostic. All input is expected to be in UTC, all calculations are done without regard to user time zone and locale, and all output is in UTC. When you select a certain date and time on the picker, you will get that displayed date and time in UTC format. Any locale specific transformations must happen outside of the picker.

Import the MootsPickerModule and dependencies in your AppModule:

@NgModule({
  ...
  imports: [
    IonicModule.forRoot(MyApp),
    FlexLayoutModule,
    BrowserAnimationsModule,
    MootsPickerModule
  ],
  ...
})
export class AppModule {}

Please find below an example as a quick start guide to get the picker running.

export class DemoModalBasicComponent {
    date = new DateTime();
    dateRange = {
        from: this.date.valueOf(),
        to: this.date.valueOf()
    };

    myCalendar;

  constructor(public modalCtrl: ModalController) {}

  async openCalendar() {
    const options: PickerModalOptions = {
        pickMode: PickMode.RANGE,
        title: 'RANGE',
        defaultDateRange: this.dateRange,
        weekStart: 1,
        step: 4,
        locale: 'de'
    };

    this.myCalendar = await this.modalCtrl.create({
        component: PickerModal,
        componentProps: { options }
    });

    this.myCalendar.present();

    const event: any = await this.myCalendar.onDidDismiss();
    const { data: date, role } = event;

    if (role === 'done') {
      const startDate = DateTime.fromMillis(event.data.from, { zone: 'Etc/UTC' });
      const endDate = DateTime.fromMillis(event.data.to, { zone: 'Etc/UTC' });
      console.log(startDate);
      console.log(endDate);
    }

    console.log('role', role);
  }
}

Coming soon!

To release a new version, commit all your changes and run:

• npm version patch to increment the version
• npm run packagr to build the library package
• npm publish dist to pubish it to npmjs

moots technology is an Adelaide, South Australia based consultancy and software development company with a huge expertise in usage requirements analysis and cloud architecture frameworks for creating modern software solutions. Hereby we prioritise high usability and amazing UX over adding further features.