Skip to main content

Customizing the input

Overview​

The datepicker, as explained below, can be used with one, two or no inputs.

Using without inputs​

The first choice of input customization is to have no inputs at all. In this case rendering the component in inline display mode will leave out the use of inputs.

Inline picker
<mbsc-datepicker display="inline" [(ngModel)]="myAppointment"></mbsc-datepicker>

Using with one input​

The datepicker component will render a Mobiscroll Input by default. This input will hold the formatted value after selection.

Having a custom input can be achived using the datepicker directive on the component you want.

Using the datepicker on an IonInput
import { Component } from '@angular/core';

@Component({...})
export class AppComponent {
  myDatepickerOptions = { select: 'date', controls: ['calendar'] };
}
<ion-input placeholder="Click to select" mbsc-datepicker [mbscOptions]="myDatepickerOptions"></ion-input>

Using with two inputs​

When selecting a range, you have basically two values to display: the start of the range and the end of the range. These can be shown in different inputs using the startInput and the endInput options.

Two inputs for range selection
<mbsc-input placeholder="Start" label="Start Date" #myStart></mbsc-input>
<mbsc-input placeholder="End" label="End Date" #myEnd></mbsc-input>
<mbsc-datepicker select="range" [(ngModel)]="myRange" [startInput]="myStart" [endInput]="myEnd"></mbsc-datepicker>

When the startInput and the endInput options are provided, the datepicker will not render any other inputs. It will open when these inputs are focused/clicked instead.