Range for Angular and Ionic 2/3/4

Learn more

A goto solution for picking date and time ranges. Date-only, time-only or mixed date & time modes are supported. You can use it with one or two inputs for start and end range.
Can be used on mobiscroll form elements or on any input or field.

Shipping with useful features for a great UX, including:

  • Usage on mobile and desktop with responsive features
  • Date, time or date & time ranges
  • Calendar view or scroller controls
  • Usage on mobile and desktop with responsive features
  • Validation with disabled dates, min & max for restricting selection
  • Marked, colored days and day labels
  • Variable week view
  • Multiple month view
  • Week counter
  • Fullscreen, modal, popup and inline display support
  • RTL Support
  • Full localization


Interested in date and/or time selection? Other demos that could be useful:

Calendar Date & Time Event Calendar


Date & Time Range demos available for other frameworks.

Viewing demos & code for

light
dark

Change the theme setting here

Range - Date range

Change demo
Date range
Angular Date range picker demo with start-end fields and usage with a single input. Use it for responsive mobile & desktop. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const week = [now, new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6, 23, 59)];

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    range: Array < Date > ;
    date: Array < Date > ;
    nonForm: Array < Date > ;
    external = week;

    dateSettings: MbscRangeOptions = {
        controls: ['date']
    };

    nonFormSettings: MbscRangeOptions = {
        showSelector: false
    };

    externalSettings: MbscRangeOptions = {
        showOnTap: false,
        showOnFocus: false,
        showSelector: false
    };
}
<mbsc-form>
    <div class="mbsc-align-center">
        <div class="mbsc-note mbsc-note-primary">The range can be used inside a mobiscroll form or on any input.</div>
    </div>
    <mbsc-form-group>
        <mbsc-form-group-title>Two inputs inside Mobiscroll Form</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="range">
            <mbsc-range-start placeholder="Please Select...">From</mbsc-range-start>
            <mbsc-range-end placeholder="Please Select...">Until</mbsc-range-end>
        </mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Date scroller</mbsc-form-group-title>
        <mbsc-range [options]="dateSettings" [(ngModel)]="date">
            <mbsc-range-start placeholder="Please Select...">From</mbsc-range-start>
            <mbsc-range-end placeholder="Please Select...">Until</mbsc-range-end>
        </mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        <p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
    </mbsc-form-group>
</mbsc-form>
<div class="demo-container">
    <label for="demo-non-form">Range</label>
    <input id="demo-non-form" [(ngModel)]="nonForm" mbsc-range class="demo-non-form" [mbsc-options]="nonFormSettings" placeholder="Please Select..." />
    <label for="demo-external">External button</label>
    <div class="external-container">
        <input id="demo-external" [(ngModel)]="external" mbsc-range class="demo-non-form" [mbsc-options]="externalSettings" #externalRange="mobiscroll" />
        <button (click)="externalRange.instance.show()" class="external-button">Show</button>
    </div>
</div>
.demo-non-form {
    color: initial;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.demo-container {
    padding: 0 1em;
}

.external-container {
    display: flex;
}

.external-container button.external-button {
    font-weight: 400;
    padding: 10px;
    margin: 6px 0 12px 16px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Time range

Change demo
Time range
Angular Time range picker demo with from/until fields or usage in a single input. Scroller interface with validation/options. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const twoHours = [now, new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes() + 120)];

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    range: Array < Date > ;
    nonForm: Array < Date > ;
    external = twoHours;

    rangeSettings: MbscRangeOptions = {
        startInput: '#startTime',
        endInput: '#endTime',
        controls: ['time']
    };

    nonFormSettings: MbscRangeOptions = {
        controls: ['time']
    };

    externalSettings: MbscRangeOptions = {
        controls: ['time'],
        showOnTap: false,
        showOnFocus: false
    };
}
<mbsc-form>
    <div class="mbsc-align-center">
        <div class="mbsc-note mbsc-note-primary">The range can be used inside a mobiscroll form or on any input.</div>
    </div>
    <mbsc-form-group>
        <mbsc-form-group-title>Two inputs inside Mobiscroll Form</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="range" [options]="rangeSettings">
            <mbsc-range-start placeholder="Please Select...">From</mbsc-range-start>
            <mbsc-range-end placeholder="Please Select...">Until</mbsc-range-end>
        </mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        <p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
    </mbsc-form-group>
</mbsc-form>
<div class="demo-container">
    <label for="demo-non-form">Range</label>
    <input id="demo-non-form" [(ngModel)]="nonForm" mbsc-range class="demo-non-form" [mbsc-options]="nonFormSettings" placeholder="Please Select..." />
    <label for="demo-external">External button</label>
    <div class="external-container">
        <input id="demo-external" [(ngModel)]="external" mbsc-range class="demo-non-form" [mbsc-options]="externalSettings" #externalRange="mobiscroll" />
        <button (click)="externalRange.instance.show()" class="external-button">Show</button>
    </div>
</div>
.demo-non-form {
    color: initial;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.demo-container {
    padding: 0 1em;
}

.external-container {
    display: flex;
}

.external-container button.external-button {
    font-weight: 400;
    padding: 10px;
    margin: 6px 0 12px 16px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Date and time range

Change demo
Date and time range
Angular Datetime range picker with start-end fields. Calendar or scroller UI for desktop and mobile usage. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const week = [now, new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6, 23, 59)];

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    demo = week;
    range = week;

    demoSettings: MbscRangeOptions = {
        controls: ['calendar', 'time']
    };

    rangeSettings: MbscRangeOptions = {
        controls: ['date', 'time'],
        dateWheels: '|D M d|',
        cssClass: 'scroller-range'
    };
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Calendar</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="demo" [options]="demoSettings">
            <mbsc-range-start>From</mbsc-range-start>
            <mbsc-range-end>Until</mbsc-range-end>
        </mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Scroller</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="range" [options]="rangeSettings">
            <mbsc-range-start>Range start</mbsc-range-start>
            <mbsc-range-end>Range end</mbsc-range-end>
        </mbsc-range>
    </mbsc-form-group>
</mbsc-form>
.demo-display-inline input,
.demo-display-inline label,
.demo-display-inline br,
.scroller-range .mbsc-cal-tabs {
    display: none;
}

/* Temporary fix */

.mbsc-cal-tabbed .mbsc-sc-whl-gr-c {
    width: auto;
    right: 0;
}

.mbsc-cal-tabbed .mbsc-sc-whl-gr {
    width: auto;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Min and Max

Change demo
Min and Max
Angular Date range picker with min and max settings for past, future and current ranges. Control the min and max length. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';
import moment from 'moment';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const yesterday = new Date(new Date().setDate(new Date().getDate() - 1));
const tomorrow = new Date(new Date().setDate(new Date().getDate() + 1));
const nextMonths = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
const day = 24 * 60 * 60 * 1000;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    past: Array < Date > ;
    future: Array < Date > ;
    next: Array < Date > ;
    min: Array < Date > ;
    max: Array < Date > ;
    minmax: Array < Date > ;
    dateStr: Array < string > ;
    moment: Array < Date > ;

    demoSettings: MbscRangeOptions = {
        max: yesterday
    };
    futureSettings: MbscRangeOptions = {
        min: tomorrow
    };
    nextSettings: MbscRangeOptions = {
        max: nextMonths,
        min: tomorrow
    };
    timeSettings: MbscRangeOptions = {
        controls: ['time'],
        min: '08:00',
        max: '18:59'
    };
    minSettings: MbscRangeOptions = {
        minRange: 5 * day
    };
    maxSettings: MbscRangeOptions = {
        maxRange: 10 * day
    };
    minmaxSettings: MbscRangeOptions = {
        minRange: 5 * day,
        maxRange: 10 * day
    };
    dateStrSettings: MbscRangeOptions = {
        max: '2018-08-31T00:00',
        min: '08/01/2018'
    };
    momentSettings: MbscRangeOptions = {
        max: moment([2018, 8, 30]),
        min: moment([2018, 8, 1])
    };
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Pick a range</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="past" [options]="demoSettings" placeholder="Please select...">Past range</mbsc-range>
        <mbsc-range [(ngModel)]="future" [options]="futureSettings" placeholder="Please select...">Future range</mbsc-range>
        <mbsc-range [(ngModel)]="next" [options]="nextSettings" placeholder="Please select...">Next 6 months</mbsc-range>
        <mbsc-range [(ngModel)]="time" [options]="timeSettings" placeholder="Please select...">Time range</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Specify range length</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="min" [options]="minSettings" placeholder="Please select...">Min 5 days</mbsc-range>
        <mbsc-range [(ngModel)]="max" [options]="maxSettings" placeholder="Please select...">Max 10 days</mbsc-range>
        <mbsc-range [(ngModel)]="minmax" [options]="minmaxSettings" placeholder="Please select...">5-10 days</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Specify date formats</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="dateStr" [options]="dateStrSettings" placeholder="Please select...">String</mbsc-range>
        <mbsc-range [(ngModel)]="moment" [options]="momentSettings" placeholder="Please select...">Moment JS</mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Invalid days

Change demo
Invalid days
Angular Date range picker with disabled dates, ranges, weekdays and custom times for calendar and scroller control. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';
import moment from 'moment';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    demo: Array < Date > ;
    week: Array < Date > ;
    daterange: Array < Date > ;
    scroller: Array < Date > ;
    time: Array < Date > ;
    timerange: Array < Date > ;
    dateVal: Array < Date > ;
    timeVal: Array < Date > ;
    dateStr: Array < string > ;
    moment: Array < Date > ;

    demoSettings: MbscRangeOptions = {
        invalid: [
            new Date(2018, 1, 3),
            new Date(2018, 1, 11),
            new Date(2018, 1, 12)
        ],
        defaultValue: [new Date(2018, 1, 17), new Date(2018, 1, 23)]
    };

    weekSettings: MbscRangeOptions = {
        invalid: [
            'w0',
            'w6'
        ]
    };

    daterangeSettings: MbscRangeOptions = {
        invalid: [
            { start: new Date(2018, 1, 3), end: new Date(2018, 1, 9) },
            { start: new Date(2018, 1, 24), end: new Date(2018, 2, 2) }
        ],
        defaultValue: [new Date(2018, 1, 17), new Date(2018, 1, 23)]
    };

    scrollerSettings: MbscRangeOptions = {
        invalid: [
            'w0',
            'w6'
        ],
        controls: ['date'],
        defaultValue: [new Date(2018, 1, 17), new Date(2018, 1, 23)]
    };

    timeSettings: MbscRangeOptions = {
        controls: ['time'],
        steps: {
            minute: 30
        },
        invalid: [
            { d: new Date(), start: '10:00', end: '10:00' },
            { d: new Date(), start: '10:30', end: '10:30' },
            { d: new Date(), start: '11:00', end: '11:00' },
            { d: new Date(), start: '12:30', end: '12:30' }
        ]
    };

    timerangeSettings: MbscRangeOptions = {
        controls: ['time'],
        invalid: [
            { start: '07:00', end: '09:00' },
            { start: '13:00', end: '15:00' }
        ]
    };

    dateValSettings: MbscRangeOptions = {
        defaultValue: [new Date(2018, 11, 13), new Date(2018, 11, 19)],
        invalid: [
            { start: new Date(2018, 11, 20), end: new Date(2018, 11, 31) }
        ],
        valid: [
            { start: new Date(2018, 11, 24), end: new Date(2018, 11, 26) }
        ]
    };

timeValSettings: MbscRangeOptions = {
controls: ['time'],
defaultValue: [new Date(new Date().setHours(12, 30, 0, 0)), new Date(new Date().setHours(12, 59, 0, 0))],
invalid: [
    { start: '13:00', end: '20:00' }
],
valid: [
    { start: '17:00', end: '17:30' },
    { start: '18:00', end: '18:30' }
]
};

dateStrSettings: MbscRangeOptions = {
    defaultValue: ['2018-07-15T00:00', '2018-07-15T00:00'],
    invalid: [
        '2018-07-08T00:00',
        '2018-07-10T00:00',
        '07/19/2018',
        '07/23/2018'
    ]
};

momentSettings: MbscRangeOptions = {
    defaultValue: [moment([2018, 8, 24]), moment([2018, 8, 24])],
    invalid: [
        moment([2018, 8, 11]),
        moment([2018, 8, 15])
    ]
};
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Invalidating Dates</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="demo" [options]="demoSettings" placeholder="Please select...">Exact dates</mbsc-range>
        <mbsc-range [(ngModel)]="week" [options]="weekSettings" placeholder="Please select...">Weekdays</mbsc-range>
        <mbsc-range [(ngModel)]="daterange" [options]="daterangeSettings" placeholder="Please select...">Ranges</mbsc-range>
        <mbsc-range [(ngModel)]="scroller" [options]="scrollerSettings" placeholder="Please select...">Scroller</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Invalidating Time</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="time" [options]="timeSettings" placeholder="Please select...">Exact Time</mbsc-range>
        <mbsc-range [(ngModel)]="timerange" [options]="timerangeSettings" placeholder="Please select...">Range</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Overriding inside invalid ranges</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="dateVal" [options]="dateValSettings" placeholder="Please select...">Date</mbsc-range>
        <mbsc-range [(ngModel)]="timeVal" [options]="timeValSettings" placeholder="Please select...">Time</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Date formats</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="dateStr" [options]="dateStrSettings" placeholder="Please select...">String</mbsc-range>
        <mbsc-range [(ngModel)]="moment" [options]="momentSettings" placeholder="Please select...">Moment JS</mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Scroll direction

Change demo
Scroll direction
Angular Date range picker demo with calendar view showing off vertical and horizontal month change and scrolling direction. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    rangeVertical: Date;
    rangeHorizontal: Date;

    rangeVerticalSettings: MbscRangeOptions = {
        calendarScroll: 'vertical'
    };

    rangeHorizontalSettings: MbscRangeOptions = {
        calendarScroll: 'horizontal'
    };
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Month change direction</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rangeVertical" [options]="rangeVerticalSettings" placeholder="Please Select...">Vertical</mbsc-range>
        <mbsc-range [(ngModel)]="rangeHorizontal" [options]="rangeHorizontalSettings" placeholder="Please Select...">Horizontal</mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - RTL Support

Change demo
RTL Support
Angular Range select right-to-left rendering demo with full RTL language support and source. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions, MbscFormOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    arabic: Array < Date > ;
    hebrew: Array < Date > ;
    farsi: Array < Date > ;
    rtl: Array < Date > ;

    arabicSettings: MbscRangeOptions = {
        lang: 'ar'
    };

    hebrewSettings: MbscRangeOptions = {
        lang: 'he'
    };

    farsiSettings: MbscRangeOptions = {
        lang: 'fa'
    };

    rtlSettings: MbscRangeOptions = {
        rtl: true
    };

    formSettings: MbscFormOptions = {
        rtl: true
    };
}
<mbsc-form [options]="formSettings">
    <mbsc-form-group>
        <mbsc-form-group-title>RTL enabled by default</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="arabic" [options]="arabicSettings" placeholder="Please Select...">Arabic</mbsc-range>
        <mbsc-range [(ngModel)]="hebrew" [options]="hebrewSettings" placeholder="Please Select...">Hebrew</mbsc-range>
        <mbsc-range [(ngModel)]="farsi" [options]="farsiSettings" placeholder="Please Select...">Farsi</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Manually set RTL</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rtl" [options]="rtlSettings" placeholder="Please Select...">RTL</mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Presets

Change demo
Presets
Angular Filtering demo with predefined range sets and custom date range selection in calendar control. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const curr = new Date();
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    range = [startWeek, endWeek];

    rangeSettings: MbscRangeOptions = {
        display: 'inline',
        layout: 'liquid',
        fromText: '',
        toText: '',
        showSelector: false
    };

    today() {
        this.range = [now, now];
        mobiscroll.toast({
            message: 'Today Selected'
        });
    }

    yesterday() {
        this.range = [yesterday, yesterday];
        mobiscroll.toast({
            message: 'Yesterday Selected'
        });
    }

    thisWeek() {
        this.range = [startWeek, endWeek];
        mobiscroll.toast({
            message: 'This Week Selected'
        });
    }

    lastMonth() {
        this.range = [startMonth, endMonth];
        mobiscroll.toast({
            message: 'Last Month Selected'
        });
    }
}
<div class="md-presets">
    <mbsc-form class="md-range-filter">
        <h4 class="md-header">Filter Results by</h4>
        <div class="mbsc-padding">
            <mbsc-button block="true" lass="md-filter-btn md-today" (click)="today()">Today (3)</mbsc-button>
            <mbsc-button block="true" class="md-filter-btn md-yesterday" (click)="yesterday()">Yesterday (8)</mbsc-button>
            <mbsc-button block="true" class="md-filter-btn md-week" (click)="thisWeek()">This Week (37)</mbsc-button>
            <mbsc-button block="true" class="md-filter-btn md-month" (click)="lastMonth()">Last Month (65)</mbsc-button>
        </div>
        <mbsc-form-group>
            <mbsc-form-group-title>Or by a custom range</mbsc-form-group-title>
            <mbsc-range [(ngModel)]="range" [options]="rangeSettings"></mbsc-range>
        </mbsc-form-group>
    </mbsc-form>
</div>
.demo-presets {
    padding: 0 !important;
}

.md-range-filter .md-header {
    text-align: center;
    padding: 1em .75em 0 .75em;
    margin: 0;
}

.md-range-filter .mbsc-form-group-title {
    padding-top: 0;
    text-align: center;
}

.md-range-filter .mbsc-ios .dw-dr {
    height: 20px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Flight booking

Change demo
Flight booking
Angular Flight booking demo featuring one-way and round-trip selection with start and end date range picker, calendar. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions, MbscSelectOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();
const oneWay = false;
let departureDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3);
let returnDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    origin = 'LTN';
    segmented = 'round';
    segmented2 = 'economy';

    selectSettings: MbscSelectOptions = {
        multiline: 2,
        height: 50,
        data: {
            url: 'https://trial.mobiscroll.com/airports/',
            remoteFilter: true,
            dataType: 'jsonp',
            processResponse: function (data) {
                const ret = [];
                if (data) {
                    for (let i = 0; i < data.length; i++) {
                        const item = data[i];
                        ret.push({
                            value: item.code,
                            text: item.name,
                            html: '<div style="font-size:16px;line-height:18px;">' + item.name +
                            '</div><div style="font-size:10px;line-height:12px;">' + item.location + ', ' + item.code + '</div>'
                        });
                    }
                }
                return ret;
            }
        },
        filter: true,
        placeholder: 'Please select'
    };

    range = [departureDate, returnDate];

    rangeSettings: MbscRangeOptions = {
        display: 'bottom',
        startInput: '.md-leaving-date',
        endInput: '.md-return-date',
        min: now,
        showSelector: false,
        onSetDate: function (event, inst) {
            if (oneWay && event.control === 'calendar' && event.active === 'start') {
                inst._isVisible = false;
                inst.setActiveDate('start');
                inst._isVisible = true;
            }
            if (inst._markup) {
                inst._isValid = true;
                inst._markup.find('.mbsc-fr-btn-s .mbsc-fr-btn').removeClass('mbsc-fr-btn-d' + (oneWay ? ' mbsc-disabled' : ''));
            }
        },
        onBeforeClose: function () {
            if (oneWay) {
                return true;
            }
        },
        onSet: function (event, inst) {
            const values = inst.getVal();
            departureDate = values[0];
            if (!oneWay) {
                returnDate = values[1];
            }
        }
    };
}
<mbsc-form class="md-flight-booking">
    <div class="md-ftype-cont">
        <mbsc-segmented-group [(ngModel)]="segmented">
            <mbsc-segmented value="round" class="md-flight-type">Round trip</mbsc-segmented>
            <mbsc-segmented value="oneway" class="md-flight-type">One way</mbsc-segmented>
        </mbsc-segmented-group>
    </div>
    <label>
        Origin
        <select class="md-place-select md-origin" [(ngModel)]="origin" mbsc-select [mbsc-options]="selectSettings">
            <option value="LTN">London Luton</option>
        </select>
    </label>
    <label>
        Destination
        <select class="md-place-select md-destination" [(ngModel)]="destination" mbsc-select [mbsc-options]="selectSettings">
            <option>Please select a city</option>
        </select>
    </label>

    <div>
        <label>
            Leaving
            <input type="text" class="md-leaving-date" />
        </label>

        <label>
            Returning
            <input type="text" class="md-return-date" [disabled]="segmented == 'oneway'"/>
        </label>
        <div [(ngModel)]="range" mbsc-range [mbsc-options]="rangeSettings"></div>
    </div>

    <mbsc-stepper [(ngModel)]="adults" min="1" max="15" val="left">Adults
        <span class="mbsc-desc">From 14 years</span>
    </mbsc-stepper>
    <mbsc-stepper [(ngModel)]="children" max="15" val="left">Children
        <span class="mbsc-desc">2-14 years</span>
    </mbsc-stepper>
    <mbsc-stepper [(ngModel)]="infant" max="10" val="left">Infant
        <span class="mbsc-desc">0-2 years</span>
    </mbsc-stepper>

    <mbsc-segmented-group [(ngModel)]="segmented2">
        <mbsc-segmented value="economy" class="md-flight-type">Economy</mbsc-segmented>
        <mbsc-segmented value="comfort" class="md-flight-type">Comfort</mbsc-segmented>
        <mbsc-segmented value="business" class="md-flight-type">Business</mbsc-segmented>
    </mbsc-segmented-group>

    <div class="mbsc-padding">
        <mbsc-button block="true">Find Flights</mbsc-button>
    </div>
</mbsc-form>
/* range inputs */

.md-flight-booking .md-time-range {
    overflow: hidden;
    width: 99%;
}

.mbsc-ios .md-time-range {
    background: #fff;
}

.md-time-range .mbsc-input {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.mbsc-ios .md-time-range .mbsc-input {
    display: block;
}

.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
    font-size: 14px;
    padding-left: 1.14285em;
    padding-top: 0.75em;
    line-height: 22px;
}

.mbsc-ios .md-time-range .mbsc-input .mbsc-label {
    width: 100%;
}

.md-time-range .mbsc-input:first-child {
    padding-right: .5em;
}

.md-time-range .mbsc-input:last-child {
    padding-left: .5em;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - New event

Change demo
New event
Angular New event create screen featuring a date range picker with start and end dates for multi-day events. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    checkbox = true;
    range: Array < Date > ;
    segmented = 'busy';
    
    rangeSettings: MbscRangeOptions = {
        controls: ['date'],
        min: new Date(),
        dateFormat: 'M dd D yy'
    };
}
<mbsc-form class="md-range-event">
    <div class="md-header">
        <mbsc-button class="md-cancel-btn" flat="true">Cancel</mbsc-button>
        <div class="mbsc-header-txt">New event</div>
        <mbsc-button class="md-add-btn" flat="true">Add</mbsc-button>
    </div>
    <mbsc-input type="text" placeholder="Name of the event">Title</mbsc-input>
    <mbsc-input type="text" placeholder="Where will it be?">Location</mbsc-input>
    <mbsc-switch [(ngModel)]="checkbox">All day</mbsc-switch>
    <mbsc-range [options]="rangeSettings" [(ngModel)]="range">
        <mbsc-range-start>Starts</mbsc-range-start>
        <mbsc-range-end>Ends</mbsc-range-end>
    </mbsc-range>

    <label>
        Travel Time
        <select [(ngModel)]="myselect" mbsc-select [mbsc-options]="settings" class="md-time-select">
            <option value="none">None</option>
            <option value="5">5 minutes</option>
            <option value="30">30 minutes</option>
            <option value="60">1 hour</option>
            <option value="90">1 hour and 30 minutes</option>
            <option value="120">2 hours</option>
        </select>
    </label>
    <mbsc-segmented-group [(ngModel)]="segmented">
        <mbsc-segmented value="busy">Show as busy</mbsc-segmented>
        <mbsc-segmented value="free">Show as free</mbsc-segmented>
    </mbsc-segmented-group>
    <mbsc-textarea placeholder="Enter notes, URL, comments">Notes</mbsc-textarea>
</mbsc-form>
.demo-newevent {
    padding: 0 !important;
}

.md-range-event .md-header {
    position: relative;
    background: #4ECCC4;
    padding: 1em;
    text-align: center;
    margin-bottom: 1em;
}

.mbsc-material.md-range-event .md-header,
.md-range-event .mbsc-material .md-header {
    background: #009688;
}

.mbsc-android-holo.md-range-event .md-header,
.md-range-event .mbsc-android-holo .md-header {
    background: #31c6e7;
}

.mbsc-ios-classic.md-range-event .md-header,
.mbsc-ios.md-range-event .md-header,
.md-range-event .mbsc-ios .md-header {
    background: #1272dc;
    margin: 0;
    z-index: 1;
}

.mbsc-ios-dark.md-range-event .md-header,
.md-range-event .mbsc-ios-dark .md-header {
    background: #ff8b0f;
    margin: 0;
    color: #a1a1a1;
}

.mbsc-wp.md-range-event .md-header,
.md-range-event .mbsc-wp .md-header {
    background: #1a9fe0;
}

.md-range-event .md-header .mbsc-header-txt {
    display: inline-block;
    color: #fff;
    font-size: 18px;
}

.md-range-event .md-header .mbsc-btn-flat {
    margin: 0;
    padding: 0 .5em 0 .5em;
    height: 30px;
    color: #fff;
    text-transform: capitalize;
}

.md-range-event .md-header .md-cancel-btn,
.md-range-event .md-header .md-add-btn {
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

.md-range-event .md-header .mbsc-btn-flat.mbsc-active {
    background: rgba(255, 255, 255, 0.2);
}

.md-range-event .md-header .md-add-btn {
    right: .75em;
}

.md-range-event .md-header .md-cancel-btn {
    left: .75em;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Date types

Change demo
Date types
Angular Date range picker supporting data types: javascript date object, ISO 8601 strings and moment.js objects. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';
import moment from 'moment';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    date: Array<Date>;
    iso: Array<string>;
    locale: Array<string>;
    moment: Array<Date>;

    isoSettings: MbscRangeOptions = {
        returnFormat: 'iso8601'
    };

    localeSettings: MbscRangeOptions = {
        returnFormat: 'locale'
    };

    momentSettings: MbscRangeOptions = {
        returnFormat: 'moment',
        // need this if moment is not accessible globally
        moment: moment
    };

    setDate() {
        this.date = [new Date(1995, 11, 17, 15, 24), new Date(1995, 11, 28, 11, 45)];
    }

    setISO() {
        this.iso = ['2008-09-15T15:53:00', '2008-09-23T16:15:00']
    }

    setLocale() {
        this.locale = ['04/25/2010 8:15 AM', '05/04/2010 10:30 AM'];
    }

    setMoment() {
        // make sure that moment js is loaded
        this.moment = [moment([2018, 3, 18, 15]), moment([2018, 3, 26, 10])];
    }
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Controlling the default value</mbsc-form-group-title>
        <div class="mbsc-btn-group-block">
            <mbsc-button (click)="setDate()">Set: Sun Dec 17 1995 03:24:00 GMT</mbsc-button>
        </div>
        <div>
            <mbsc-range [(ngModel)]="date">Date object</mbsc-range>
        </div>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        Return value: {{date}}
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Working with Date strings</mbsc-form-group-title>
        <div class="mbsc-btn-group-block">
            <mbsc-button (click)="setISO()">Set: 2008-09-15T15:53:00</mbsc-button>
        </div>
        <div>
            <mbsc-range [(ngModel)]="iso" [options]="isoSettings">ISO string</mbsc-range>
        </div>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        Return value: {{iso}}
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Working with Localized Strings</mbsc-form-group-title>
        <div class="mbsc-btn-group-block">
            <mbsc-button (click)="setLocale()">Set: 04/25/2010 8:15 AM</mbsc-button>
        </div>
        <div>
            <mbsc-range [(ngModel)]="locale" [options]="localeSettings">Locale format</mbsc-range>
        </div>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        Return value: {{locale}}
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Working with Moment JS Objects</mbsc-form-group-title>
        <div class="mbsc-btn-group-block">
            <mbsc-button (click)="setMoment()">Set: 2018-04-27T12:15:00+03:00</mbsc-button>
        </div>
        <div>
            <mbsc-range [(ngModel)]="moment" [options]="momentSettings">Moment JS</mbsc-range>
        </div>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        Return value: {{ moment ? (moment[0].format() + ', ' + moment[1].format()) : '' }}
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Event handlers

Change demo
Event handlers
Angular Date range picker demo with event hooks for custom integration and functionality. With source code. For Angular 2/4/5/6/7 and Ionic 2/3/4.
Clear event log
EVENTS FIRED: 
import { Component } from '@angular/core';
import { MbscRangeOptions } from '@mobiscroll/angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    range: Array < Date > ;
    rangeSettings: MbscRangeOptions = {
        theme: '',
        lang: '',
        onInit: (event, inst) => {
            // Your custom event handler goes here
        },
        onMarkupReady: (event, inst) => {
            // Your custom event handler goes here
        },
        onBeforeShow: (event, inst) => {
            // Your custom event handler goes here
        },
        onPosition: (event, inst) => {
            // Your custom event handler goes here
        },
        onShow: (event, inst) => {
            // Your custom event handler goes here
        },
        onSet: (event, inst) => {
            // Your custom event handler goes here
        },
        onItemTap: (event, inst) => {
            // Your custom event handler goes here
        },
        onDestroy: (event, inst) => {
            // Your custom event handler goes here
        },
        onClose: (event, inst) => {
            // Your custom event handler goes here
        },
        onChange: (event, inst) => {
            // Your custom event handler goes here
        },
        onCancel: (event, inst) => {
            // Your custom event handler goes here
        },
        onBeforeClose: (event, inst) => {
            // Your custom event handler goes here
        },
        onClear: (event, inst) => {
            // Your custom event handler goes here
        },
        onDayChange: (event, inst) => {
            // Your custom event handler goes here
        },
        onPageChange: (event, inst) => {
            // Your custom event handler goes here
        },
        onPageLoaded: (event, inst) => {
            // Your custom event handler goes here
        },
        onPageLoading: (event, inst) => {
            // Your custom event handler goes here
        },
        onSetDate: (event, inst) => {
            // Your custom event handler goes here
        },
        onTabChange: (event, inst) => {
            // Your custom event handler goes here
        }
    };
}
<input [(ngModel)]="range" mbsc-range [mbsc-options]="rangeSettings"placeholder="Please select..." />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Marked, colored & labels

Change demo
Marked, colored & labels
Angular Range calendar demo with marked days, colored days and labels. Provide useful information & customize the view. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

const now = new Date();

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    markedDay: Array < Date > ;
    colorDay: Array < Date > ;
    labelDays: Array < Date > ;

    markedDays = [
        { d: '5/1', color: '#ffc400' },
        { d: '12/24', color: '#ffee00' },
        { d: '12/25', color: 'red' },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 4) },
        { d: new Date(now.getFullYear(), now.getMonth() - 2, 13) },
        { d: new Date(now.getFullYear(), now.getMonth(), 2), color: '#46c4f3' },
        { d: new Date(now.getFullYear(), now.getMonth(), 6), color: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth(), 11), color: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth(), 19), color: '#89d7c9' },
        { d: new Date(now.getFullYear(), now.getMonth(), 28), color: '#ea4986' },
        { d: new Date(now.getFullYear(), now.getMonth(), 13), color: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth(), 13), color: '#f13f77' },
        { d: new Date(now.getFullYear(), now.getMonth(), 13), color: '#89d7c9' },
        { d: new Date(now.getFullYear(), now.getMonth(), 13), color: '#8dec7d' },
        { d: new Date(now.getFullYear(), now.getMonth(), 21), color: '#ffc400' },
        { d: new Date(now.getFullYear(), now.getMonth(), 21), color: '#8dec7d' },
        { start: new Date(now.getFullYear(), now.getMonth() + 1, 15), end: new Date(now.getFullYear(), now.getMonth() + 1, 18), color: '#f4511e' }
    ];

    coloredDays = [
        { d: '12/8', background: '#9ccc65' },
        { d: '5/1', background: 'red' },
        { d: '12/24', background: "#fff568" },
        { d: '12/25', background: "#e88080" },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 4), background: '#cfd8dc' },
        { d: new Date(now.getFullYear(), now.getMonth() + 2, 24), background: '#9575cd' },
        { d: new Date(now.getFullYear(), now.getMonth() - 2, 13), background: '#d4e157' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 6), background: "#f4511e" },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 6), background: '#46c4f3' },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 22), background: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 11), background: '#46c4f3' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 29), background: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth(), 2), background: '#46c4f3' },
        { d: new Date(now.getFullYear(), now.getMonth(), 3), background: '#7e56bd' },
        { d: new Date(now.getFullYear(), now.getMonth(), 11), background: '#f13f77' },
        { d: new Date(now.getFullYear(), now.getMonth(), 19), background: '#8dec7d' },
        { d: new Date(now.getFullYear(), now.getMonth(), 28), background: '#ea4986' },
        { start: new Date(now.getFullYear(), now.getMonth() + 1, 15), end: new Date(now.getFullYear(), now.getMonth() + 1, 18), text: 'Conference', background: '#f4511e' }
    ];

    labelDays = [
        { d: '12/25', text: 'Christmas', color: "#f48fb1" },
        { d: '1/1', text: 'New year' },
        { d: '12/1', text: 'Meeting', color: '#ffc400' },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 4), text: 'Spa day', color: '#cfd8dc' },
        { d: new Date(now.getFullYear(), now.getMonth() + 2, 24), text: 'BD Party', color: '#9ccc65' },
        { d: new Date(now.getFullYear(), now.getMonth() - 2, 13), text: 'Exams', color: '#d4e157' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 6), text: 'Trip', color: "#f4511e" },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 6), color: '#46c4f3', text: 'Pizza Night' },
        { d: new Date(now.getFullYear(), now.getMonth() + 1, 22), color: '#7e56bd', text: 'Beerpong' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 11), color: '#46c4f3', text: 'Anniversary' },
        { d: new Date(now.getFullYear(), now.getMonth() - 1, 29), color: '#7e56bd', text: 'Pete BD' },
        { d: new Date(now.getFullYear(), now.getMonth(), 2), color: '#46c4f3', text: 'Ana BD' },
        { d: new Date(now.getFullYear(), now.getMonth(), 3), color: '#7e56bd', text: 'Concert' },
        { d: new Date(now.getFullYear(), now.getMonth(), 11), color: '#f13f77', text: 'Trip' },
        { d: new Date(now.getFullYear(), now.getMonth(), 19), color: '#8dec7d', text: 'Math exam' },
        { d: new Date(now.getFullYear(), now.getMonth(), 28), color: '#ea4986', text: 'Party' },
        { start: new Date(now.getFullYear(), now.getMonth() + 1, 15), end: new Date(now.getFullYear(), now.getMonth() + 1, 18), text: 'Conference', color: '#f4511e' }
    ];

    markedSettings: MbscRangeOptions = {
        display: 'inline',
        showSelector: false
    };

    colorSettings: MbscRangeOptions = {
        display: 'inline',
        showSelector: false
    };

    labelSettings: MbscRangeOptions = {
        display: 'inline',
        showSelector: false
    };

}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Marked days</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="markedDay" [options]="markedSettings" [marked]="markedDays"></mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Colored days</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="colorDay" [options]="colorSettings" [colors]="coloredDays"></mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Labels</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="labelDay" [options]="labelSettings" [labels]="labelDays"></mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Display modes

Change demo
Display modes
Angular Datetime range picker with top, bottom, popup, center, modal, bubble, full screen and inline embed display. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: '',
    theme: ''
};

const now = new Date();

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    range: Array < Date > ;
    rangeTop: Array < Date > ;
    rangeCenter: Array < Date > ;
    rangeBubble: Array < Date > ;
    rangeInline = [now, now];

    rangeSettings: MbscRangeOptions = {
        display: 'bottom'
    };

    rangeTopSettings: MbscRangeOptions = {
        display: 'top'
    };

    rangeCenterSettings: MbscRangeOptions = {
        display: 'center'
    };

    rangeBubbleSettings: MbscRangeOptions = {
        display: 'bubble'
    };

    rangeInlineSettings: MbscRangeOptions = {
        display: 'inline',
        layout: 'liquid'
    };
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Try different display modes</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="range" [options]="rangeSettings" placeholder="Please select...">Bottom</mbsc-range>
        <mbsc-range [(ngModel)]="rangeTop" [options]="rangeTopSettings" placeholder="Please select...">Top</mbsc-range>
        <mbsc-range [(ngModel)]="rangeCenter" [options]="rangeCenterSettings" placeholder="Please select...">Center</mbsc-range>
        <mbsc-range [(ngModel)]="rangeBubble" [options]="rangeBubbleSettings" placeholder="Please select...">Bubble</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group class="mbsc-padding">
        <p class="mbsc-thin">With inline display you can embed the Calendar component in almost any markup or form.</p>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Embedded range picker</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rangeInline" [options]="rangeInlineSettings"></mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Weeks

Change demo
Weeks
Angular Date range picker calendar with variable weeks. Render one, two, three weeks or go for a full month. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll } from '@mobiscroll/angular';

mobiscroll.settings = {
    theme: '',
    lang: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    now = new Date();
    rangeOneWeek = [this.now, new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate() + 2)];
    rangeTwoWeek = [this.now, new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate() + 7)];
    rangeThreeWeek = [this.now, new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate() + 11)];
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>One week view</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rangeOneWeek" display="inline" weeks="1" showSelector=""></mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Two week view</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rangeTwoWeek" display="inline" weeks="2" showSelector=""></mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Three week view</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="rangeThreeWeek" display="inline" weeks="3" showSelector=""></mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Multi month view

Change demo
Multi month view
Angular Multi-month range picker. Show one, two or three months side by side depending on screen size - fixed or dynamic. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: '',
    theme: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    twoBubbleRange: Array < Date >;
    threeBubbleRange: Array < Date >;
    fourBubbleRange: Array < Date >;
    bubbleRange: Array < Date >;
    twoRange: Array < Date >;
    threeRange: Array < Date >;
    fourRange: Array < Date >;
    range: Array < Date >;

    twoBubbleRangeSettings: MbscRangeOptions = {
        display: 'bubble',
        months: 2,
    yearChange: false
    };

    threeBubbleRangeSettings: MbscRangeOptions = {
        display: 'bubble',
        months: 3,
    yearChange: false
    };

    fourBubbleRangeSettings: MbscRangeOptions = {
        display: 'bubble',
        months: 4,
    yearChange: false
    };

    bubbleRangeSettings: MbscRangeOptions = {
        display: 'bubble',
        months: 'auto'
    };

    twoRangeSettings: MbscRangeOptions = {
        display: 'center',
        months: 2,
    yearChange: false
    };

    threeRangeSettings: MbscRangeOptions = {
        display: 'center',
        months: 3,
    yearChange: false
    };

    fourRangeSettings: MbscRangeOptions = {
        display: 'center',
        months: 4,
    yearChange: false
    };

    rangeSettings: MbscRangeOptions = {
        display: 'center',
        months: 'auto',
    yearChange: false
    };
}
<mbsc-form>
    <mbsc-form-group>
        <mbsc-form-group-title>Popover range</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="twoBubbleRange" [options]="twoBubbleRangeSettings" placeholder="Please select...">Two months</mbsc-range>
        <mbsc-range [(ngModel)]="threeBubbleRange" [options]="threeBubbleRangeSettings" placeholder="Please select...">Three months</mbsc-range>
        <mbsc-range [(ngModel)]="fourBubbleRange" [options]="fourBubbleRangeSettings" placeholder="Please select...">Four months</mbsc-range>
        <mbsc-range [(ngModel)]="bubbleRange" [options]="bubbleRangeSettings" placeholder="Please select...">Auto</mbsc-range>
    </mbsc-form-group>
    <mbsc-form-group>
        <mbsc-form-group-title>Center positioned range</mbsc-form-group-title>
        <mbsc-range [(ngModel)]="twoRange" [options]="twoRangeSettings" placeholder="Please select...">Two months</mbsc-range>
        <mbsc-range [(ngModel)]="threeRange" [options]="threeRangeSettings" placeholder="Please select...">Three months</mbsc-range>
        <mbsc-range [(ngModel)]="fourRange" [options]="fourRangeSettings" placeholder="Please select...">Four months</mbsc-range>
        <mbsc-range [(ngModel)]="range" [options]="rangeSettings" placeholder="Please select...">Auto</mbsc-range>
    </mbsc-form-group>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Calendar systems

Change demo
Calendar systems
Angular Range picker with Gregorian, Hijri and Jalali system supporting different language and culture settings. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: '',
    theme: ''
};

const now = new Date();
const week = [now, new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6, 23, 59)];

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    gregorian = week;
    jalali = week;
    hijri = week;

    gregorianSettings: MbscRangeOptions = {
        display: 'inline',
        calendarSystem: 'gregorian'
    };

    jalaliSettings: MbscRangeOptions = {
        display: 'inline',
        calendarSystem: 'jalali',
        lang: 'fa'
    };

    hijriSettings: MbscRangeOptions = {
        display: 'inline',
        calendarSystem: 'hijri',
        lang: 'ar'
    };
}
<mbsc-form>
    <div class="mbsc-grid">
        <div class="mbsc-row">
            <div class="mbsc-col-sm-12 mbsc-col-md-4">
                <mbsc-form-group>
                    <mbsc-form-group-title>Gregorian calendar</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="gregorian" [options]="gregorianSettings"></mbsc-range>
                </mbsc-form-group>
            </div>
            <div class="mbsc-col-sm-12 mbsc-col-md-4">
                <mbsc-form-group>
                    <mbsc-form-group-title>Jalali calendar</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="jalali" [options]="jalaliSettings"></mbsc-range>
                </mbsc-form-group>
            </div>
            <div class="mbsc-col-sm-12 mbsc-col-md-4">
                <mbsc-form-group>
                    <mbsc-form-group-title>Hijri calendar</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="hijri" [options]="hijriSettings"></mbsc-range>
                </mbsc-form-group>
            </div>
        </div>
    </div>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Desktop

Change demo
Desktop
Angular Date and time range picker for desktop. Use it with pointer interaction, scrollable wheels with or without buttons. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: '',
    theme: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    top: Array < Date > ;
    bottom: Array < Date > ;
    anchored: Array < Date > ;
    center: Array < Date > ;
    datetime: Array < Date > ;
    date: Array < Date > ;
    time: Array < Date > ;
    setBtn: Array < Date > ;
    setCancel: Array < Date > ;

    datetimeSettings: MbscRangeOptions = {
        touchUi: false,
        controls: ['date', 'time'],
        dateWheels: '|D M d|',
        cssClass: 'scroller-range'
    };

    dateSettings: MbscRangeOptions = {
        touchUi: false,
        controls: ['date']
    };

    timeSettings: MbscRangeOptions = {
        touchUi: false,
        controls: ['time']
    };

    setBtnSettings: MbscRangeOptions = {
        display: 'center',
        touchUi: false,
        buttons: ['set']
    };

    setCancelSettings: MbscRangeOptions = {
        display: 'center',
        touchUi: false,
        buttons: ['set', 'cancel']
    };
}
<mbsc-form>
    <div class="mbsc-grid">
        <div class="mbsc-row mbsc-justify-content-center">
            <div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>Pop-up positioning</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="top" [touchUi]="false" display="top" placeholder="Please select...">Top</mbsc-range>
                    <mbsc-range [(ngModel)]="bottom" [touchUi]="false" display="bottom" placeholder="Please select...">Bottom</mbsc-range>
                    <mbsc-range [(ngModel)]="anchored" [touchUi]="false" placeholder="Please select...">Anchored</mbsc-range>
                    <mbsc-range [(ngModel)]="center" [touchUi]="false" display="center" placeholder="Please select...">Center</mbsc-range>
                </mbsc-form-group>
            </div>
        </div>
        <div class="mbsc-row mbsc-justify-content-center">
            <div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>Scroller components</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="datetime" [options]="datetimeSettings" placeholder="Please select...">Date & Time</mbsc-range>
                    <mbsc-range [(ngModel)]="date" [options]="dateSettings" placeholder="Please select...">Date</mbsc-range>
                    <mbsc-range [(ngModel)]="time" [options]="timeSettings" placeholder="Please select...">Time</mbsc-range>
                </mbsc-form-group>
            </div>
        </div>
        <div class="mbsc-row mbsc-justify-content-center">
            <div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>With buttons</mbsc-form-group-title>
                    <mbsc-range [(ngModel)]="setBtn" [options]="setBtnSettings" placeholder="Please select...">Set button</mbsc-range>
                    <mbsc-range [(ngModel)]="setCancel" [options]="setCancelSettings" placeholder="Please select...">Set/Cancel</mbsc-range>
                </mbsc-form-group>
            </div>
        </div>
    </div>
</mbsc-form>
.scroller-range .mbsc-cal-tabs {
    display: none;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Range - Theming capabilities

Change demo
Theming capabilities
Angular Date range picker with iOS, Material, Windows look & feel. Customize colors and styling with theme builder. For Angular 2/4/5/6/7 and Ionic 2/3/4.
import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: '',
    theme: ''
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    iosDemo: Array < Date > ;
    iosDarkDemo: Array < Date > ;
    iosCustomDemo: Array < Date > ;
    materialDemo: Array < Date > ;
    materialDarkDemo: Array < Date > ;
    materialCustomDemo: Array < Date > ;
    windowsDemo: Array < Date > ;
    windowsDarkDemo: Array < Date > ;
    windowsCustomDemo: Array < Date > ;
    mobiscrollDemo: Array < Date > ;
    mobiscrollDarkDemo: Array < Date > ;
    mobiscrollCustomDemo: Array < Date > ;

    iosSettings: MbscRangeOptions = {
        theme: 'ios',
        display: 'bubble',
        touchUi: false
    };
    iosDarkSettings: MbscRangeOptions = {
        theme: 'ios-dark',
        display: 'bubble',
        touchUi: false
    };
    iosCustomSettings: MbscRangeOptions = {
        theme: 'ios-gray',
        display: 'bubble',
        touchUi: false
    };
    materialSettings: MbscRangeOptions = {
        theme: 'material',
        display: 'bubble',
        touchUi: false
    };
    materialDarkSettings: MbscRangeOptions = {
        theme: 'material-dark',
        display: 'bubble',
        touchUi: false
    };
    materialCustomSettings: MbscRangeOptions = {
        theme: 'material-indigo',
        display: 'bubble',
        touchUi: false
    };
    windowsSettings: MbscRangeOptions = {
        theme: 'windows',
        display: 'bubble',
        touchUi: false
    };
    windowsDarkSettings: MbscRangeOptions = {
        theme: 'windows-dark',
        display: 'bubble',
        touchUi: false
    };
    windowsCustomSettings: MbscRangeOptions = {
        theme: 'windows-yellow',
        display: 'bubble',
        touchUi: false
    };
    mobiscrollSettings: MbscRangeOptions = {
        theme: 'mobiscroll',
        display: 'bubble',
        touchUi: false
    };
    mobiscrollDarkSettings: MbscRangeOptions = {
        theme: 'mobiscroll-dark',
        display: 'bubble',
        touchUi: false
    };
    mobiscrollCustomSettings: MbscRangeOptions = {
        theme: 'mobiscroll-lime',
        display: 'bubble',
        touchUi: false
    };
}
<mbsc-form>
    <div class="mbsc-grid mbsc-grid-fixed">
        <div class="mbsc-row">
            <div class="mbsc-col-sm-12 mbsc-col-md-6">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>iOS Theme</mbsc-form-group-title>
                    <label>
                        Light
                        <input [(ngModel)]="iosDemo" mbsc-range [mbsc-options]="iosSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Dark
                        <input [(ngModel)]="iosDarkDemo" mbsc-range [mbsc-options]="iosDarkSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Custom
                        <input [(ngModel)]="iosCustomDemo" mbsc-range [mbsc-options]="iosCustomSettings" placeholder="Please Select..." />
                    </label>
                </mbsc-form-group>
            </div>
            <div class="mbsc-col-sm-12 mbsc-col-md-6">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>Material Theme</mbsc-form-group-title>
                    <label>
                        Light
                        <input [(ngModel)]="materialDemo" mbsc-range [mbsc-options]="materialSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Dark
                        <input [(ngModel)]="materialDarkDemo" mbsc-range [mbsc-options]="materialDarkSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Custom
                        <input [(ngModel)]="materialCustomDemo" mbsc-range [mbsc-options]="materialCustomSettings" placeholder="Please Select..." />
                    </label>
                </mbsc-form-group>
            </div>
        </div>
        <div class="mbsc-row">
            <div class="mbsc-col-sm-12 mbsc-col-md-6">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>Windows Theme</mbsc-form-group-title>
                    <label>
                        Light
                        <input [(ngModel)]="windowsDemo" mbsc-range [mbsc-options]="windowsSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Dark
                        <input [(ngModel)]="windowsDarkDemo" mbsc-range [mbsc-options]="windowsDarkSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Custom
                        <input [(ngModel)]="windowsCustomDemo" mbsc-range [mbsc-options]="windowsCustomSettings" placeholder="Please Select..." />
                    </label>
                </mbsc-form-group>
            </div>
            <div class="mbsc-col-sm-12 mbsc-col-md-6">
                <mbsc-form-group inset>
                    <mbsc-form-group-title>Mobiscroll Theme</mbsc-form-group-title>
                    <label>
                        Light
                        <input [(ngModel)]="mobiscrollDemo" mbsc-range [mbsc-options]="mobiscrollSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Dark
                        <input [(ngModel)]="mobiscrollDarkDemo" mbsc-range [mbsc-options]="mobiscrollDarkSettings" placeholder="Please Select..." />
                    </label>
                    <label>
                        Custom
                        <input [(ngModel)]="mobiscrollCustomDemo" mbsc-range [mbsc-options]="mobiscrollCustomSettings" placeholder="Please Select..." />
                    </label>
                </mbsc-form-group>
            </div>
        </div>
    </div>
</mbsc-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Component license


Purchase component licenses if you are looking for specific funcionality.

Total


All features will be included with the license.

Buy component license

Framework license


Get all 36 components, including with the Framework license.



Mobiscroll for Angular & Ionic $595


Use Javascript when building with plain and simple JS. Use jQuery when you have jQuery already included or if you are building with jQuery Mobile. Use AngularJS when building with Angular 1.x or Ionic 1. Use Angular when building with Angular 2/4/5/6/7 or Ionic 2/3/4. Use it when you are building your app or website with React.


Buy framework license
See other licensing options

Framework license


Get all 36 components, including with the Framework license.



Mobiscroll for Angular $595


  • Use it when building with plain and simple JS
  • Compatible with vanilla JS app or frameworks like Vue
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with jQuery and jQuery Mobile
  • Enjoy the familiar API if you already use jQuery
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular JS and Ionic 1
  • For web and mobile apps based on Angular 1.x
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular 2/4/5/6/7 and Ionic 2/3/4
  • Visual Studio and VS Code integration
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it when building with React JS
  • Collection of UI components for web and mobile
  • Royalty-free commercial usage
  • Technical support is included with the license
Buy framework license
See other licensing options

Framework license


Select the development framework you are using. Get all 36 components with the license.

Mobiscroll for Javascript
Mobiscroll for jQuery
Mobiscroll for React
Mobiscroll for Angular
Mobiscroll for Angular JS
  • Use it when building with plain and simple JS
  • Compatible with vanilla JS app or frameworks like Vue
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with jQuery and jQuery Mobile
  • Enjoy the familiar API if you already use jQuery
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular JS and Ionic 1
  • For web and mobile apps based on Angular 1.x
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it with Angular 2/4/5/6/7 and Ionic 2/3/4
  • Visual Studio and VS Code integration
  • Royalty-free commercial usage
  • Technical support is included with the license
  • Use it when building with React JS
  • Collection of UI components for web and mobile
  • Royalty-free commercial usage
  • Technical support is included with the license
Buy framework license
See other licensing options

Select the framework you are interested in

Javascript
jQuery
Angular
Angular JS
React

Use Javascript when building with plain and simple JS.

Use jQuery when you have jQuery already included or if you are building with jQuery Mobile.

Use AngularJS when building with Angular 1.x or Ionic 1.

Use Angular when building with Angular 2/4/5/6/7 or Ionic 2/3/4.

Use it when you are building your app or website with React.

Do you need additional support seats?

The framework license comes with one support seat. ( +$50/seat )

Add the source code?

Price
Buy now
Customize & try demos locally
Sign in or start your free trial

What framework are you using?

Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Email address

Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Email address

Customize & try demos locally
You can download and use Mobiscroll for Free

What framework are you using?

Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command
$ mobiscroll config ionic
$ mobiscroll config ionic --lite

You will be prompted to log in with your mobiscroll account. Set your password here

Create an Ionic 3 & Mobiscroll starter with the CLI:

$ mobiscroll start ionic myStarter

Run this command for Ionic 4 & Mobiscroll starter:

$ mobiscroll start ionic-angular myStarter

Step 3.Copy the code into your app.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command
$ ionic serve

And voilà, everything should be running smoothly.

Customize & try demos locally
How would you like to do it?
Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Angular project

Copy command
$ mobiscroll config angular
$ mobiscroll config angular --lite

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app. HTML goes into the markup, TS into Typescript.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ng serve in the root folder of your app 🎉

Copy command
$ ng serve

And voilà, everything should be running smoothly.

Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!

Change your password
Need to update your password? Enter and hit the button below

You are setting a password for the account

New Password Required Enter at least 6 characters
Change your password
Need to update your password? Enter and hit the button below

Your password has been changed!

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

Extract the zip file and open the demo in your favorite browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Please extract the zip file and run the project like any Angular CLI app. Make sure to have the Angular CLI installed.

For installation and usage, extract the zip file and open a terminal window and follow these steps.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ng serve --open

Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy!

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer. Extract the zip file and open the demo in your browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Demos
Alerts & notifications
Alert Notifications Note
Components
Alerts & notifications 3
Buttons 4
Calendar 27
Cards 14
Collapsible 3
Color 10
Date & Time 20
Event Calendar 25
Forms 6
Grid layout 7
Image 7
Inputs & fields 6
Listview 18
Measurement 10
Navigation 8
Number 8
Numpad 13
Option List 4
Popup 10
Range 19
Scroller 7
Scrollview 5
Select 18
Slider & progress 4
Styling 6
Timer 5
Timespan 6
Toggle & Radio 4
Treelist 7
Theme Select
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Bootstrap
Windows
Windows Dark
Display Mode
Language Locale
See other demos and change options
Theme
Display
Locale
See other demos