The calendar component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.
There are three ways to use the calendar:
- Use it on an existing input as a directive. A great example is usage with an
ion-input - Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Embed the picker without an input. This can be the page itself or a more complex popup
Demo
Use it on an existing input, like an ion-input as a directive instead of a component.
<input mbsc-datepicker
[controls]="['calendar']"
placeholder="Please Select...">
</input>When using the calendar as a component instead of a directive, the mobiscroll input will be automatically generated.
<mbsc-datepicker
[controls]="['calendar']">
</mbsc-datepicker>Use it for multiple date picking with a mobiscroll input and pill rendering for the selected values.
<mbsc-datepicker
[controls]="['calendar']"
[selectMultiple]="true">
</mbsc-datepicker>
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<mbsc-datepicker
[controls]="['calendar']"
display="inline">
</mbsc-datepicker>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-page>
<input mbsc-datepicker [controls]="['calendar']" placeholder="Please Select..." />
<mbsc-datepicker
[controls]="['calendar']"
label="Calendar"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker display="inline"></mbsc-datepicker>
</mbsc-page>