@natec/mef-dev-ui-kit documentation
  1. Components
  2. DatepickerComponent

File

src/lib/markup-kit/utils/datepicker/datepicker/datepicker.component.ts

Description

Datepicker Component for selecting dates.

This component allows users to pick a date from a calendar interface. It supports various configuration options such as language, date format, and date range.

<mefdev-datepicker
  [labelContentText]="'Select your date'"
  [lang]="'uk'"
  [dateFormat]="'dd/MM/yyyy'"
  [range]="{startYear: 1900, toYear: 300}"
  [disabled]="false"
  (dateChanged)="onDateChanged($event)"
  [topOffset]="'20'"
  [leftOffset]="'10'">
</mefdev-datepicker>

https://mef.dev/ui_kit_demo/view/utils/datepicker

Implements

OnChanges OnInit

Metadata

selector mefdev-datepicker
styleUrls ./datepicker.component.scss
templateUrl ./datepicker.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners

Constructor

constructor(datePipe: DatePipe, elementRef: ElementRef)

Constructor for the DatepickerComponent class. It is used to access DOM elements.

Parameters :
Name Type Optional Description
datePipe DatePipe No

A service for formatting and parsing dates.
elementRef ElementRef No

A reference to the element on which this component is attached. It is used to access DOM elements.

Inputs

dateFormat
Type : string
Default value : 'EEE MMM dd yyyy'

The date format for displaying the selected date. Default value: 'EEE MMM dd yyyy'.

<mefdev-datepicker
  [dateFormat]="'dd/MM/yyyy'">
</mefdev-datepicker>
disabled
Type : boolean
Default value : false

Whether the datepicker is disabled or not. Default value: false (enabled).

<mefdev-datepicker
  [disabled]="false">
</mefdev-datepicker>
labelContentText
Type : string

Label text for the datepicker. Default value: 'en' (English).

<mefdev-datepicker
  [labelContentText] = "'Chose your date'">
</mefdev-datepicker>
lang
Type : string
Default value : 'en'

The language/locale for the datepicker. Default value: 'en' (English).

<mefdev-datepicker
  [lang] = "'uk'">
</mefdev-datepicker>
leftOffset
Type : string
Default value : '10'

The left offset for positioning the datepicker. Default value: '10'.

<mefdev-datepicker
  [leftOffset]="'10'">
</mefdev-datepicker>
range
Type : literal type
Default value : {startYear:1900, toYear:300}

The range of years available in the year dropdown. Default value: { startYear: 1900, toYear: 300 }.

<mefdev-datepicker
  [range]="{startYear: 1900, toYear: 300}">
</mefdev-datepicker>
topOffset
Type : string
Default value : '20'

The top offset for positioning the datepicker. Default value: '20'.

<mefdev-datepicker
  [topOffset]="'20'">
</mefdev-datepicker>

Outputs

dateChanged
Type : EventEmitter<Date>

Event emitted when the selected date in the datepicker changes. It emits a Date object representing the selected date.

<mefdev-datepicker
  (dateChanged)="onDateChanged($event)">
</mefdev-datepicker>

HostListeners

document:click
Arguments : '$event'
document:click(event: MouseEvent)

Host listener for document click events to handle calendar interaction. This function checks if a click event occurred within the calendar or input elements.

  • If the click occurred within the calendar, no action is taken.
  • If the click occurred within the input element and the component is not in editing mode, it opens the calendar.
Parameters :
Name Optional Description
event No

The MouseEvent object representing the click event.

Methods

onClick
onClick(event: MouseEvent)
Decorators :
@HostListener('document:click', ['$event'])

Host listener for document click events to handle calendar interaction. This function checks if a click event occurred within the calendar or input elements.

  • If the click occurred within the calendar, no action is taken.
  • If the click occurred within the input element and the component is not in editing mode, it opens the calendar.
Parameters :
Name Type Optional Description
event MouseEvent No

The MouseEvent object representing the click event.
Returns : void
Public onDateInput
onDateInput(event: any)

Handle user input in the editable input field for date editing. This method captures the input value and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates 'selectedDateMonth' and 'selectedDateYear' accordingly.

// Handle user input in the editable input field
this.onDateInput(event);
Parameters :
Name Type Optional Description
event any No
  • The input event containing the user's input.
// Handle user input in the editable input field
this.onDateInput(event);
Returns : void
selectDate
selectDate(date: Date)

Select a date in the calendar interface and perform necessary updates. This method sets the selected date, formats it, closes the calendar, and emits a dateChanged event. It also updates the selected month and year dropdown values.

Parameters :
Name Type Optional Description
date Date No
  • The date to be selected in the calendar.
Returns : void
toggleEdit
toggleEdit()

Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.

Returns : void

Properties

editedDate
Type : string
Default value : ''

Track the edited date separately when in editing mode. Default value: An empty string.
formattedDate
Type : any

The formatted date for display in the input. Default value: Formatted representation of the selected date.
isCalendarOpen
Type : boolean
Default value : false

Flag to determine if the calendar is open or closed. Default value: false (closed).
isMonthDropdownOpen
Type : boolean
Default value : true

Flag to determine if the month dropdown is open or closed. Default value: true (open).
isUserDateValid
Type : boolean
Default value : true

A flag that checks whether a valid date has been entered and whether the entered date exists. If the two previous conditions are not true, the datepicker will be highlighted in red
isYearDropdownOpen
Type : boolean
Default value : true

Flag to determine if the year dropdown is open or closed. Default value: true (open).
selectedDate
Type : Date
Default value : new Date()

The currently selected date. Default value: Today's date.
selectedDateMonth
Type : number
Default value : this.selectedDate.getMonth()

The selected month (0-11). Default value: The month of the selected date.
selectedDateYear
Type : number
Default value : this.selectedDate.getFullYear()

The selected year. Default value: The year of the selected date.
userInput
Type : string
Default value : ''

The string entered by the user for date input. This variable stores the user's input as they type in the date field.
years
Type : number[]

An array of years for the year dropdown. Default value: An array of years within the specified range.

results matching ""

    No results matching ""