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 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`
styleUrls	`./sq-input-date.component.scss`
templateUrl	`./sq-input-date.component.html`

Index

Constructor

constructor(validatorHelper: ValidatorHelper, element: ElementRef, translate: TranslateService)

Defined in src/components/sq-input-date/sq-input-date.component.ts:62

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:39
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:34
Minimum allowed date in 'yyyy-mm-dd' format.

placeholder
Type : `string`
Default value : `'dd-mm-yyyy'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:44`
Placeholder text for the date input.

value
Type : `any`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:50`
The value of the input element in 'yyyy-mm-dd' format.

backgroundColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:141`
Background color of the input element.

borderColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:146`
Border color of the input element.

customClass
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:60`
Custom CSS class for the input element.

disabled
Type : `boolean`
Default value : `false`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:101`
Flag to disable the input element.

errorSpan
Type : `boolean`
Default value : `true`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:96`
Flag to display an error span.

externalError
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:70`
External error message to display.

externalIcon
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:75`
External icon to display.

id
Type : `string`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:50`
The id attribute for the input element.

inputMode
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:171`
Input mode for mobile devices.

label
Type : `string`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:55`
An optional label for the input.

labelColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:151`
Color of the input label.

maxLength
Type : `number \| null`
Default value : `null`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:161`
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:45`
The name attribute for the input element.

pattern
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:166`
Regular expression pattern for input validation.

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

required
Type : `boolean`
Default value : `false`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:111`
Flag to mark the input as required.

timeToChange
Type : `number`
Default value : `0`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:91`
Time in milliseconds before triggering input timeout.

tooltipColor
Type : `string`
Default value : `'inherit'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:131`
Color of the tooltip.

tooltipIcon
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:136`
Icon for the tooltip.

tooltipMessage
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:121`
Tooltip message to display.

tooltipPlacement
Type : `"center top" \| "center bottom" \| "left center" \| "right center"`
Default value : `'right center'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:126`
Placement of the tooltip.

type
Type : `"text" \| "email" \| "hidden" \| "password" \| "tel" \| "url" \| "file"`
Default value : `'text'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:156`
Type of the input element (e.g., text, email, password).

useFormErrors
Type : `boolean`
Default value : `true`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:116`
Flag to use form errors for validation messages.

Outputs

emitFocus
Type : `EventEmitter<Event>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:201`
Event emitter for focus input changes.

inFocus
Type : `EventEmitter<boolean>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:186`
Event emitter for input focus events.

keyPressDown
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:176`
Event emitter for keydown events.

keyPressUp
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:181`
Event emitter for keyup events.

valid
Type : `EventEmitter<boolean>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:191`
Event emitter for validation status.

valueChange
Type : `EventEmitter<any>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:196`
Event emitter for input value changes.

Methods

Async change

change(event: any)

Inherited from SqInputComponent

Defined in SqInputComponent:112

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:150

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:130

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:83

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:314

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:322

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:304

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:62

Reference to a label template.

Public translate

Type : TranslateService

Decorators :


                            @Optional()

Inherited from SqInputComponent

Defined in SqInputComponent:73

- The TranslateService for translation support (optional).

Public validatorHelper

Type : ValidatorHelper

Inherited from SqInputComponent

Defined in SqInputComponent:71

- The ValidatorHelper service for input validation.

_value

Type : any

Default value : ''

Inherited from SqInputComponent

Defined in SqInputComponent:224

The internal value of the input element.

error

Type : boolean | string

Default value : false

Inherited from SqInputComponent

Defined in SqInputComponent:229

Error message to display.

leftLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('leftLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:207

Reference to a left-aligned label template.

nativeElement

Type : ElementRef

Inherited from SqInputComponent

Defined in SqInputComponent:234

Reference to the native element.

rightLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:213

Reference to a right-aligned label template.

timeoutInput

Type : ReturnType<>

Inherited from SqInputComponent

Defined in SqInputComponent:239

Timeout for input changes.

Accessors

value

getvalue()

Defined in src/components/sq-input-date/sq-input-date.component.ts:54

setvalue(value: any)

Defined in src/components/sq-input-date/sq-input-date.component.ts:50

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 { TranslateService } from '@ngx-translate/core'
import { ValidatorHelper } from '../../helpers/validator.helper'
import { SqInputComponent } from '../sq-input/sq-input.component'

/**
 * 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']
})
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 }}">
  <label
    class="display-flex"
    *ngIf="label?.length || tooltipMessage || labelTemplate"
    [ngClass]="{
      readonly: readonly
    }"
    [for]="id"
  >
    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
    <div *ngIf="labelTemplate">
      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
    </div>
    <sq-tooltip
      *ngIf="tooltipMessage"
      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
    }"
  >
    <span class="input-group-text m-0" *ngIf="leftLabel">
      <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()"
    />
    <span class="input-group-text m-0" *ngIf="rightLabel">
      <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
    </span>
  </div>
  <span
    *ngIf="externalIcon"
    class="icon icon-external textarea-icon"
    [ngClass]="{
      'no-label': !label?.length
    }"
    [innerHtml]="externalIcon || '' | universalSafe"
  ></span>
  <div
    class="box-validation box-invalid show"
    *ngIf="errorSpan"
  >
    <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

File

Description

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""