Angular input date set value / 앵귤러 input type date 값 셋팅 예시

<div title="일자 검색" class="flex gap-3">
  <div title="시작일" class="flex gap-1 items-center">
    <div class="w-12">
      시작일
    </div>
    <input type="date" [ngModel]="startAt | date:'YYYY-MM-dd'" (input)="handleStartAt($event)" class="border rounded-md px-2 py-1 shadow">
  </div>
  <div title="종료일" class="flex gap-1 items-center">
    <div class="w-12">
      종료일
    </div>
    <input type="date" [ngModel]="endAt | date: 'YYYY-MM-dd'" (input)="handleEndAt($event)" class="border rounded-md px-2 py-1 shadow">
  </div>
</div>

1. 템플릿 : | 파이프 연산자를 통해 날짜 포멧 설정

 

 

 

 

import { Component, EventEmitter, Output, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-datebox',
  templateUrl: './datebox.component.html',
  styleUrls: ['./datebox.component.scss'],
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    
    
    
  ]
})
export class DateboxComponent implements OnInit{

  @Output() searchStartAt: EventEmitter<string> = new EventEmitter<string>();
  @Output() searchEndAt: EventEmitter<string> = new EventEmitter<string>();

  startAt?: string | undefined;
  endAt?: string | undefined;

  constructor() { }

  ngOnInit(): void {
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let date = new Date().getDate();
    let past = new Date(year, month, date - 7);
    
    this.startAt = past.getFullYear() + '-' + past.getMonth() + '-' + past.getDate();
    this.endAt = new Date().toString();
  }

  handleStartAt(data: any){
    this.searchStartAt.emit(data);
  }
  handleEndAt(data: any){
    this.searchEndAt.emit(data);
  }



}

2. 페이지 로드 시 기본 날짜 값 셋팅

 

 

npm install dayjs

import * as dayjs from 'dayjs';

startAt?: string | undefined;
endAt?: string | undefined;

this.startAt =dayjs().subtract(1, 'month').format('YYYY-MM-DD');
this.endAt = dayjs().format('YYYY-MM-DD');

3. dayjs 활용 예시