About

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.

Optimised Datetime Picker for Ionic

An easy to use and beautiful ionic date & time picker with calendar and clock component for single dates and date ranges. Dark mode supported.

Versions

| Datetime Picker-Version | Angular-Version | |---|---| | <=0.2.9 | Angular 8 | | >=0.3.0 | Angular 12 |

Live Demo

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

Install

Dependencies:

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

The picker:

npm i moots-datetime-picker

Note about time zones

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.

Modal

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') {
      this.startDate = DateTime.fromMillis(event.data.from, { zone: 'Etc/UTC' });
      this.endDate = DateTime.fromMillis(event.data.to, { zone: 'Etc/UTC' });
    }
    console.log(this.startDate);
    console.log(this.endDate);
    console.log('role', role);
  }
}

Component

Coming soon!

Development Notes

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
• go into the dist folder and run npm publish to pubish it to npmjs