Skip to main content

​
Overview

The DatePicker class provides a date selection interface with calendar popup functionality. It supports date constraints through minimum and maximum date boundaries.

​
Inheritance

ObjectBase → NodeBase → InputBaseNode → DatePicker

​
Constructor

new DatePicker(
  id: string,
  placeholder?: string,
  value?: any,
  singleLine?: boolean,
  icon?: string,
  errorMessage?: string,
  disabled?: boolean,
  validator?: Validator | AbstractControlOptions,
  asyncValidator?: AsyncValidatorFn,
  action?: Action | Action[],
  minDate?: Date,
  maxDate?: Date
)

​
Parameters

​
id
string
required
The unique identifier for the date picker node in the DOM.
​
placeholder
string
The placeholder text to display when no date is selected.
​
value
any
The initial date value. Can be a Date object, string, or timestamp.
​
singleLine
boolean
default:"false"
Whether to display the node in a single line layout.
​
icon
string
Material icon name to display in the date picker field.
​
errorMessage
string
Custom error message to display when validation fails.
​
disabled
boolean
Whether the date picker is disabled.
​
validator
Validator | AbstractControlOptions
Synchronous validator function(s) or control options.
​
asyncValidator
AsyncValidatorFn
Asynchronous validator function(s) for the date picker.
​
action
Action | Action[]
Action(s) to execute when a date is selected.
​
minDate
Date
The minimum selectable date. Dates before this will be disabled.
​
maxDate
Date
The maximum selectable date. Dates after this will be disabled.

​
Properties

PropertyTypeDescription
idstringThe unique identifier for the node
placeholderstringThe placeholder text
type'date'The node type (read-only)
valueanyThe selected date value
readOnlybooleanWhether the input field is read-only
minDateDateMinimum selectable date
maxDateDateMaximum selectable date
singleLinebooleanWhether displayed in single line layout
iconstringMaterial icon name
errorMessagestringCustom error message
disabledbooleanWhether the node is disabled
validatorValidator | AbstractControlOptionsSynchronous validators
asyncValidatorAsyncValidatorFnAsynchronous validators
actionAction | Action[]Associated actions
hintstringHint text to display
autoFocusbooleanWhether to auto-focus on load

​
Methods

​
getNativeElement()

Returns the native DOM element for this node. 
getNativeElement(): HTMLElement | null

​
Usage Example

import { DatePicker, Action } from '@ng-mdf/core';
import { Validators } from '@angular/forms';

// Simple date picker
const birthDatePicker = new DatePicker(
  'birthDate',
  'Select your birth date',
  new Date('1990-01-01'),
  false,
  'calendar_today',
  'Please select a valid birth date',
  false,
  Validators.required
);

// Date picker with min/max constraints
const appointmentDatePicker = new DatePicker(
  'appointmentDate',
  'Choose appointment date',
  undefined,
  false,
  'event',
  'Please select a date within the available range',
  false,
  Validators.required,
  undefined,
  undefined,
  new Date(),  // minDate: today
  new Date(new Date().setMonth(new Date().getMonth() + 3))  // maxDate: 3 months from now
);

// Date picker with action
const eventDatePicker = new DatePicker(
  'eventDate',
  'Event date',
  undefined,
  false,
  'event_available',
  undefined,
  false,
  Validators.required,
  undefined,
  new Action('change', (event) => {
    console.log('Selected date:', event.value);
    // Load available time slots for the selected date
    loadTimeSlots(event.value);
  }),
  new Date(),
  new Date(new Date().setFullYear(new Date().getFullYear() + 1))
);

// Date picker for past dates only (e.g., historical events)
const historicalDatePicker = new DatePicker(
  'historicalDate',
  'Select historical date',
  undefined,
  false,
  'history',
  'Please select a date in the past',
  false,
  undefined,
  undefined,
  undefined,
  new Date('1900-01-01'),  // minDate
  new Date()  // maxDate: today
);

​
Date Constraints

​
Minimum Date

Set minDate to prevent users from selecting dates before a certain point: 
// Only allow future dates
const futureDatePicker = new DatePicker(
  'futureDate',
  'Select a future date',
  undefined,
  false,
  'calendar_today',
  undefined,
  false,
  undefined,
  undefined,
  undefined,
  new Date()  // minDate is today
);

​
Maximum Date

Set maxDate to prevent users from selecting dates after a certain point: 
// Only allow dates up to end of year
const yearEndDate = new Date(new Date().getFullYear(), 11, 31);
const limitedDatePicker = new DatePicker(
  'limitedDate',
  'Select date (this year only)',
  undefined,
  false,
  'calendar_today',
  undefined,
  false,
  undefined,
  undefined,
  undefined,
  undefined,
  yearEndDate
);

​
Date Formats

The date picker uses the locale-aware date format provided by Angular Material. The displayed format automatically adapts to the user’s locale settings.

​
Validation

In addition to custom validators, the date picker automatically validates that selected dates fall within the minDate and maxDate range if specified.

Build docs developers (and LLMs) love

Get started for freeTalk to us