The date picker 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 date picker:
- 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
Date picker with input
Use it on an existing input, like an ion-input as a directive instead of a component.
<input mbsc-datepicker
[controls]="['date']"
placeholder="Please Select...">
</input>When using the date as a component instead of a directive, the mobiscroll input will be automatically generated.
<mbsc-datepicker
[controls]="['date']">
</mbsc-datepicker>Embeddable date picker
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<mbsc-datepicker
[controls]="['date']"
display="inline">
</mbsc-datepicker>ComponentTemplate
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]="['date']" placeholder="Please Select..." />
<mbsc-datepicker
[controls]="['date']"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker [controls]="['date']" display="inline"></mbsc-datepicker>
</mbsc-page>