I am required to make datepicker in angular without using Angular Material or bootstrap like in the image below:

How can I make it possible?

ps- Business Requirement.

I am required to make datepicker in angular without using Angular Material or bootstrap like in the image below:

How can I make it possible?

ps- Business Requirement.

• javascript
• html
• css
• angular
• bootstrap-4

2 Answers 2

Why not just use the html element <input type="date"> ?

https://developer.mozilla/en-US/docs/Web/HTML/Element/input/date

I supouse it's only an execise, so only a few points

A calendar are only two *ngFor contatenates

<div class="week" *ngFor="let week of days">
  <div class="day" [class.muted]="!day.isMonth" *ngFor="let day of week">
    {{day.day}}
    </div>
</div>

where days is an array [6][7]

the first index of the array go from 0 to 5 and the second from 0 to 6

You can use two auxiliar functions:

  private getIncrement(year: number, month: number): number {
    let date = new Date("" + year + "-" + month + "-1");
    let increment = date.getDay() > 0 ? date.getDay() - 2 : 5;
    return increment;
  }

  private getDate(
    week: number,
    dayWeek: number,
    year: number,
    month: number,
    increment: number
  ) {
    let date: any;
    let day = week * 7 + dayWeek - increment;
    if (day <= 0) {
      let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
      date = new Date(
        fechaAuxiliar.getTime() + (day - 1) * 24 * 60 * 60 * 1000
      );
    } else {
      date = new Date("" + year + "-" + month + "-" + day);
      if (isNaN(date.getTime())) {
        let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
        date = new Date(
          fechaAuxiliar.getTime() + (day -1) * 24 * 60 * 60 * 1000
        );
      }
    }
      return {
        date:date,
        day:date.getDate(),
        isMonth:date.getMonth()==month-1
      };
  }
}

When you has a month and a year, calculate the increment, then create the formArray of days

private generateDays(year:number,month:number)
{
  const increment=this.getIncrement(year,month)
  const days=[];
  [0,1,2,3,4,5].forEach((x,index)=>
  {
    days.push([])
    for (let y=0;y<7;y++){
      days[index].push(this.getDate(x,y,year,month,increment))
    }
  })
  return days
}

Update: I attach a stackblitz

Update 23-april-2020:, corrected when change the month

NOTE: It's only how make a calendar, you need put in a div that bees visible/invisible, mark the selected day in calendar...