NGX CSS - Angular Components Squid Style
  1. Components
  2. SqInputDateFormControlComponent

File

src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts

Description

Componente de input de data que estende SqInputFormControlComponent. Implementa ControlValueAccessor e Validator para integração com Reactive Forms. Adiciona automaticamente validators de data baseados nos inputs minDate/maxDate.

Example :
```html
<sq-input-date-form-control
  [formControl]="dateControl"
  [label]="'Data de Nascimento'"
  [minDate]="'1900-01-01'"
  [maxDate]="'2025-12-31'"
></sq-input-date-form-control>
Example :

Extends

SqInputFormControlComponent

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SqInputDateFormControlComponent), multi: true, } { provide: NG_VALIDATORS, useExisting: forwardRef(() => SqInputDateFormControlComponent), multi: true, }
selector sq-input-date-form-control
standalone true
imports NgClass NgStyle NgTemplateOutlet ReactiveFormsModule SqTooltipComponent UniversalSafePipe
styleUrls ./sq-input-date-form-control.component.scss
templateUrl ./sq-input-date-form-control.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

maxDate
Type : string
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:55

Data máxima permitida no formato 'yyyy-mm-dd' Se fornecido, adiciona automaticamente o validator DateValidators.maxDate()
minDate
Type : string
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:49

Data mínima permitida no formato 'yyyy-mm-dd' Se fornecido, adiciona automaticamente o validator DateValidators.minDate()
backgroundColor
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:132

Background color of the input element.
borderColor
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:137

Border color of the input element.
customClass
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:92

Custom CSS class for the input element.
id
Type : string
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:82

The id attribute for the input element.
inputMode
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:162

Input mode for mobile devices.
label
Type : string
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:87

An optional label for the input.
labelColor
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:142

Color of the input label.
maxLength
Type : number | null
Default value : null
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:152

Maximum length for the input element.
name
Type : string
Default value : `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:77

The name attribute for the input element.
pattern
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:157

Regular expression pattern for input validation.
placeholder
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:97

Placeholder text for the input element.
readonly
Type : boolean
Default value : false
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:107

Flag to make the input element readonly.
timeToChange
Type : number
Default value : 0
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:102

Time in milliseconds before triggering input timeout (debounce).
tooltipColor
Type : string
Default value : 'inherit'
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:122

Color of the tooltip.
tooltipIcon
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:127

Icon for the tooltip.
tooltipMessage
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:112

Tooltip message to display.
tooltipPlacement
Type : "center top" | "center bottom" | "left center" | "right center"
Default value : 'right center'
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:117

Placement of the tooltip.
type
Type : "text" | "email" | "email-multiple" | "hidden" | "password" | "tel" | "url" | "file"
Default value : 'text'
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:147

Type of the input element (e.g., text, email, password).

Outputs

blurred
Type : EventEmitter<FocusEvent>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:187

Event emitter for blur events.
focused
Type : EventEmitter<FocusEvent>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:182

Event emitter for focus events.
keyPressDown
Type : EventEmitter<KeyboardEvent>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:167

Event emitter for keydown events.
keyPressUp
Type : EventEmitter<KeyboardEvent>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:172

Event emitter for keyup events.
valueChange
Type : EventEmitter<any>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:177

Event emitter for input value changes.

Methods

formatDate
formatDate(value: any)
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:125

Formata uma data para o formato 'yyyy-mm-dd'. Aceita Date ou string como entrada e retorna string formatada ou vazio se inválido.

Parameters :
Name Type Optional Description
value any No
  • Data a ser formatada (Date ou string)
Returns : string

String no formato 'yyyy-mm-dd' ou string vazia se inválido
ngOnInit
ngOnInit()
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:66

Lifecycle hook executado após a inicialização do componente. Define o tipo como 'date' e atualiza os validators automáticos.

Returns : void
Private updateDateValidators
updateDateValidators()
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:78

Atualiza os validators do FormControl com base nos inputs de data. Preserva os validators existentes e adiciona os novos automaticamente.

Returns : void
writeValue
writeValue(value: any)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:107

Sobrescreve o método writeValue para lidar com formatos de data. Converte Date ou ISO string para formato 'yyyy-mm-dd' antes de atribuir ao control.

Parameters :
Name Type Optional Description
value any No
  • Valor a ser escrito no controle
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:266

Lifecycle hook called when any input property changes. Updates validators when the type changes.

Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:307

Cleanup on component destruction.

Returns : void
onBlur
onBlur(event: FocusEvent)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:421

Handle blur events.

Parameters :
Name Type Optional
event FocusEvent No
Returns : void
onChangeEvent
onChangeEvent(event: Event)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:387

Handle input value changes with optional debounce.

Parameters :
Name Type Optional
event Event No
Returns : void
onFocus
onFocus(event: FocusEvent)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:429

Handle focus events.

Parameters :
Name Type Optional
event FocusEvent No
Returns : void
onKeyDown
onKeyDown(event: KeyboardEvent)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:406

Handle keydown events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keydown event.
Returns : void
onKeyUp
onKeyUp(event: KeyboardEvent)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:414

Handle keyup events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keyup event.
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:327

ControlValueAccessor: Registers a callback function that is called when the control's value changes.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:335

ControlValueAccessor: Registers a callback function that is called when the control is touched.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
registerOnValidatorChange
registerOnValidatorChange(fn: () => void)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:365

Validator: Registers a callback for validation changes.

Parameters :
Name Type Optional Description
fn function No
  • The callback function.
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:343

ControlValueAccessor: Sets the disabled state of the control.

Parameters :
Name Type Optional Description
isDisabled boolean No
  • Whether the control should be disabled.
Returns : void
Private updateValidators
updateValidators()
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:277

Updates validators based on the input type. Automatically applies appropriate validators for email, phone, URL, etc. Uses ValidatorHelper through InputValidators for consistency.

Returns : void
validate
validate()
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:355

Validator: Validates the control.

Returns : ValidationErrors | null

Validation errors or null.

Properties

placeholder
Type : string
Default value : 'dd/mm/aaaa'
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:60

Placeholder padrão para inputs de data
control
Default value : new FormControl('')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:210

Internal FormControl for managing the input value and state.
Private destroy$
Default value : new Subject<void>()
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:225

Subject for managing subscriptions.
labelTemplate
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('labelTemplate')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:205

Reference to a label template.
leftLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('leftLabel')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:193

Reference to a left-aligned label template.
nativeElement
Type : ElementRef
Default value : inject(ElementRef)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:215

Reference to the native element.
Private onChange
Type : function
Default value : () => {...}
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:232

ControlValueAccessor callback function called when the value changes. Registered via registerOnChange().
Private onTouched
Type : function
Default value : () => {...}
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:239

ControlValueAccessor callback function called when the control is touched. Registered via registerOnTouched().
Private onValidationChange
Type : function
Default value : () => {...}
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:245

External validator function (propagated from parent control).
rightLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('rightLabel')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:199

Reference to a right-aligned label template.
Private Optional timeoutInput
Type : ReturnType<>
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:220

Timeout for input changes (debounce).

Accessors

formattedMinDate
getformattedMinDate()
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:142

Retorna a data mínima formatada para o atributo min do input. Se minDate não estiver definido, retorna '0001-01-01' (data mínima válida para HTML5).

Returns : string
formattedMaxDate
getformattedMaxDate()
Defined in src/components/sq-input-date-form-control/sq-input-date-form-control.component.ts:151

Retorna a data máxima formatada para o atributo max do input. Se maxDate não estiver definido, retorna '9999-12-31' (data máxima válida para HTML5).

Returns : string 
import { Component, Input, forwardRef, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { SqInputFormControlComponent } from '../sq-input-form-control/sq-input-form-control.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';
import { DateValidators } from '../../validators/date.validators';

/**
 * Componente de input de data que estende SqInputFormControlComponent.
 * Implementa ControlValueAccessor e Validator para integração com Reactive Forms.
 * Adiciona automaticamente validators de data baseados nos inputs minDate/maxDate.
 *
 * @example
 * ```html
 * <sq-input-date-form-control
 *   [formControl]="dateControl"
 *   [label]="'Data de Nascimento'"
 *   [minDate]="'1900-01-01'"
 *   [maxDate]="'2025-12-31'"
 * ></sq-input-date-form-control>
 * ```
 */
@Component({
  selector: 'sq-input-date-form-control',
  templateUrl: './sq-input-date-form-control.component.html',
  styleUrls: ['./sq-input-date-form-control.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, ReactiveFormsModule, SqTooltipComponent, UniversalSafePipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SqInputDateFormControlComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => SqInputDateFormControlComponent),
      multi: true,
    },
  ],
})
export class SqInputDateFormControlComponent extends SqInputFormControlComponent implements OnInit {
  /**
   * Data mínima permitida no formato 'yyyy-mm-dd'
   * Se fornecido, adiciona automaticamente o validator DateValidators.minDate()
   */
  @Input() minDate?: string;

  /**
   * Data máxima permitida no formato 'yyyy-mm-dd'
   * Se fornecido, adiciona automaticamente o validator DateValidators.maxDate()
   */
  @Input() maxDate?: string;

  /**
   * Placeholder padrão para inputs de data
   */
  override placeholder = 'dd/mm/aaaa';

  /**
   * Lifecycle hook executado após a inicialização do componente.
   * Define o tipo como 'date' e atualiza os validators automáticos.
   */
  ngOnInit(): void {
    // Força o tipo para 'date'
    this.type = 'date' as any;

    // Adiciona validators automáticos baseados em minDate/maxDate
    this.updateDateValidators();
  }

  /**
   * Atualiza os validators do FormControl com base nos inputs de data.
   * Preserva os validators existentes e adiciona os novos automaticamente.
   */
  private updateDateValidators(): void {
    if (!this.control) return;

    // Coleta os validators existentes
    const existingValidators = this.control.validator ? [this.control.validator] : [];

    // Adiciona validator de data válida (sempre)
    const newValidators = [DateValidators.date()];

    // Adiciona validator de data mínima se o @Input foi fornecido
    if (this.minDate) {
      newValidators.push(DateValidators.minDate(this.minDate));
    }

    // Adiciona validator de data máxima se o @Input foi fornecido
    if (this.maxDate) {
      newValidators.push(DateValidators.maxDate(this.maxDate));
    }

    // Combina validators existentes + novos automáticos
    this.control.setValidators([...existingValidators, ...newValidators]);
    this.control.updateValueAndValidity({ emitEvent: false });
  }

  /**
   * Sobrescreve o método writeValue para lidar com formatos de data.
   * Converte Date ou ISO string para formato 'yyyy-mm-dd' antes de atribuir ao control.
   * @param value - Valor a ser escrito no controle
   */
  override writeValue(value: any): void {
    if (value) {
      // Converte para formato ISO se necessário
      if (value instanceof Date) {
        value = value.toISOString().split('T')[0];
      } else if (typeof value === 'string' && value.includes('T')) {
        value = value.split('T')[0];
      }
    }
    super.writeValue(value);
  }

  /**
   * Formata uma data para o formato 'yyyy-mm-dd'.
   * Aceita Date ou string como entrada e retorna string formatada ou vazio se inválido.
   * @param value - Data a ser formatada (Date ou string)
   * @returns String no formato 'yyyy-mm-dd' ou string vazia se inválido
   */
  formatDate(value: any): string {
    if (!value) return '';
    try {
      if (value instanceof Date) {
        return value.toISOString().split('T')[0];
      }
      return new Date(value).toISOString().split('T')[0];
    } catch {
      return '';
    }
  }

  /**
   * Retorna a data mínima formatada para o atributo min do input.
   * Se minDate não estiver definido, retorna '0001-01-01' (data mínima válida para HTML5).
   * @returns Data mínima no formato 'yyyy-mm-dd'
   */
  get formattedMinDate(): string {
    return this.minDate ? this.formatDate(this.minDate) : '0001-01-01';
  }

  /**
   * Retorna a data máxima formatada para o atributo max do input.
   * Se maxDate não estiver definido, retorna '9999-12-31' (data máxima válida para HTML5).
   * @returns Data máxima no formato 'yyyy-mm-dd'
   */
  get formattedMaxDate(): string {
    return this.maxDate ? this.formatDate(this.maxDate) : '9999-12-31';
  }
}

<div class="wrapper-all-inside-input {{ customClass }}">
  @if (label?.length || tooltipMessage || labelTemplate) {
    <label
      class="display-flex"
      [ngClass]="{
        readonly: readonly,
      }"
      [for]="id"
    >
      @if (label && !labelTemplate) {
        <div [ngStyle]="{ color: labelColor }" [innerHtml]="label | universalSafe"></div>
      }
      @if (labelTemplate) {
        <div>
          <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
        </div>
      }
      @if (tooltipMessage) {
        <sq-tooltip
          class="ml-1"
          [message]="tooltipMessage"
          [placement]="tooltipPlacement"
          [color]="tooltipColor"
          [icon]="tooltipIcon"
        ></sq-tooltip>
      }
    </label>
  }
  <div
    class="p-0 wrapper-input wrapper-input-squid text-ellipsisarea"
    [ngClass]="{
      readonly: readonly,
    }"
  >
    @if (leftLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="leftLabel"></ng-container>
      </span>
    }
    <input
      class="col input"
      [ngClass]="{
        disabled: disabled,
        readonly: readonly,
      }"
      [ngStyle]="{
        'background-color': backgroundColor,
        'border-color': borderColor,
      }"
      [id]="id"
      type="date"
      [name]="name"
      [placeholder]="placeholder || ''"
      [readonly]="readonly"
      [formControl]="control"
      [min]="formattedMinDate"
      [max]="formattedMaxDate"
      (input)="onChangeEvent($event)"
      (keydown)="onKeyDown($event)"
      (keyup)="onKeyUp($event)"
      (blur)="onBlur($event)"
      (focus)="onFocus($event)"
      [attr.inputmode]="inputMode"
    />
    @if (rightLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
      </span>
    }
  </div>
  @if (control.invalid && control.touched) {
    <span
      class="icon textarea-icon"
      [ngClass]="{
        'no-label': !label?.length,
      }"
    >
      <i class="fa-solid fa-triangle-exclamation"></i>
    </span>
  }
</div>

./sq-input-date-form-control.component.scss 

.wrapper-all-inside-input {
  position: relative;
  .icon {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    right: 24px;
    top: 40px;
    &.no-label {
      top: 12px;
    }
  }
  .icon-external {
    color: inherit !important;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""