OranegAnalytics has developed several Web and Mobile applications, covering a wide range of categories and levels of importance including service management, online order and delivery, project and team management, and training/education. 

One of our recent systems is a comprehensive online food order, restaurant management and booking. In this system, providing user-friendly and responsive forms and views that allow quick and easy access and interactions is critical. In addition, in this system Calendar and Date/Time selection components are very important.

From the start when we were designing and planning this system, we were very concerned about the lack of a comprehensive, flexible and modern Date/Time library. We needed advanced functions for dealing with multiple time zones and complex date/time calculations, also modern, responsive and user-friendly UI and design. We checked multiple available libraries and components, but each of them lacks one or more of our critical requirements.

Recently, we decided to try the components from Mobiscroll. During the past months, we tried some of the Mobilscroll components, including Date/Time pickers, Form components (such as Switch, and Radio Buttons), and Pickers and Dropdowns. So far, the experience has been very good and we could add the components and use them in our system in a short time. Last week, we had a test release of our system for a group of the users, and we have received positive feedback from them too.

Mobiscroll components can be used with different frameworks (e.g. Angular, Ionic and jQuery) and the design and experience is consistent. We use Angular framework (version 11) for building the front-end of the system and the interactive web/mobile UI. There are several examples of using the Mobiscroll components (for each framework) on their website. For our use case, we found that the examples are well documented with Angular integration, so there was a small learning curve for adding and using the components with less hassle to customise the usage and parameters.

In this article, I will explain the process of installing the Mobiscroll library, and adding and using the Time Picker (to the food order Pickup/Deliver view) and Stepper (to the Order Cart view) components in our system.

Installtion

For installation, we followed the instruction on the Mobiscroll website. Below is the commands we used and some screenshots:

npm install -g @mobiscroll/cli
mobiscroll config angular

Then, we needed to log in with our Mobiscroll account:

And then:

The following line added to the "package.json” file:

 "@mobiscroll/angular”: "^4.10.8”

We had an issue with the installation. There were some comments in the "angular.json” file that caused the mobiscroll installation to stop, so we had to remove those comments first to continue with the installation:

Installing packages via yarn... 
> yarn add @mobiscroll/angular@4.10.8 --save 
Mobiscroll for angular installed. 
Configuring Angular app... 
  Adding module loading scripts to app.module.ts 
  Adding stylesheet to angular.json 
Could not install Mobiscroll. 
SyntaxError: ****************************************************************\angular.json: Unexpected token / in JSON at position 1248 
If the problem persists get in touch at support@mobiscroll.com

Implementation

Time Picker

The following code shows hoe we used the Time picker component:

HTML file:

<div class="form-group row">
    <div class="col-sm-12">
        <div class="input-group">
            <label for="preorderDate">{{"OrderSelectPreOrderTime" | localize}}</label>
            <mbsc-datetime [options]="compactSettings" #preorderDateTime="mobiscroll"></mbsc-datetime>
        </div>
    </div>
</div>

TS file:

...
import { mobiscroll, MbscDatetimeOptions } from '@mobiscroll/angular';
...
export class LocationServiceTimesModalComponent extends AppComponentBase {
...
compactSettings: MbscDatetimeOptions = {
        dateWheels: '|D d M|',
        theme: 'ios',
        themeVariant: 'light',
        display: 'inline',
        returnFormat: 'moment',
        steps: {
            minute: 10,
            zeroBased: true
        },
        touchUi: true,
        onChange: (event, inst) => {
            this.onPreorderDateChange(event, inst);
        }
    };
...

We needed to specify the valid and invalid Time slots. This was a requirement that Mobiscroll Time picker could handle nicely. I have included a part of the could to show how we implemented it:

setPreOrderValidTimeSlots() {
        let invalidTimesObj = new Array<any>();
        let validTimesObj = new Array<any>();
...
        //Calculate and set Invalid Time Slots
...
        //Calculate and set Valid Time Slots
...
        mobiscroll.settings.invalid = invalidTimesObj;
        mobiscroll.settings.valid = validTimesObj;
    }
...

The following screenshot shows the result:

Stepper

For the stepper, we used as the following:

...
addremoveItem(event): void { 
        this.cartItem.qty = event.target.value; 
        this.totalNumberOfItems = event.target.value; 
        this.calculateTotalPrice(this.itemPrice, this.totalNumberOfItems); 
    }
...

And the screenshots, before adding the Mobiscroll Stepper:

And after adding and using the Mobiscroll Stepper: