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

File

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

Description

Represents a date input component that extends SqInputComponent.

This component extends the SqInputComponent and adds additional properties and behavior for handling money input.


Example :
<sq-input-date [name]="'date-input'" [id]="'date-input'" [label]="'Date'" [(value)]='date'></sq-input-date>

Extends

SqInputComponent

Metadata

selector sq-input-date
standalone true
imports NgClass NgStyle NgTemplateOutlet FormsModule SqTooltipComponent UniversalSafePipe
styleUrls ./sq-input-date.component.scss
templateUrl ./sq-input-date.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(validatorHelper: ValidatorHelper, element: ElementRef, translate: TranslateService)
Defined in src/components/sq-input-date/sq-input-date.component.ts:68

Constructs a new instance of SqInputDateComponent.

Parameters :
Name Type Optional Description
validatorHelper ValidatorHelper No
  • The ValidatorHelper service for input validation.
element ElementRef No
  • Reference to the native element.
translate TranslateService No
  • The TranslateService for translation support (optional).

Inputs

maxDate
Type : string
Default value : '9999-12-31'
Defined in src/components/sq-input-date/sq-input-date.component.ts:45

Maximum allowed date in 'yyyy-mm-dd' format.
minDate
Type : string
Default value : '0001-01-01'
Defined in src/components/sq-input-date/sq-input-date.component.ts:40

Minimum allowed date in 'yyyy-mm-dd' format.
placeholder
Type : string
Default value : 'dd-mm-yyyy'
Inherited from SqInputComponent
Defined in SqInputComponent:50

Placeholder text for the date input.
value
Type : any
Inherited from SqInputComponent
Defined in SqInputComponent:56

The value of the input element in 'yyyy-mm-dd' format.
backgroundColor
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:147

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

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

Custom CSS class for the input element.
disabled
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:107

Flag to disable the input element.
errorSpan
Type : boolean
Default value : true
Inherited from SqInputComponent
Defined in SqInputComponent:102

Flag to display an error span.
externalError
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:76

External error message to display.
externalIcon
Type : string
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:81

External icon to display.
id
Type : string
Inherited from SqInputComponent
Defined in SqInputComponent:56

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

Input mode for mobile devices.
label
Type : string
Inherited from SqInputComponent
Defined in SqInputComponent:61

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

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

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

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

Regular expression pattern for input validation.
readonly
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:112

Flag to make the input element readonly.
required
Type : boolean
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:117

Flag to mark the input as required.
timeToChange
Type : number
Default value : 0
Inherited from SqInputComponent
Defined in SqInputComponent:97

Time in milliseconds before triggering input timeout.
tooltipColor
Type : string
Default value : 'inherit'
Inherited from SqInputComponent
Defined in SqInputComponent:137

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

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

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

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

Type of the input element (e.g., text, email, password).
useFormErrors
Type : boolean
Default value : true
Inherited from SqInputComponent
Defined in SqInputComponent:122

Flag to use form errors for validation messages.

Outputs

emitFocus
Type : EventEmitter<Event>
Inherited from SqInputComponent
Defined in SqInputComponent:207

Event emitter for focus input changes.
inFocus
Type : EventEmitter<boolean>
Inherited from SqInputComponent
Defined in SqInputComponent:192

Event emitter for input focus events.
keyPressDown
Type : EventEmitter<KeyboardEvent>
Inherited from SqInputComponent
Defined in SqInputComponent:182

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

Event emitter for keyup events.
valid
Type : EventEmitter<boolean>
Inherited from SqInputComponent
Defined in SqInputComponent:197

Event emitter for validation status.
valueChange
Type : EventEmitter<any>
Inherited from SqInputComponent
Defined in SqInputComponent:202

Event emitter for input value changes.

Methods

Async change
change(event: any)
Inherited from SqInputComponent
Defined in SqInputComponent:118

Handle the change event for the date input.

Parameters :
Name Type Optional Description
event any No
  • The input change event.
Returns : any
formatDate
formatDate(value: any)
Defined in src/components/sq-input-date/sq-input-date.component.ts:156

Format a value as an ISO date string.

Parameters :
Name Type Optional Description
value any No
  • The value to format as an ISO date string.
Returns : any

The ISO date string.
getISOValidDate
getISOValidDate(value: Date)
Defined in src/components/sq-input-date/sq-input-date.component.ts:136

Get the ISO-formatted valid date from a Date object.

Parameters :
Name Type Optional Description
value Date No
  • The Date object to format.
Returns : string

The ISO-formatted date string.
Async validate
validate(isBlur)
Inherited from SqInputComponent
Defined in SqInputComponent:89

Asynchronously validate the date input value.

Parameters :
Name Optional Default value Description
isBlur No false
  • Indicates if the input has lost focus.
Returns : any
keyDown
keyDown(event: KeyboardEvent)
Inherited from SqInputComponent
Defined in SqInputComponent:335

Handle keydown events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keydown event.
Returns : void
keyUp
keyUp(event: KeyboardEvent)
Inherited from SqInputComponent
Defined in SqInputComponent:343

Handle keyup events.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keyup event.
Returns : void
Async setError
setError(key: string, interpolateParams: Object)
Inherited from SqInputComponent
Defined in SqInputComponent:325

Sets an error message.

Parameters :
Name Type Optional Default value Description
key string No
  • The translation key for the error message.
interpolateParams Object No {}
  • Value to interpolate with translation.
Returns : any

Properties

labelTemplate
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('labelTemplate')
Inherited from SqInputComponent
Defined in SqInputComponent:68

Reference to a label template.
Public translate
Type : TranslateService
Decorators :
@Optional()
Inherited from SqInputComponent
Defined in SqInputComponent:79
- The TranslateService for translation support (optional).
Public validatorHelper
Type : ValidatorHelper
Inherited from SqInputComponent
Defined in SqInputComponent:77
- The ValidatorHelper service for input validation.
_value
Type : any
Default value : ''
Inherited from SqInputComponent
Defined in SqInputComponent:230

The internal value of the input element.
error
Type : boolean | string
Default value : false
Inherited from SqInputComponent
Defined in SqInputComponent:235

Error message to display.
leftLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('leftLabel')
Inherited from SqInputComponent
Defined in SqInputComponent:213

Reference to a left-aligned label template.
nativeElement
Type : ElementRef
Inherited from SqInputComponent
Defined in SqInputComponent:240

Reference to the native element.
rightLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('rightLabel')
Inherited from SqInputComponent
Defined in SqInputComponent:219

Reference to a right-aligned label template.
timeoutInput
Type : ReturnType<>
Inherited from SqInputComponent
Defined in SqInputComponent:245

Timeout for input changes.

Accessors

value
getvalue()
Defined in src/components/sq-input-date/sq-input-date.component.ts:60
setvalue(value: any)
Defined in src/components/sq-input-date/sq-input-date.component.ts:56

The value of the input element in 'yyyy-mm-dd' format.

Parameters :
Name Type Optional
value any No
Returns : void 
import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { ValidatorHelper } from '../../helpers/validator.helper';
import { SqInputComponent } from '../sq-input/sq-input.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';

/**
 * Represents a date input component that extends SqInputComponent.
 *
 * This component extends the {@link SqInputComponent} and adds additional properties and behavior for handling money input.
 *
 * <br>
 * <label for='id-exemple-date'>
 *  Example Input
 * </label>
 * <input
 *   class='input mb-3'
 *   name="name-exemple-date"
 *   id="id-exemple-date"
 *   type="date"
 * ></input>
 *
 * @example
 * <sq-input-date [name]="'date-input'" [id]="'date-input'" [label]="'Date'" [(value)]='date'></sq-input-date>
 */
@Component({
  selector: 'sq-input-date',
  templateUrl: './sq-input-date.component.html',
  styleUrls: ['./sq-input-date.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, FormsModule, SqTooltipComponent, UniversalSafePipe],
})
export class SqInputDateComponent extends SqInputComponent {
  /**
   * Minimum allowed date in 'yyyy-mm-dd' format.
   */
  @Input() minDate = '0001-01-01';

  /**
   * Maximum allowed date in 'yyyy-mm-dd' format.
   */
  @Input() maxDate = '9999-12-31';

  /**
   * Placeholder text for the date input.
   */
  @Input() override placeholder = 'dd-mm-yyyy';

  /**
   * The value of the input element in 'yyyy-mm-dd' format.
   */
  @Input()
  public override set value(value: any) {
    value = value.split('T')[0] || value;
    this._value = new Date(value);
  }
  public override get value(): any {
    return this._value.toISOString().split('T')[0];
  }

  /**
   * Reference to a label template.
   */
  @ContentChild('labelTemplate')
  override labelTemplate: TemplateRef<HTMLElement> | null = null;

  /**
   * Constructs a new instance of SqInputDateComponent.
   * @param validatorHelper - The ValidatorHelper service for input validation.
   * @param element - Reference to the native element.
   * @param translate - The TranslateService for translation support (optional).
   */
  constructor(
    public override validatorHelper: ValidatorHelper,
    element: ElementRef,
    @Optional() public override translate: TranslateService
  ) {
    super(validatorHelper, element, translate);
    this.nativeElement = element.nativeElement;
  }

  /**
   * Asynchronously validate the date input value.
   * @param isBlur - Indicates if the input has lost focus.
   */
  override async validate(isBlur = false) {
    if (this.externalError) {
      this.error = false;
    } else if (!!this.required && !this._value) {
      this.valid.emit(false);
      this.setError('forms.required');
    } else if (!this.validatorHelper.date(this._value)) {
      this.valid.emit(false);
      this.setError('forms.date');
    } else if (this.formatDate(this.minDate) > this._value) {
      this.valid.emit(false);
      this.setError('forms.rangeDate');
    } else if (this.formatDate(this.maxDate) < this._value) {
      this.valid.emit(false);
      this.setError('forms.rangeDate');
    } else {
      this.valid.emit(true);
      this.error = '';
    }

    if (isBlur) {
      this.inFocus.emit(false);
    }
  }

  /**
   * Handle the change event for the date input.
   * @param event - The input change event.
   */
  override async change(event: any) {
    event = event?.target?.valueAsDate ? event.target.valueAsDate : event?.target?.value || event;
    if (!this.disabled && !this.readonly) {
      this.inFocus.emit(true);
      this._value = event;
      clearTimeout(this.timeoutInput);
      this.timeoutInput = setTimeout(() => {
        this.valueChange.emit(this.getISOValidDate(event));
      }, this.timeToChange);
      this.validate();
    }
  }

  /**
   * Get the ISO-formatted valid date from a Date object.
   * @param value - The Date object to format.
   * @returns The ISO-formatted date string.
   */
  getISOValidDate(value: Date) {
    try {
      let isoDate = '';
      if (value) {
        isoDate = new Date(value)?.toISOString().split('T')[0] + 'T00:00:00.000Z';
      }
      if (isoDate === 'Invalid date') {
        return '';
      }
      return isoDate;
    } catch (error) {
      return '';
    }
  }

  /**
   * Format a value as an ISO date string.
   * @param value - The value to format as an ISO date string.
   * @returns The ISO date string.
   */
  formatDate(value: any) {
    if (!value) {
      return '';
    }
    try {
      return new Date(value).toISOString().split('T')[0];
    } catch (error) {
      return '';
    }
  }
}

<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]="{
      error: (externalError && externalError !== '') || (error && error !== ''),
      readonly: readonly,
    }"
  >
    @if (leftLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="leftLabel"></ng-container>
      </span>
    }
    <input
      class="col input"
      [ngClass]="{
        'has-icon': error || externalError,
        disabled: disabled,
        readonly: readonly,
      }"
      [ngStyle]="{
        'background-color': backgroundColor,
        'border-color': borderColor,
      }"
      [min]="formatDate(minDate)"
      [max]="formatDate(maxDate)"
      [id]="id"
      [type]="'date'"
      [name]="name"
      [placeholder]="placeholder || ''"
      [required]="required"
      [disabled]="disabled"
      [readonly]="readonly"
      (blur)="validate(true)"
      [valueAsDate]="_value"
      (change)="change($event)"
      (keydown)="keyDown($event)"
      (keyup)="keyUp($event)"
      (focus)="emitFocus.emit()"
    />
    @if (rightLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
      </span>
    }
  </div>
  @if (externalIcon) {
    <span
      class="icon icon-external textarea-icon"
      [ngClass]="{
        'no-label': !label?.length,
      }"
      [innerHtml]="externalIcon || '' | universalSafe"
    ></span>
  }
  @if (errorSpan) {
    <div class="box-validation box-invalid show">
      <i
        [ngClass]="{
          'visibility-hidden-force': !error && !externalError,
        }"
        class="fa-solid fa-triangle-exclamation"
      ></i>
      {{ externalError ? externalError : '' }}
      {{ error && !externalError ? error : '' }}
    </div>
  }
</div>

./sq-input-date.component.scss 

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

results matching ""

    No results matching ""