Value Selection

The Datepicker can be used for 4 major date and time selection tasks:

1. Single value selection - a single date, a single time or a single date-time - use the date & time or calendar
2. Multiple value selection - one or more dates - use the calendar
3. Range selection - a pair of start/end date, a pair of start/end time or a pair of start/end date-times - use the range picker
4. Preset range selection - for selecting a week or a predefined part of the week as a start/end date pair

The select and selectMultiple options control how the selection works. Also with the firstSelectDay and selectSize options the selection can be tailored further, when using the preset-range selection.

Single Value Selection

This is the default behavior, and it can also be initialized with the select="date" option. Depending on the controls option, the Datepicker will select either a single date or a single time or both (a single datetime).

<mbsc-datepicker select="date" [(ngModel)]="myValue"></mbsc-datepicker>
<mbsc-datepicker [(ngModel)]="myValue"></mbsc-datepicker>

The myValue in the above example will hold the selected value.

info

The type of the selected value depends on the returnFormat option. Learn more about the returned value!

Multiple Value Selection

The selectMultiple option will enable the selection of multiple dates. It can be used with the calendar control only. The selected value in this case will be an array of dates instead of just a single date.

<mbsc-datepicker [selectMultiple]="true" [(ngModel)]="myDates"></mbsc-datepicker>

Range Selection

The Datepicker can be used to select a date or a time range. The range selection feature can be activated with the select="range" option. The selected value in this case will be an array of dates with two values: the start and the end.

Range value examples

const dateRangeExample1 = ['2023-10-19', '2023-10-24'];
const dateRangeExample2 = [new Date(2023, 9, 19), new Date(2023, 9, 24)];

const timeRangeExample1 = ['10:00', '13:30'];
const timeRangeExample2 = [new Date(2023, 9, 19, 10, 0), new Date(2023, 9, 19, 13, 30)];

Depending on the controls passed to the datepicker, it will select a date range, a time range or a datetime range. Both the start and end value of the returned array will respect the returnFormat option. Learn more on how to work with ISO strings or date objects in the Return value section.

app.component.html

<mbsc-datepicker select="range" returnFormat="iso8601" [controls]="myTimeControl"></mbsc-datepicker>

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscDatepickerControl, MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [CommonModule, MbscModule]
})
export class AppComponent {
  myTimeControl: Array<MbscDatepickerControl> = ['time'];
}

The returned value after the selection in the above example will be an array with two ISO8601 strings:

Example value

['14:50', '20:45']

Preset-Range Selection

The Datepicker can be used to select a week or predefined part of the week. The preset-range selection feature can be activated with the select="preset-range" option. The selected value in this case will be an array of dates with two values just like with range selection: the start and the end of the range. The difference in this case is that you don't have to select the start and end values separately. You can click any day on the week and the start and end values will be calculated accordingly.

When the preset-range selection mode is on, the start date will be fixed to a specific day of the week (for example: Monday). This can be achieved with the firstSelectDay option, which defaults to the firstDay of the week.

The length of the selection will be a set number of days (for example: 5 days) and can be controlled with the selectSize option. By default it is set to 7 (will select the whole week), but can be reduced to even a single day.

Example for selecting a work week (Monday to Friday)

<mbsc-datepicker
  select="preset-range"
  [firstSelectDay]="1"
  [selectSize]="5"
  [(ngModel)]="myWeek">
</mbsc-datepicer>